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

Style and formatting updates to environments and team tables.

Browse Source 
- Use the built-in grid system for columns.
- Add column heads to environments table.
- Add delete icon to environments table.
This commit is contained in:
dandds 2019-05-02 14:59:35 -04:00
parent e457e9a60d
commit 4289554e76
4 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
styles/components/_accordion_table.scss
View File

@ -12,11 +12,6 @@
padding-left: 0; padding-left: 0;
} }
&.accordion-table-list {
display: table;
width: 100%;
}
.accordion-table__head { .accordion-table__head {
padding: $gap ($gap * 2); padding: $gap ($gap * 2);
font-size: $small-font-size; font-size: $small-font-size;
@ -42,10 +37,7 @@
} }
.accordion-table__item-content { .accordion-table__item-content {
padding-top: $gap * 2; padding: ($gap * 2);
padding-right: $gap;
padding-left: $gap * 2;
padding-bottom: $gap * 3;
} }
.accordion-table__items { .accordion-table__items {
@ -128,29 +120,27 @@
} }
} }
#application-members { .application-list {
.accordion-table { .accordion-table {
.accordion-table__item-content, .accordion-table__head {
display: flex;
& > span {
flex-grow: 3;
display: flex;
flex-basis: 0;
&.icon-link {
flex-grow: 1;
}
}
}
span {
flex-grow: 1;
flex-basis: 0;
}
.accordion-table__item__toggler { .accordion-table__item__toggler {
text-align: right; text-align: right;
padding-right: 0;
padding-left: 0;
}
.accordion-table__item-content {
.icon-link {
padding-right: 0;
padding-left: 0;
}
}
}
}
#application-environments {
.row {
& > .col:first-child {
flex-grow: 5;
} }
} }
} }

58
templates/fragments/applications/edit_environments.html
View File

@ -25,7 +25,7 @@
</div> </div>
{% endmacro %} {% endmacro %}
<div class="application-list-item"> <div class="application-list-item application-list">
<header> <header>
<div class="responsive-table-wrapper__header"> <div class="responsive-table-wrapper__header">
<div class='responsive-table-wrapper__title'> <div class='responsive-table-wrapper__title'>
@ -39,8 +39,11 @@
</header> </header>
<div class="accordion-table accordion-table-list"> <div class="accordion-table accordion-table-list">
<div class="accordion-table__head"> <div class="accordion-table__head row">
<span>{{ "portfolios.applications.environments.name" | translate }}</span> <div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
<div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
<div class="col col--grow">{{ "common.delete" | translate }}</div>
<div class="col col--grow">{{ "common.members" | translate }}</div>
</div> </div>
<ul class="accordion-table__items"> <ul class="accordion-table__items">
@ -51,40 +54,47 @@
<toggler inline-template> <toggler inline-template>
<li class="accordion-table__item"> <li class="accordion-table__item">
<div class="accordion-table__item-content"> <div class="accordion-table__item-content row">
<span> <div class="col col--grow">
{{ env['name'] }} {{ env['name'] }}
</span> </div>
<span class="icon-link"> <div class="col col--grow">
{% set edit_environment_button %} <span class="icon-link">
{% set edit_environment_button %}
{{ Icon('edit') }} {{ Icon('edit') }}
{% endset %} {% endset %}
{{ {{
ToggleButton( ToggleButton(
open_html=edit_environment_button, open_html=edit_environment_button,
close_html=edit_environment_button, close_html=edit_environment_button,
section_name="edit" section_name="edit"
) )
}} }}
</span> </span>
<span class="icon-link icon-link--large accordion-table__item__toggler"> </div>
<div class="col col--grow">
<span class="icon-link icon-link--danger">
{{ Icon('trash') }}
</span>
</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_members_button %} {% set open_members_button %}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }} {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
{% endset %} {% endset %}
{% set close_members_button %} {% set close_members_button %}
{{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }} {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
{% endset %} {% endset %}
{{ {{
ToggleButton( ToggleButton(
open_html=open_members_button, open_html=open_members_button,
close_html=close_members_button, close_html=close_members_button,
section_name="members" section_name="members"
) )
}} }}
</span> </div>
</div> </div>
{% call ToggleSection(section_name="members") %} {% call ToggleSection(section_name="members") %}

67
templates/portfolios/applications/team.html
View File

@ -23,7 +23,7 @@
{{ 'portfolios.applications.team_settings.subheading' | translate }} {{ 'portfolios.applications.team_settings.subheading' | translate }}
</div> </div>
<section class="member-list" id="application-members"> <section class="member-list application-list" id="application-members">
<div class='responsive-table-wrapper panel'> <div class='responsive-table-wrapper panel'>
{% if g.matchesPath("application-members") %} {% if g.matchesPath("application-members") %}
{% include "fragments/flash.html" %} {% include "fragments/flash.html" %}
@ -43,22 +43,22 @@
</header> </header>
<div class="accordion-table accordion-table-list"> <div class="accordion-table accordion-table-list">
<div class="accordion-table__head"> <div class="accordion-table__head row">
<span> <div class="col col--grow">
<span> {{ "common.name" | translate }}
{{ "common.name" | translate }} </div>
</span> <div class="col col--grow">
<span> {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} </div>
</span> <div class="col col--grow">
<span> {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} </div>
</span> <div class="col col--grow">
<span> {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }} </div>
</span> <div class="col col--grow">
</span> &nbsp;
<span class="icon-link" /> </div>
</div> </div>
<ul class="accordion-table__items"> <ul class="accordion-table__items">
{% for member in application.members %} {% for member in application.members %}
@ -67,20 +67,17 @@
{% set user_permissions = user_info["permissions"] %} {% set user_permissions = user_info["permissions"] %}
{% macro PermissionField(value) %} {% macro PermissionField(value) %}
<span class="user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</span> <div class="col col--grow user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</div>
{% endmacro %} {% endmacro %}
<toggler inline-template> <toggler inline-template>
<li class="accordion-table__item"> <li class="accordion-table__item">
<div class="accordion-table__item-content"> <div class="accordion-table__item-content row">
<span> <div class="col col--grow">{{ user.full_name }}</div>
{{ name }} {{ PermissionField(user_permissions["delete_access"]) }}
<span>{{ user.full_name }}</span> {{ PermissionField(user_permissions["environment_management"]) }}
{{ PermissionField(user_permissions["delete_access"]) }} {{ PermissionField(user_permissions["team_management"]) }}
{{ PermissionField(user_permissions["environment_management"]) }} <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{{ PermissionField(user_permissions["team_management"]) }}
</span>
<span class="icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %} {% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
{% endset %} {% endset %}
@ -89,14 +86,14 @@
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
{% endset %} {% endset %}
{{ {{
ToggleButton( ToggleButton(
open_html=open_html, open_html=open_html,
close_html=close_html, close_html=close_html,
section_name="environments" section_name="environments"
) )
}} }}
</span> </div>
</div> </div>
{% call ToggleSection(section_name="environments") %} {% call ToggleSection(section_name="environments") %}
<ul> <ul>

2
translations.yaml
View File

@ -22,6 +22,7 @@ common:
cancel: Cancel cancel: Cancel
confirm: Confirm confirm: Confirm
continue: Continue continue: Continue
delete: Delete
delete_confirm: 'Please type the word DELETE to confirm:' delete_confirm: 'Please type the word DELETE to confirm:'
edit: Edit edit: Edit
hide: Hide hide: Hide
@ -412,6 +413,7 @@ portfolios:
header: Are you sure you want to delete this application? header: Are you sure you want to delete this application?
environments: environments:
name: Name name: Name
edit_name: Edit name
environments_description: Each environment created within an application is logically separated from one another for easier management and security. environments_description: Each environment created within an application is logically separated from one another for easier management and security.
environments_heading: Application environments environments_heading: Application environments
existing_application_title: '{application_name} Application Settings' existing_application_title: '{application_name} Application Settings'