More styling updates
This commit is contained in:
leigh-mil
parent
de28ff303c
commit
ce9a551b2d
@ -10,6 +10,11 @@
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
@ -45,11 +50,14 @@
|
||||
&__items {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
.accordion-table__item {
|
||||
font-weight: $font-bold;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: $gap 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.icon-link--large {
|
||||
padding-top: $gap * 0.5;
|
||||
@ -151,37 +159,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__expanded {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-normal;
|
||||
background-color: $color-gray-lightest;
|
||||
padding: ($gap * 2) ($gap * 4);
|
||||
&-toggle-content {
|
||||
margin-top: $gap;
|
||||
|
||||
.col--grow {
|
||||
&__expanded {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap;
|
||||
|
||||
th,
|
||||
td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
border-bottom: 1px dashed $color-white;
|
||||
}
|
||||
.col--grow {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
&_first {
|
||||
float: left;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
&-role {
|
||||
.icon-link {
|
||||
padding: 0;
|
||||
vertical-align: text-top;
|
||||
border-bottom: 1px dashed $color-white;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 0 0 0.25rem;
|
||||
&_first {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-role {
|
||||
.icon-link {
|
||||
padding: 0;
|
||||
vertical-align: text-top;
|
||||
|
||||
.icon {
|
||||
margin: 0 0 0 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -210,11 +226,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#application-environments {
|
||||
.row {
|
||||
& > .col:first-child {
|
||||
flex-grow: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,25 +270,26 @@
|
||||
margin-top: $gap * 3;
|
||||
}
|
||||
|
||||
.accordion-table__item-content.form-row {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.accordion-table__item__expanded {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
span.accordion-table__item__toggler.icon-link {
|
||||
a.application-list-item__environment__csp_link {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-normal;
|
||||
float: unset;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
a.application-list-item__environment__csp_link.icon-link {
|
||||
font-size: $small-font-size;
|
||||
span.accordion-table__item__toggler {
|
||||
font-weight: $font-normal;
|
||||
|
||||
&.environment-list__item__members {
|
||||
float: unset;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -76,49 +76,43 @@
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
<div class="environment-list__item">
|
||||
<span>
|
||||
{{ env['name'] }}
|
||||
</span>
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
<span>Edit</span>
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
<div class="accordion-table__item-content">
|
||||
<div class="environment-list__item">
|
||||
<span>
|
||||
{{ env['name'] }}
|
||||
</span>
|
||||
{% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
open_html=members_button,
|
||||
close_html=members_button,
|
||||
section_name="members",
|
||||
classes="environment-list__item__members"
|
||||
)
|
||||
}}
|
||||
{% set edit_environment_button = "Edit" %}
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=edit_environment_button,
|
||||
close_html=edit_environment_button,
|
||||
section_name="edit"
|
||||
)
|
||||
}}
|
||||
<br>
|
||||
{% if env['pending'] -%}
|
||||
<span class='usa-label'>PROCESSING</span>
|
||||
{% else %}
|
||||
<a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
|
||||
<span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
|
||||
</a>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members") %}
|
||||
<ul>
|
||||
{% for member in env['members'] %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<li class="accordion-table__item-toggle-content__expanded">
|
||||
{{ member }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
@ -127,7 +121,7 @@
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<li class="accordion-table__item__expanded">
|
||||
<li class="accordion-table__item-toggle-content__expanded">
|
||||
<form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
|
||||
{{ edit_form.csrf_token }}
|
||||
{{ TextInput(edit_form.name, validation='requiredField') }}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% macro ToggleButton(action, open_html, close_html, section_name) %}
|
||||
<span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler">
|
||||
{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
|
||||
<span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
|
||||
<span v-if="selectedSection === '{{ section_name }}'">
|
||||
{{ close_html }}
|
||||
</span>
|
||||
@ -10,7 +10,7 @@
|
||||
{% endmacro %}
|
||||
|
||||
{% macro ToggleSection(section_name, classes="") %}
|
||||
<div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
|
||||
<div v-show="selectedSection === '{{ section_name }}'" class='accordion-table__item-toggle-content {{ classes }}'>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user