Style and formatting updates to environments and team tables.

- Use the built-in grid system for columns.
- Add column heads to environments table.
- Add delete icon to environments table.

styles/components/_accordion_table.scss

@@ -12,11 +12,6 @@
     padding-left: 0;
   }
 
-  &.accordion-table-list {
-    display: table;
-    width: 100%;
-  }
-
   .accordion-table__head {
     padding: $gap ($gap * 2);
     font-size: $small-font-size;
@@ -42,10 +37,7 @@
   }
 
   .accordion-table__item-content {
-    padding-top: $gap * 2;
-    padding-right: $gap;
-    padding-left: $gap * 2;
-    padding-bottom: $gap * 3;
+    padding: ($gap * 2);
   }
 
   .accordion-table__items {
@@ -128,29 +120,27 @@
   }
 }
 
-#application-members {
+.application-list {
   .accordion-table {
-    .accordion-table__item-content, .accordion-table__head {
-      display: flex;
-
-      & > span {
-        flex-grow: 3;
-        display: flex;
-        flex-basis: 0;
-
-        &.icon-link {
-          flex-grow: 1;
-        }
-      }
-    }
-
-    span {
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-
     .accordion-table__item__toggler {
       text-align: right;
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    .accordion-table__item-content {
+      .icon-link {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+#application-environments {
+  .row {
+    & > .col:first-child {
+      flex-grow: 5;
     }
   }
 }

templates/fragments/applications/edit_environments.html

@@ -25,7 +25,7 @@
     </div>
 {% endmacro %}
 
-<div class="application-list-item">
+<div class="application-list-item application-list">
   <header>
     <div class="responsive-table-wrapper__header">
       <div class='responsive-table-wrapper__title'>
@@ -39,8 +39,11 @@
   </header>
 
   <div class="accordion-table accordion-table-list">
-    <div class="accordion-table__head">
-      <span>{{ "portfolios.applications.environments.name" | translate }}</span>
+    <div class="accordion-table__head row">
+      <div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
+      <div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
+      <div class="col col--grow">{{ "common.delete" | translate }}</div>
+      <div class="col col--grow">{{ "common.members" | translate }}</div>
     </div>
 
     <ul class="accordion-table__items">
@@ -51,10 +54,11 @@
 
         <toggler inline-template>
           <li class="accordion-table__item">
-            <div class="accordion-table__item-content">
-              <span>
+            <div class="accordion-table__item-content row">
+              <div class="col col--grow">
                 {{ env['name'] }}
-              </span>
+              </div>
+              <div class="col col--grow">
                 <span class="icon-link">
                   {% set edit_environment_button %}
                   {{ Icon('edit') }}
@@ -68,7 +72,13 @@
                   )
                   }}
                 </span>
-              <span class="icon-link icon-link--large accordion-table__item__toggler">
+              </div>
+              <div class="col col--grow">
+                <span class="icon-link icon-link--danger">
+                  {{ Icon('trash') }}
+                </span>
+              </div>
+              <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
                 {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
                 {% endset %}
@@ -84,7 +94,7 @@
                 section_name="members"
                 )
                 }}
-              </span>
+              </div>
             </div>
 
             {% call ToggleSection(section_name="members") %}

templates/portfolios/applications/team.html

@@ -23,7 +23,7 @@
       {{ 'portfolios.applications.team_settings.subheading' | translate }}
     </div>
 
-    <section class="member-list" id="application-members">
+    <section class="member-list application-list" id="application-members">
       <div class='responsive-table-wrapper panel'>
         {% if g.matchesPath("application-members") %}
           {% include "fragments/flash.html" %}
@@ -43,22 +43,22 @@
         </header>
 
         <div class="accordion-table accordion-table-list">
-          <div class="accordion-table__head">
-            <span>
-              <span>
+          <div class="accordion-table__head row">
+            <div class="col col--grow">
               {{ "common.name" | translate }}
-              </span>
-              <span>
+            </div>
+            <div class="col col--grow">
               {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
-              </span>
-              <span>
+            </div>
+            <div class="col col--grow">
               {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
-              </span>
-              <span>
+            </div>
+            <div class="col col--grow">
               {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
-              </span>
-            </span>
-            <span class="icon-link" />
+            </div>
+            <div class="col col--grow">
+              &nbsp;
+            </div>
           </div>
           <ul class="accordion-table__items">
             {% for member in application.members %}
@@ -67,20 +67,17 @@
               {% set user_permissions = user_info["permissions"] %}
 
                 {% macro PermissionField(value) %}
-                  <span class="user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</span>
+                  <div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
                 {% endmacro %}
 
                 <toggler inline-template>
                   <li class="accordion-table__item">
-                    <div class="accordion-table__item-content">
-                      <span>
-                        {{ name }}
-                        <span>{{ user.full_name }}</span>
+                    <div class="accordion-table__item-content row">
+                      <div class="col col--grow">{{ user.full_name }}</div>
                       {{ PermissionField(user_permissions["delete_access"]) }}
                       {{ PermissionField(user_permissions["environment_management"]) }}
                       {{ PermissionField(user_permissions["team_management"]) }}
-                      </span>
-                      <span class="icon-link icon-link--large accordion-table__item__toggler">
+                      <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
                         {% set open_html %}
                         {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
                         {% endset %}
@@ -96,7 +93,7 @@
                             section_name="environments"
                           )
                         }}
-                    </span>
+                      </div>
                   </div>
                   {% call ToggleSection(section_name="environments") %}
                     <ul>

translations.yaml

@@ -22,6 +22,7 @@ common:
   cancel: Cancel
   confirm: Confirm
   continue: Continue
+  delete: Delete
   delete_confirm: 'Please type the word DELETE to confirm:'
   edit: Edit
   hide: Hide
@@ -412,6 +413,7 @@ portfolios:
       header: Are you sure you want to delete this application?
     environments:
       name: Name
+      edit_name: Edit name
     environments_description: Each environment created within an application is logically separated from one another for easier management and security.
     environments_heading: Application environments
     existing_application_title: '{application_name} Application Settings'