From caf040a6a21515781d97ad9e483d7064945613a0 Mon Sep 17 00:00:00 2001
From: Rob Wells <robert@fragglebob.me>
Date: Sat, 12 Nov 2016 12:24:41 +0000
Subject: [PATCH 1/3] Fix Styles and Sorting

---
 lib/panel-row.coffee  |   2 +-
 styles/lcov-info.less | 117 +++++++++++++++++++++---------------------
 2 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/lib/panel-row.coffee b/lib/panel-row.coffee
index 6205a7d..8f81e3a 100644
--- a/lib/panel-row.coffee
+++ b/lib/panel-row.coffee
@@ -1,4 +1,4 @@
-class PanelRow extends HTMLElement
+class PanelRow extends HTMLTableRowElement
   initialize: (type, file) ->
     colTitle = @createColumn()
     colTitleIcon = document.createElement('span')
diff --git a/styles/lcov-info.less b/styles/lcov-info.less
index c7ddd21..107e18d 100644
--- a/styles/lcov-info.less
+++ b/styles/lcov-info.less
@@ -6,18 +6,56 @@
   // remove padding around the table
   .panel-body { padding: 0 }
 
-  // style the table
+
   table {
     width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    th {
+      padding: 10px;
+      &.sort-header {
+        cursor: pointer;
+
+        &:after {
+          content: "";
+          float: right;
+          margin-top: 4px;
+          border-width: 0 4px 4px;
+          border-style: solid;
+          border-color: #868686 transparent;
+          visibility: hidden;
+        }
 
-    thead, tbody {
-      width: 100%;
+        &:hover:after, &.sort-up:after, &.sort-down:after {
+          visibility: visible;
+        }
+
+        &.sort-up:after {
+          border-bottom: none;
+          border-width: 4px 4px 0;
+        }
+      }
+    }
+    th, td {
+      padding: 10px;
+      float: left;
       display: block;
+      text-align: left;
     }
 
+    td:nth-child(1), th:nth-child(1) { width: 50%; }
+    td:nth-child(2), th:nth-child(2) { width: 20%; }
+    td:nth-child(3), th:nth-child(3) { width: 10%; }
+    td:nth-child(4), th:nth-child(4) { width: 10%; }
+    td:nth-child(5), th:nth-child(5) { width: 10%; }
+
     tr {
+      background: @base-background-color;
+      border-bottom: 1px solid @tool-panel-background-color;
       width: 100%;
 
+      display: block;
       &::after {
         content: " ";
         display: block;
@@ -26,76 +64,39 @@
       }
     }
 
-    th, td {
-      width: 10%;
-
-      &:nth-child(1) { width: 50% }
-      &:nth-child(2) { width: 20% }
-    }
-
     thead {
-      padding: 0;
-
-      th {
-        padding: 10px;
-
-        // sortable
-        &.sort-header {
-          cursor: pointer;
-
-          &:after {
-            content: "";
-            float: right;
-            margin-top: 4px;
-            border-width: 0 4px 4px;
-            border-style: solid;
-            border-color: #868686 transparent;
-            visibility: hidden;
-          }
-
-          &:hover:after, &.sort-up:after, &.sort-down:after {
-            visibility: visible;
-          }
-
-          &.sort-up:after {
-            border-bottom: none;
-            border-width: 4px 4px 0;
-          }
-        }
+      tr {
+        display: block;
+        position: relative;
       }
     }
-
     tbody {
-      max-height: 160px;
-      overflow-x: hidden;
-      overflow-y: auto;
+      display: block;
+      overflow: auto;
+      width: 100%;
+      height: 150px;
+      td {
+        padding: 7px 10px;
+      }
+    }
 
-      tr {
-        background: @base-background-color;
-        border-bottom: 1px solid @tool-panel-background-color;
 
-        td {
-          padding: 7px 10px;
+    progress {
+      width: 100%;
 
-          &:first-child > span { cursor: pointer }
-        }
-      }
+      &.green::-webkit-progress-value { background-color: @lcov-bar-green; border: 1px solid @lcov-bdr-green }
+      &.red::-webkit-progress-value { background-color: @lcov-bar-red; border: 1px solid @lcov-bdr-red }
+      &.orange::-webkit-progress-value { background-color: @lcov-bar-orange; border: 1px solid @lcov-bdr-orange }
     }
   }
 
-  // progress bar styles
-  progress {
-    width: 100%;
 
-    &.green::-webkit-progress-value { background-color: @lcov-bar-green; border: 1px solid @lcov-bdr-green }
-    &.red::-webkit-progress-value { background-color: @lcov-bar-red; border: 1px solid @lcov-bdr-red }
-    &.orange::-webkit-progress-value { background-color: @lcov-bar-orange; border: 1px solid @lcov-bdr-orange }
-  }
+
 }
 
 .lcov-info-status {
   cursor: pointer;
-  
+
   &.red { color: @background-color-error }
   &.orange { color: @background-color-warning }
   &.green { color: @background-color-success }

From 2e1f65cbf7841cee3e7f74cfb67cf7ac08a1e263 Mon Sep 17 00:00:00 2001
From: Rob Wells <robert@fragglebob.me>
Date: Sat, 12 Nov 2016 12:31:06 +0000
Subject: [PATCH 2/3] Use more and orignal sytles to fix

---
 styles/lcov-info.less | 116 +++++++++++++++++++++---------------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/styles/lcov-info.less b/styles/lcov-info.less
index 107e18d..389f518 100644
--- a/styles/lcov-info.less
+++ b/styles/lcov-info.less
@@ -6,55 +6,17 @@
   // remove padding around the table
   .panel-body { padding: 0 }
 
-
+  // style the table
   table {
     width: 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-
-    th {
-      padding: 10px;
-      &.sort-header {
-        cursor: pointer;
-
-        &:after {
-          content: "";
-          float: right;
-          margin-top: 4px;
-          border-width: 0 4px 4px;
-          border-style: solid;
-          border-color: #868686 transparent;
-          visibility: hidden;
-        }
-
-        &:hover:after, &.sort-up:after, &.sort-down:after {
-          visibility: visible;
-        }
 
-        &.sort-up:after {
-          border-bottom: none;
-          border-width: 4px 4px 0;
-        }
-      }
-    }
-    th, td {
-      padding: 10px;
-      float: left;
+    thead, tbody {
+      width: 100%;
       display: block;
-      text-align: left;
     }
 
-    td:nth-child(1), th:nth-child(1) { width: 50%; }
-    td:nth-child(2), th:nth-child(2) { width: 20%; }
-    td:nth-child(3), th:nth-child(3) { width: 10%; }
-    td:nth-child(4), th:nth-child(4) { width: 10%; }
-    td:nth-child(5), th:nth-child(5) { width: 10%; }
-
     tr {
-      background: @base-background-color;
-      border-bottom: 1px solid @tool-panel-background-color;
       width: 100%;
-
       display: block;
       &::after {
         content: " ";
@@ -64,34 +26,72 @@
       }
     }
 
+    th, td {
+      width: 10%;
+      &:nth-child(1) { width: 50% }
+      &:nth-child(2) { width: 20% }
+      display: block;
+      float: left;
+    }
+
     thead {
-      tr {
-        display: block;
-        position: relative;
+      padding: 0;
+
+      th {
+        padding: 10px;
+
+        // sortable
+        &.sort-header {
+          cursor: pointer;
+
+          &:after {
+            content: "";
+            float: right;
+            margin-top: 4px;
+            border-width: 0 4px 4px;
+            border-style: solid;
+            border-color: #868686 transparent;
+            visibility: hidden;
+          }
+
+          &:hover:after, &.sort-up:after, &.sort-down:after {
+            visibility: visible;
+          }
+
+          &.sort-up:after {
+            border-bottom: none;
+            border-width: 4px 4px 0;
+          }
+        }
       }
     }
+
     tbody {
-      display: block;
-      overflow: auto;
-      width: 100%;
-      height: 150px;
-      td {
-        padding: 7px 10px;
-      }
-    }
+      max-height: 160px;
+      overflow-x: hidden;
+      overflow-y: auto;
 
+      tr {
+        background: @base-background-color;
+        border-bottom: 1px solid @tool-panel-background-color;
 
-    progress {
-      width: 100%;
+        td {
+          padding: 7px 10px;
 
-      &.green::-webkit-progress-value { background-color: @lcov-bar-green; border: 1px solid @lcov-bdr-green }
-      &.red::-webkit-progress-value { background-color: @lcov-bar-red; border: 1px solid @lcov-bdr-red }
-      &.orange::-webkit-progress-value { background-color: @lcov-bar-orange; border: 1px solid @lcov-bdr-orange }
+          &:first-child > span { cursor: pointer }
+        }
+      }
     }
   }
 
+  // progress bar styles
+  progress {
+    width: 100%;
 
-
+    &.green::-webkit-progress-value { background-color: @lcov-bar-green; border: 1px solid @lcov-bdr-green }
+    &.red::-webkit-progress-value { background-color: @lcov-bar-red; border: 1px solid @lcov-bdr-red }
+    &.orange::-webkit-progress-value { background-color: @lcov-bar-orange; border: 1px solid @lcov-bdr-orange }
+  }
 }
 
 .lcov-info-status {

From 041a825e35e81f824204a772c60c2113a178dff5 Mon Sep 17 00:00:00 2001
From: Rob Wells <robert@fragglebob.me>
Date: Sat, 12 Nov 2016 12:32:39 +0000
Subject: [PATCH 3/3] Style that a little bit better

---
 styles/lcov-info.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/lcov-info.less b/styles/lcov-info.less
index 389f518..0ba71f5 100644
--- a/styles/lcov-info.less
+++ b/styles/lcov-info.less
@@ -27,11 +27,11 @@
     }
 
     th, td {
+      display: block;
+      float: left;
       width: 10%;
       &:nth-child(1) { width: 50% }
       &:nth-child(2) { width: 20% }
-      display: block;
-      float: left;
     }
 
     thead {