From 3ab84ba6f45da96a91c36f286def1630bde1e739 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Fri, 12 Apr 2019 13:05:44 -0400
Subject: [PATCH] improvements to nested list

---
 styles/components/_accordion_table.scss       | 26 ++++++++--
 templates/components/toggle_list.html         | 38 ++++++++-------
 .../fragments/applications/environments.html  | 48 +++----------------
 3 files changed, 48 insertions(+), 64 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index cbbb60d9..bdd0140f 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -33,21 +33,39 @@
     }
   }
 
+  .accordion-table__item-content {
+    padding-top: $gap*3;
+    padding-right: $gap;
+    padding-bottom: $gap*3;
+    padding-left: $gap*3;
+  }
+
   .accordion-table__items {
     margin: 0;
 
     li {
-      padding: $gap*2;
 
-      border-bottom: 1px dashed $color-gray-lightest;
+      list-style-type: none;
+
+      border-bottom: 1px solid $color-gray-lightest;
       margin: 0;
+
+      ul {
+        margin-top: 0;
+        margin-bottom: 0;
+        background-color: $color-gray-lightest;
+
+        li {
+          border-bottom: 1px solid $color-gray-lighter;
+        }
+      }
     }
 
     .accordion-table__item__toggler {
       @include icon-link-color($color-blue, $color-gray-lightest);
       float: right;
-      margin-left: -$gap;
       color: $color-blue;
+      padding: 0;
 
       .icon {
         @include icon-size(12);
@@ -76,8 +94,6 @@
     }
 
     .accordion-table__item__expanded {
-      margin-left: 2 * $gap;
-
       th, td {
         .icon-link {
           font-weight: $font-normal;
diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
index 9f1d71a2..c324ec9d 100644
--- a/templates/components/toggle_list.html
+++ b/templates/components/toggle_list.html
@@ -1,24 +1,26 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro ToggleList(item_name, item_type, length) %}
-  <li is="toggler">
-    <template slot-scope="props">
-      <span v-on:click="props.toggle">{{ item_name }}</span>
+{% macro ToggleItem(action, item_type, length, icon) %}
+  <span
+    v-on:click="props.toggle"
+    class="icon-link icon-link--large accordion-table__item__toggler">
+    {{ action }} {{ item_type }} ({{ length }}){{ Icon(icon) }}
+  </span>
+{% endmacro %}
 
-      <template v-if="props.isVisible">
-        <span
-          v-on:click="props.toggle"
-          class='icon-link icon-link--large accordion-table__item__toggler' >
-          Hide {{ item_type }} ({{ length }}){{ Icon('caret_up') }}
-        </span>
-      </template>
-      <template v-else>
-        <span
-          v-on:click="props.toggle"
-          class='icon-link icon-link--large accordion-table__item__toggler'>
-          Show {{ item_type }} ({{ length }}){{ Icon('caret_down') }}
-        </span>
-      </template>
+{% macro ToggleList(item_name, item_type, length) %}
+  <li is="toggler" class="accordion-table__item">
+    <template slot-scope="props">
+      <div class="accordion-table__item-content">
+        <span v-on:click="props.toggle">{{ item_name }}</span>
+
+        <template v-if="props.isVisible">
+          {{ ToggleItem("Hide", item_type, length, "caret_up") }}
+        </template>
+        <template v-else>
+          {{ ToggleItem("Show", item_type, length, "caret_down") }}
+        </template>
+      </div>
       <div v-show="props.isVisible">
         {{ caller() }}
       </div>
diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html
index 65e44920..8ae3083a 100644
--- a/templates/fragments/applications/environments.html
+++ b/templates/fragments/applications/environments.html
@@ -20,52 +20,18 @@
       <span class="float-right">{{ "portfolios.applications.environments.members" | translate }}</span>
     </div>
 
-    <ul class='accordion-table__items'>
+    <ul class="accordion-table__items">
       {% for name, members_list in environments_obj.items() %}
         {% call ToggleList(item_name=name, item_type="Members", length=(members_list|length)) %}
-          {% for member in members_list %}
-            <li>
-              {{ member }}
+          <ul>
+            {% for member in members_list %}
+            <li class="accordion-table__item__expanded">
+              <div class="accordion-table__item-content">{{ member }}</div>
             </li>
-          {% endfor %}
+            {% endfor %}
+          </ul>
         {% endcall %}
       {% endfor %}
     </ul>
   </div>
-
-  <environments-table
-    v-cloak
-    v-bind:environments='{{ environments_obj }}'
-    inline-template>
-    <table>
-      <thead>
-        <th scope='col'>{{ "portfolios.applications.environments.name" | translate }}</th>
-        <th scope='col' class='table-cell--align-right'>{{ "portfolios.applications.environments.members" | translate }}</th>
-      </thead>
-
-      <tbody v-for='(members_list, name) in environments' class='accordion-table__items'>
-
-        <tr>
-          <th scope='rowgroup' v-on:click="toggle($event, name)" v-html='name'></th>
-
-          <template v-if="environmentsState[name].isVisible">
-            <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Hide Members (<span v-html='members_list.length'></span>){{ Icon('caret_up') }}</td>
-          </template>
-          <template v-else>
-            <td v-on:click="toggle($event, name)" class='icon-link icon-link--large accordion-table__item__toggler'>Show Members (<span v-html='members_list.length'></span>){{ Icon('caret_down') }}</td>
-          </template>
-        </tr>
-
-        <tr scope='rowgroup' v-for='member in members_list' v-show='environmentsState[name].isVisible' class='accordion-table__item__expanded'>
-          <td>
-            <div>
-              <span v-html='member'></span>
-            </div>
-          </td>
-          <td class='table-cell--expand'></td>
-        </tr>
-      </tbody>
-
-    </table>
-  </environments-table>
 </div>