Update styling for empty state and the app environments panel
This commit is contained in:
leigh-mil
parent
e4b1bc33c4
commit
595995cf03
@ -1,30 +1,18 @@
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 6rem ($gap * 2) 0;
|
||||
padding: 5rem ($gap * 2) 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
|
||||
@include media($medium-screen) {
|
||||
padding: 8rem ($gap * 4) 0;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
@include icon-size(50);
|
||||
@include icon-color($color-gray-light);
|
||||
}
|
||||
|
||||
&__message {
|
||||
@include h2;
|
||||
|
||||
line-height: 1.2;
|
||||
max-width: 15em;
|
||||
color: $color-gray;
|
||||
|
||||
@include media($large-screen) {
|
||||
@include h1;
|
||||
}
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
&__sub-message {
|
||||
|
||||
@ -239,7 +239,7 @@
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.application-list-item {
|
||||
|
||||
@ -44,8 +44,6 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-white)
|
||||
@include icon-size(12)
|
||||
margin: 0;
|
||||
@include icon-color($color-white) @include icon-size(12) margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,85 +3,99 @@
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
{% macro EnvironmentManagementTemplate(application, environments_obj, new_env_form, user_can_create_environment) %}
|
||||
<h3>{{ 'common.resource_names.environments' | translate }}</h3>
|
||||
{% macro EnvironmentManagementTemplate(
|
||||
application,
|
||||
environments_obj,
|
||||
new_env_form,
|
||||
user_can_create_environment
|
||||
) %}
|
||||
|
||||
<h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
|
||||
<section class="panel" id="application-environments">
|
||||
{% if g.matchesPath("application-environments") %}
|
||||
{% if g.matchesPath("application-environments") -%}
|
||||
{% include "fragments/flash.html" %}
|
||||
{% endif %}
|
||||
<div class="panel__content">
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<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=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 label--below'>{{Icon('exchange')}} CHANGES PENDING</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-toggle-content__expanded">
|
||||
{{ member }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<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') }}
|
||||
{{
|
||||
SaveButton(
|
||||
text=("common.save" | translate)
|
||||
)
|
||||
}}
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endif %}
|
||||
{% if 0 == environments_obj | length -%}
|
||||
<div class="empty-state panel__content">
|
||||
<p class="empty-state__message">
|
||||
This Application has no environments
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% if user_can_create_environment %}
|
||||
{% else %}
|
||||
<div class="panel__content">
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<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=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 label--below'>{{Icon('exchange')}} CHANGES PENDING</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-toggle-content__expanded">
|
||||
{{ member }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<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') }}
|
||||
{{
|
||||
SaveButton(
|
||||
text=("common.save" | translate)
|
||||
)
|
||||
}}
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
{% if user_can_create_environment -%}
|
||||
{% include "applications/fragments/add_new_environment.html" %}
|
||||
{% endif %}
|
||||
{%- endif %}
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
||||
@ -377,6 +377,7 @@ portfolios:
|
||||
settings:
|
||||
name_description: Application name and description
|
||||
team_members: Team Members
|
||||
environments: Application Environments
|
||||
team_settings:
|
||||
blank_slate:
|
||||
action_label: Invite a new team member
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user