Reorder elements in env panel and initial styling

styles/components/_portfolio_layout.scss

@@ -273,24 +273,17 @@
     .accordion-table__item-content.form-row {
       margin-bottom: 0;
       margin-top: 0;
-      padding-bottom: 0;
+      padding: 0;
     }
 
     li.accordion-table__item__expanded {
       height: auto;
     }
 
-    .environment-list__item {
-      position: relative;
-      height: 7rem;
-    }
-
     span.accordion-table__item__toggler.icon-link {
       font-size: $small-font-size;
       font-weight: $font-normal;
-      position: absolute;
+      float: unset;
-      left: -$gap * 1.25;
-      bottom: 0;
     }
 
     a.application-list-item__environment__csp_link.icon-link {

styles/elements/_panels.scss

@@ -61,11 +61,6 @@
   &__content {
     margin: ($gap * 2) 0;
     padding: 0 ($gap * 2);
-
-    @include media($medium-screen) {
-      margin: ($gap * 4) 0;
-      padding: 0 ($gap * 4);
-    }
   }
 
   &__body {

templates/applications/settings.html

@@ -64,14 +64,12 @@
     user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
   ) }}
 
-  <div class="subheading">    
+  <h3>{{ 'common.resource_names.environments' | translate }}</h3>
-    {{ 'common.resource_names.environments' | translate }}
+  <section class="panel" id="application-environments">
-  </div>
-  <div class="panel">
     {% if g.matchesPath("application-environments") %}
       {% include "fragments/flash.html" %}
     {% endif %}
-    <div class="panel__content">
+    <div class="panel__content panel__content">
       <div class="accordion-table accordion-table-list">
         <ul class="accordion-table__items">
           {% for env in environments_obj %}
@@ -84,44 +82,36 @@
                       <span>
                         {{ env['name'] }}
                       </span>
-                      {% if env['pending'] %}
+                      {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
+                      {{
+                        ToggleButton(
+                          open_html=members_button,
+                          close_html=members_button,
+                          section_name="members"
+                        )
+                      }}
+                      <br>
+                      {% if env['pending'] -%}
                         <span class='usa-label'>PROCESSING</span>
-                      {% endif %}
+                      {% else %}
-                      {% if env['pending'] %}
+                        <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
-                        <span class="icon-link">
+                          <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
-                          {% set edit_environment_button %}
+                        </a>
-                            {{ Icon('edit') }}
+                      {%- endif %}
-                          {% endset %}
-
-                          {{
-                          ToggleButton(
-                            open_html=edit_environment_button,
-                            close_html=edit_environment_button,
-                            section_name="edit"
-                            )
-                          }}
-                        </span>
-                      {% endif %}
-                      <span class="accordion-table__item__toggler icon-link">
-                        {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
-                        {{
-                          ToggleButton(
-                            open_html=members_button,
-                            close_html=members_button,
-                            section_name="members"
-                          )
-                        }}
-                      </span>
                     </div>
                   </div>
                   <div class="form-col form-col--third">
-                    {% if env['pending'] %}
+                      {% set edit_environment_button %}
-                      <em>Cloud service provider link unavailable</em>
+                        <span>Edit</span>
-                    {% else %}
+                      {% endset %}
-                      <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
+
-                        <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
+                      {{
-                      </a>
+                      ToggleButton(
-                    {% endif %}
+                        open_html=edit_environment_button,
+                        close_html=edit_environment_button,
+                        section_name="edit"
+                        )
+                      }}
                   </div>
                 </div>
 
@@ -161,8 +151,8 @@
       {% include "applications/fragments/add_new_environment.html" %}
       </div>
     {% endif %}
-  </div>
+  </section>
-  
+
   <hr>
 
   {% if user_can(permissions.DELETE_APPLICATION) %}

templates/components/toggle_list.html

@@ -1,11 +1,11 @@
 {% macro ToggleButton(action, open_html, close_html, section_name) %}
-  <span v-on:click="toggleSection('{{ section_name }}')">
+  <span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler">
-    <div v-if="selectedSection === '{{ section_name }}'">
+    <span v-if="selectedSection === '{{ section_name }}'">
       {{ close_html }}
-    </div>
+    </span>
-    <div v-else>
+    <span v-else>
       {{ open_html }}
-    </div>
+    </span>
   </span>
 {% endmacro %}