pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorder elements in env panel and initial styling

Browse Source
This commit is contained in:
leigh-mil 2019-10-10 14:54:38 -04:00
parent a44e86f296
commit de28ff303c
4 changed files with 38 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
styles/components/_portfolio_layout.scss
View File

@ -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;
left: -$gap * 1.25;
bottom: 0;
float: unset;
}
a.application-list-item__environment__csp_link.icon-link {

5
styles/elements/_panels.scss
View File

@ -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 {

56
templates/applications/settings.html
View File

@ -64,14 +64,12 @@
user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
) }}
<div class="subheading">
{{ 'common.resource_names.environments' | translate }}
</div>
<div class="panel">
<h3>{{ 'common.resource_names.environments' | translate }}</h3>
<section class="panel" id="application-environments">
{% 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,13 +82,27 @@
<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 %}
{% if env['pending'] %}
<span class="icon-link">
{% else %}
<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>
{%- endif %}
</div>
</div>
<div class="form-col form-col--third">
{% set edit_environment_button %}
{{ Icon('edit') }}
<span>Edit</span>
{% endset %}
{{
@ -100,28 +112,6 @@
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'] %}
<em>Cloud service provider link unavailable</em>
{% else %}
<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>
{% endif %}
</div>
</div>
@ -161,7 +151,7 @@
{% include "applications/fragments/add_new_environment.html" %}
</div>
{% endif %}
</div>
</section>
<hr>

10
templates/components/toggle_list.html
View File

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