Initial stab at accordian header on applications page

styles/atat.scss

@@ -12,6 +12,7 @@
 @import 'elements/buttons';
 @import 'elements/panels';
 @import 'elements/block_lists';
+@import 'elements/accordians';
 @import 'elements/tables';
 @import 'elements/sidenav';
 @import 'elements/action_group';

styles/components/_portfolio_layout.scss

@@ -111,6 +111,12 @@
       }
     }
   }
+
+  .application-list {
+    .application-list-item {
+      box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5);
+    }
+  }
 }
 
 .portfolio-funding {

styles/core/_variables.scss

@@ -83,7 +83,7 @@ $color-green-lighter:        #94bfa2;
 $color-green-lightest:       #e7f4e4;
 
 $color-cool-blue:            #205493;
-$color-cool-blue-light:      #4773aa;
+$color-cool-blue-light:      #4190e2;
 $color-cool-blue-lighter:    #8ba6ca;
 $color-cool-blue-lightest:   #dce4ef;
 

styles/elements/_accordians.scss

@@ -0,0 +1,102 @@
+.accordian {
+  @include block-list;
+
+  .icon-link {
+    margin: -$gap 0;
+  }
+
+  .icon-link,
+  .label {
+    &:first-child {
+      margin-left: -$gap;
+    }
+
+    &:last-child {
+      margin-right: -$gap;
+    }
+
+  }
+}
+
+.accordian__header {
+  @include block-list-header;
+  border-top: 3px solid $color-blue;
+}
+
+.accordian__title {
+  @include block-list__title;
+  color: $color-blue;
+  @include h3;
+}
+
+.accordian__description {
+  @include block-list__description;
+  font-style: italic;
+  font-size: $small-font-size;
+  color: $color-gray;
+}
+
+.accordian__actions {
+  margin-top: $gap;
+  display: flex;
+  flex-direction: row;
+
+  .icon-link {
+    font-size: $small-font-size;
+  }
+
+  .counter {
+    background-color: $color-cool-blue-light;
+    color: $color-white;
+    border-radius: 2px;
+    padding: $gap / 2 $gap;
+    margin-left: $gap;
+  }
+
+  .separator {
+    border: 1px solid $color-gray-medium;
+    opacity: 0.75;
+  }
+}
+
+.accordian__item {
+  @include block-list-item;
+
+  &.accordian__item--selectable {
+    > div {
+      display: flex;
+      flex-direction: row-reverse;
+
+      @include ie-only {
+        width: 100%;
+      }
+
+      > label {
+        @include block-list-selectable-label;
+      }
+    }
+
+    > label {
+      @include block-list-selectable-label;
+    }
+
+    input:checked {
+      + label {
+        color: $color-primary;
+      }
+    }
+
+    @include ie-only {
+      dl {
+        width: 100%;
+        padding-left: $gap*4;
+      }
+    }
+
+  }
+}
+
+.accordian__footer {
+  @include block-list__footer;
+  border-top: 0;
+}

templates/portfolios/applications/index.html

@@ -32,34 +32,48 @@
 
   {% else %}
 
-    {% for application in portfolio.applications %}
+    <div class='application-list'>
-      <div v-cloak class='block-list application-list-item'>
+      {% for application in portfolio.applications %}
-        <header class='block-list__header'>
+        <div v-cloak class='accordian application-list-item'>
-          <h2 class='block-list__title'>{{ application.name }} ({{ application.environments|length }} environments)</h2>
+          <header class='accordian__header row'>
-          {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %}
+            <div class='col col-grow'>
-            <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
+              <h3 class='accordian__title'>{{ application.name }}</h3>
-              {{ Icon('edit') }}
+              <span class='accordian__description'>{{ application.description }}</span>
-              <span>edit</span>
+              <div class='accordian__actions'>
-            </a>
+                {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %}
-          {% endif %}
+                  <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
-        </header>
+                    <span>App Settings</span>
-        <ul>
+                  </a>
-          {% for environment in application.environments %}
+                  <div class='separator'></div>
-            <li class='block-list__item application-list-item__environment'>
+                {% endif %}
-              <a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__link'>
+                <a class='icon-link' href='{{ url_for("portfolios.edit_application", portfolio_id=portfolio.id, application_id=application.id) }}'>
-                {{ Icon('link') }}
+                  <span>Team</span>
-                <span>{{ environment.name }}</span>
+                  <span class='counter'>11</span>
-              </a>
+                </a>
-
-              <div class='application-list-item__environment__members'>
-                <div class='label'>{{ environment.num_users }}</div>
-                <span>members</span>
               </div>
-            </li>
+            </div>
-          {% endfor %}
+            <div class='col'>
-        </ul>
+              <a href='#' class='icon-link'>{{ Icon('plus') }}</a>
-      </div>
+            </div>
-    {% endfor %}
+          </header>
+          <ul>
+            {% for environment in application.environments %}
+              <li class='accordian__item application-list-item__environment'>
+                <a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__link'>
+                  {{ Icon('link') }}
+                  <span>{{ environment.name }}</span>
+                </a>
+
+                <div class='application-list-item__environment__members'>
+                  <div class='label'>{{ environment.num_users }}</div>
+                  <span>members</span>
+                </div>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endfor %}
+    </div>
 
   {% endif %}