From f6f093ef856854fe217ab159238d6195f27e404a Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Tue, 9 Apr 2019 13:49:51 -0400
Subject: [PATCH] Generalize styling for accordion tables

---
 styles/atat.scss                            |   1 +
 styles/components/_accordion_table.scss     |  85 +++++++++++
 styles/sections/_reports.scss               | 153 +++++---------------
 templates/portfolios/applications/edit.html |   2 +-
 templates/portfolios/reports/index.html     |  14 +-
 5 files changed, 129 insertions(+), 126 deletions(-)
 create mode 100644 styles/components/_accordion_table.scss

diff --git a/styles/atat.scss b/styles/atat.scss
index 3e241da3..bd947aea 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -23,6 +23,7 @@
 @import 'elements/graphs';
 @import 'elements/menu';
 
+@import 'components/accordion_table';
 @import 'components/topbar';
 @import 'components/top_message';
 @import 'components/global_layout';
diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
new file mode 100644
index 00000000..6db69c98
--- /dev/null
+++ b/styles/components/_accordion_table.scss
@@ -0,0 +1,85 @@
+.accordion-table {
+  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+
+  .accordion-table__header {
+    @include panel-base;
+    @include panel-theme-default;
+    border-top: none;
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: $gap * 2;
+
+    .accordion-table__title {
+      @include h4;
+      font-size: $lead-font-size;
+      flex: 2;
+    }
+  }
+
+  table {
+    thead th {
+      text-transform: uppercase;
+      border-bottom: 1px solid $color-gray-lightest;
+      border-top: none;
+    }
+
+    th, td {
+      white-space: nowrap;
+
+      button {
+        margin: 0;
+      }
+    }
+
+    .accordion-table__items {
+      .accordion-table__item__toggler {
+        @include icon-link-color($color-blue, $color-gray-lightest);
+        margin-left: -$gap;
+        color: $color-blue;
+
+        .icon {
+          @include icon-size(12);
+          margin-right: $gap;
+        }
+
+        .open-indicator {
+          position: absolute;
+          bottom: 0;
+          left: 5 * $gap;
+          width: 0;
+          height: 0;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+
+          border-bottom: 10px solid $color-blue-light;
+        }
+      }
+
+      th, td {
+        border-bottom: none;
+      }
+
+      th[scope=rowgroup] {
+        position: relative;
+      }
+
+      .accordion-table__item__expanded {
+        margin-left: 2 * $gap;
+
+        th, td {
+          .icon-link {
+            font-weight: $font-normal;
+            font-size: $base-font-size;
+          }
+
+          border-bottom: 1px dashed $color-white;
+          background-color: $color-blue-light;
+        }
+      }
+    }
+  }
+}
diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss
index b881cbad..6aa1e5e1 100644
--- a/styles/sections/_reports.scss
+++ b/styles/sections/_reports.scss
@@ -201,143 +201,60 @@
   }
 }
 
+.spend-table__month-select {
+  margin: 0;
+  flex: 1;
+}
 
-.spend-table {
-  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-
-  .spend-table__header {
-    @include panel-base;
-    @include panel-theme-default;
-    border-top: none;
-    border-bottom: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    padding: $gap * 2;
-
-    .spend-table__title {
-      @include h4;
-      font-size: $lead-font-size;
-      flex: 2;
-    }
-
-    .spend-table__month-select {
-      margin: 0;
-      flex: 1;
+table {
+  .spend-table__portfolio {
+    th, td {
+      font-weight: bold;
+      border-bottom: 1px solid $color-gray-lightest;
     }
   }
 
-  table {
-    thead th {
-      text-transform: uppercase;
-      border-bottom: 1px solid $color-gray-lightest;
-      border-top: none;
+  th, td {
+    &.previous-month {
+      color: $color-gray;
     }
 
-    th, td {
-      white-space: nowrap;
+    &.meter-cell {
+      padding-left: 0;
+      position: relative;
+      min-width: 4rem;
 
-      button {
-        margin: 0;
+      @include media($medium-screen) {
+        min-width: 12rem;
       }
 
-      &.previous-month {
-        color: $color-gray;
-      }
-
-      &.meter-cell {
-        padding-left: 0;
-        position: relative;
-        min-width: 4rem;
+      meter {
+        width: 100%;
+        height: 3rem;
+        background: $color-white;
+        display: none;
 
         @include media($medium-screen) {
-          min-width: 12rem;
+          display: block;
         }
 
-        meter {
-          width: 100%;
-          height: 3rem;
+        &::-webkit-meter-bar {
           background: $color-white;
-          display: none;
-
-          @include media($medium-screen) {
-            display: block;
-          }
-
-          &::-webkit-meter-bar {
-            background: $color-white;
-          }
-        }
-
-        .spend-table__meter-value {
-          @include h5;
-
-          @include media($medium-screen) {
-            display: block;
-            color: $color-white;
-            background-color: rgba($color-blue, 0.65);
-            border-radius: $gap/2;
-            position: absolute;
-            top: 2.3rem;
-            left: $gap / 2;
-            padding: 0 ($gap / 2);
-          }
         }
       }
-    }
 
-    .spend-table__portfolio {
-      th, td {
-        font-weight: bold;
-        border-bottom: 1px solid $color-gray-lightest;
-      }
-    }
+      .spend-table__meter-value {
+        @include h5;
 
-    .spend-table__application {
-      .spend-table__application__toggler {
-        @include icon-link-color($color-blue, $color-gray-lightest);
-        margin-left: -$gap;
-        color: $color-blue;
-
-        .icon {
-          @include icon-size(12);
-          margin-right: $gap;
-        }
-
-        .open-indicator {
+        @include media($medium-screen) {
+          display: block;
+          color: $color-white;
+          background-color: rgba($color-blue, 0.65);
+          border-radius: $gap/2;
           position: absolute;
-          bottom: 0;
-          left: 5 * $gap;
-          width: 0;
-          height: 0;
-          border-left: 10px solid transparent;
-          border-right: 10px solid transparent;
-
-          border-bottom: 10px solid $color-blue-light;
-        }
-      }
-
-      th, td {
-        border-bottom: none;
-      }
-
-      th[scope=rowgroup] {
-        position: relative;
-      }
-
-      .spend-table__application__env {
-        margin-left: 2 * $gap;
-
-        th, td {
-          .icon-link {
-            font-weight: $font-normal;
-            font-size: $base-font-size;
-          }
-
-          border-bottom: 1px dashed $color-white;
-          background-color: $color-blue-light;
+          top: 2.3rem;
+          left: $gap / 2;
+          padding: 0 ($gap / 2);
         }
       }
     }
diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html
index fac89ea0..86189109 100644
--- a/templates/portfolios/applications/edit.html
+++ b/templates/portfolios/applications/edit.html
@@ -22,7 +22,7 @@
     </div>
   </form>
 
-    <div class="responsive-table-wrapper panel">
+    <div class="accordion-table responsive-table-wrapper panel">
         {% include "fragments/applications/environments.html" %}
       <div class="action-group">
         <a class='icon-link'>
diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html
index fd008644..079affd5 100644
--- a/templates/portfolios/reports/index.html
+++ b/templates/portfolios/reports/index.html
@@ -346,9 +346,9 @@
       </div>
     </budget-chart>
 
-    <div class='spend-table responsive-table-wrapper'>
-      <div class='spend-table__header'>
-        <h2 class='spend-table__title'>Total spent per month</h2>
+    <div class='accordion-table responsive-table-wrapper'>
+      <div class='accordion-table__header'>
+        <h2 class='accordion-table__title'>Total spent per month</h2>
 
         <select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'>
           {% for m in cumulative_budget["months"] %}
@@ -402,10 +402,10 @@
             </tr>
           </tbody>
 
-          <tbody v-for='(application, name) in applicationsState' class='spend-table__application'>
+          <tbody v-for='(application, name) in applicationsState' class='accordion-table__items'>
             <tr>
               <th scope='rowgroup'>
-                <button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__application__toggler'>
+                <button v-on:click='toggle($event, name)' class='icon-link icon-link--large accordion-table__item__toggler'>
                   <template v-if='application.isVisible'>{{ Icon('caret_down') }}<div class='open-indicator'></div></template>
                   <template v-else>{{ Icon('caret_right') }}</template>
                   <span v-html='name'></span>
@@ -433,9 +433,9 @@
               </td>
             </tr>
 
-            <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='spend-table__application__env'>
+            <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='accordion-table__item__expanded'>
               <th scope='rowgroup'>
-                <div class='icon-link spend-table__application__env'>
+                <div class='icon-link accordion-table__item__expanded'>
                   <span v-html='envName'></span>
                 </div>
               </th>