From ff54ef0a8a0f94d1e46d3d9239d5c9ff40ebd22b Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Thu, 11 Apr 2019 14:50:00 -0400
Subject: [PATCH] Generalize table headers and titles

---
 styles/components/_accordion_table.scss       | 19 ------------------
 styles/components/_portfolio_layout.scss      | 20 -------------------
 styles/elements/_tables.scss                  | 19 ++++++++++++++++++
 .../fragments/admin/portfolio_members.html    |  4 ++--
 .../fragments/applications/environments.html  |  4 ++--
 templates/portfolios/reports/index.html       |  4 ++--
 6 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 67374df2..53153470 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -1,24 +1,5 @@
 .accordion-table {
 
-  .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;
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 359e4a5f..6659554e 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -171,26 +171,6 @@
       padding-bottom: 0;
     }
 
-    .member-list-header {
-      margin: 2 * $gap 5 * $gap;
-      padding: inherit;
-      overflow: auto;
-
-      .left {
-        float: left;
-        padding-bottom: 0.8rem;
-      }
-
-      .icon-link {
-        float: right;
-        margin-top: 0.8rem;
-      }
-
-      .icon {
-
-      }
-    }
-
     .subheading {
       font-size: 1.4rem;
       color: $color-gray;
diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index a4a418ce..7b8da846 100644
--- a/styles/elements/_tables.scss
+++ b/styles/elements/_tables.scss
@@ -102,6 +102,25 @@
   overflow-x: auto;
   @include panel-margin;
 
+  .responsive-table-wrapper__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;
+
+    .responsive-table-wrapper__title {
+      @include h4;
+      font-size: $lead-font-size;
+      flex: 2;
+    }
+  }
+
   table {
     margin-bottom: 0;
   }
diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html
index 4f9f6db0..0227ad03 100644
--- a/templates/fragments/admin/portfolio_members.html
+++ b/templates/fragments/admin/portfolio_members.html
@@ -16,8 +16,8 @@
 
       <div class='application-list-item'>
         <header>
-          <div class='accordion-table__header'>
-            <div class='accordion-table__title'>
+          <div class='responsive-table-wrapper__header'>
+            <div class='responsive-table-wrapper__title'>
               <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
               <div class='subheading'>
                 {{ "portfolios.admin.portfolio_members_subheading" | translate }}
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 47691e0c..6300cd51 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -2,8 +2,8 @@
 
 <div class="application-list-item">
   <header>
-    <div class="accordion-table__header">
-      <div class='accordion-table__title'>
+    <div class="responsive-table-wrapper__header">
+      <div class='responsive-table-wrapper__title'>
         <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
       </div>
       <a class='icon-link'>
diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html
index 079affd5..a932c5fe 100644
--- a/templates/portfolios/reports/index.html
+++ b/templates/portfolios/reports/index.html
@@ -347,8 +347,8 @@
     </budget-chart>
 
     <div class='accordion-table responsive-table-wrapper'>
-      <div class='accordion-table__header'>
-        <h2 class='accordion-table__title'>Total spent per month</h2>
+      <div class='responsive-table-wrapper__header'>
+        <h2 class='responsive-table-wrapper__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"] %}