Update template and styling

This commit is contained in:
leigh-mil 2019-04-26 15:13:38 -04:00
parent 4c7a8c399c
commit 1470a45216
2 changed files with 69 additions and 13 deletions

View File

@ -17,3 +17,38 @@
margin-right: -$gap;
}
}
.environment-role {
padding: $gap * 3;
h4 {
margin-bottom: $gap / 4;
}
.environment-role__users {
background-color: $color-gray-lightest;
padding: ($gap * 1.2) ($gap * 0.6);
font-size: $small-font-size;
display: flex;
flex-wrap: wrap;
.environment-role__user {
background-color: $color-white;
border-radius: 0.5rem;
padding: ($gap / 2) $gap;
border: solid 2px $color-blue;
margin: $gap;
white-space: nowrap;
width: 20rem;
&.unassigned {
border: solid 1px $color-gray-light;
}
}
.environment-role__no-user {
margin: $gap;
padding: ($gap / 2) $gap;
}
}
}

View File

@ -3,6 +3,24 @@
{% from "components/text_input.html" import TextInput %}
{% from "components/save_button.html" import SaveButton %}
{% macro RolePanel(users=[], role='Unassigned(No Access)') %}
{% set unassigned = role == 'Unassigned(No Access)' %}
<div class='environment-role'>
<h4>{{ role }}</h4>
<div class='environment-role__users'>
{% for user in users %}
<div class="environment-role__user {{ 'unassigned' if unassigned }}">
{{ user.name }}{{ Icon('edit', classes="icon--medium right") }}
</div>
{% endfor %}
{% if users == [] %}
<div class='environment-role__no-user'>Currently no members are in this role</div>
{% endif %}
</div>
</div>
{% endmacro %}
<div class="application-list-item">
<header>
<div class="responsive-table-wrapper__header">
@ -22,12 +40,16 @@
</div>
<ul class="accordion-table__items">
{% for name, environment_info in environments_obj.items() %}
{% for env in env_forms %}
{% set member_count = env['form'].data['team_roles'] | length %}
{% set unassigned = env['no_access'] %}
{% set members_by_role = environments_obj[env['env_name']]['members'] %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content">
<span>
{{ name }}
{{ env['env_name'] }}
</span>
<span class="icon-link">
{% set edit_environment_button %}
@ -44,11 +66,11 @@
</span>
<span class="icon-link icon-link--large accordion-table__item__toggler">
{% set open_members_button %}
{{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_members_button %}
{{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
{% endset %}
{{
@ -62,21 +84,20 @@
</div>
{% call ToggleSection(section_name="members") %}
<ul>
{% for member in environment_info['members'] %}
<li class="accordion-table__item__expanded">
<div class="accordion-table__item__expanded_first">{{ member.name }}</div>
<div class="right">{{ member.role }}</div>
</li>
<div>
{{ RolePanel(users=unassigned) }}
{% for role in csp_roles %}
{{ RolePanel(users=members_by_role[role], role=role) }}
{% endfor %}
</ul>
</div>
{% endcall %}
{% call ToggleSection(section_name="edit") %}
<ul>
<li class="accordion-table__item__expanded">
{% set edit_form = environment_info['edit_form'] %}
<form action="{{ url_for('applications.update_environment', environment_id=environment_info['id']) }}" method="post">
{% set edit_form = environments_obj[env['env_name']]['edit_form'] %}
<form action="{{ url_for('applications.update_environment', environment_id=environments_obj[env['env_name']]['id']) }}" method="post">
{{ edit_form.csrf_token }}
{{ TextInput(edit_form.name) }}
{{