Left hand column of report tables now freeze when scrolling horizonta…

…lly, addresses #9.

CHANGELOG.md

@@ -4,6 +4,7 @@
 - **Report Changes**
   - Report pages without any reports now display a message
   - Descriptions can be added to reports that support markdown formatting
+  - Left hand column of report tables now freeze when scrolling horizontally
 
 ## 10.0.0 (August 4, 2019)
 

app/assets/stylesheets/components/tables.scss

@@ -60,3 +60,12 @@
 .table-overflow-scroll {
   overflow-x: scroll;
 }
+
+.table-scroll {
+  margin: auto;
+  margin-bottom: $spacer;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}

app/assets/stylesheets/objects/reports.scss

@@ -6,3 +6,38 @@
     font-size: 72px;
   }
 }
+
+.report-table {
+  td,
+  th {
+    font-size: .8rem;
+    white-space: nowrap;
+
+    &:first-child {
+      left: 0;
+      position: sticky;
+    }
+  }
+}
+
+@each $name, $theme in $themes {
+  .theme-#{$name}-bg {
+    .report-table {
+      th:first-child {
+        background-color: map-get($theme, dashboard-bg);
+      }
+
+      tr:nth-of-type(even) {
+        td:first-child {
+          background-color: map-get($theme, dashboard-bg);
+        }
+      }
+
+      tr:nth-of-type(odd) {
+        td:first-child {
+          background-color: theme-color($theme, table-accent-bg, $table-accent-bg);
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/themes/default.scss

@@ -45,4 +45,6 @@ $default: (
 
   blockquote-border: null, // $p200-grey
   blockquote-color: null, // $p500-grey
+
+  table-accent-bg: #f9f9f9,
 );

app/views/reports/_table.html.haml

@@ -9,8 +9,8 @@
       - counts[index + 1] ||= 0
       - counts[index + 1] += hash["count"].to_i
 
-.dashboard-container.dashboard-table{ style: "overflow-x: scroll;" }
-  %table.table.table-striped.table-borderless.table-hover
+.dashboard-container.dashboard-table.table-scroll
+  %table.table.table-striped.table-borderless.report-table
     %thead
       %tr
         %th= report.header_label