Allow collapsing/expanding list of environments

static/icons/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>

styles/components/_portfolio_layout.scss

@@ -113,6 +113,13 @@
   }
 
   .application-list {
+    .toggle-link {
+      background-color: $color-blue-light;
+      .icon {
+        margin: $gap / 2;
+      }
+    }
+
     .application-list-item {
       border-radius: 5px;
       box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);

templates/portfolios/applications/index.html

@@ -34,7 +34,8 @@
 
     <div class='application-list'>
       {% for application in portfolio.applications %}
-        <div v-cloak class='accordian application-list-item'>
+        <div is='toggler' default-visible v-cloak class='accordian application-list-item'>
+          <template slot-scope='props'>
             <header class='accordian__header row'>
               <div class='col col-grow'>
                 <h3 class='accordian__title'>{{ application.name }}</h3>
@@ -53,10 +54,17 @@
                 </div>
               </div>
               <div class='col'>
-              <a href='#' class='icon-link'>{{ Icon('plus') }}</a>
+                <a v-on:click="props.toggle" href='#' class='icon-link toggle-link'>
+                  <template v-if="props.isVisible">
+                    {{ Icon('minus') }}
+                  </template>
+                  <template v-else>
+                    {{ Icon('plus') }}
+                  </template>
+                </a>
               </div>
             </header>
-          <ul>
+            <ul v-if="props.isVisible">
               {% for environment in application.environments %}
                 <li class='accordian__item application-list-item__environment'>
                   <div class='application-list-item__environment__name'>
@@ -70,6 +78,7 @@
                 </li>
               {% endfor %}
             </ul>
+          </template>
         </div>
       {% endfor %}
     </div>