From ce9a551b2dddf67053efd5983f7ea6333b1d49a6 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 10 Oct 2019 16:05:22 -0400 Subject: [PATCH] More styling updates --- styles/components/_accordion_table.scss | 76 +++++++++++++----------- styles/components/_portfolio_layout.scss | 21 +++---- templates/applications/settings.html | 68 ++++++++++----------- templates/components/toggle_list.html | 6 +- 4 files changed, 87 insertions(+), 84 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index ba0718d1..060913ab 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -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; - } - } -} diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index c58d2e0d..a07fd984 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -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; + } } } diff --git a/templates/applications/settings.html b/templates/applications/settings.html index 49fad8d7..ccb342e4 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -76,49 +76,43 @@ {% set edit_form = env['edit_form'] %}
  • -
    -
    -
    - - {{ env['name'] }} - - {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} - {{ - ToggleButton( - open_html=members_button, - close_html=members_button, - section_name="members" - ) - }} -
    - {% if env['pending'] -%} - PROCESSING - {% else %} - - {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} - - {%- endif %} -
    -
    -
    - {% set edit_environment_button %} - Edit - {% endset %} - - {{ +
    +
    + + {{ env['name'] }} + + {% 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" + ) + }} +
    + {% if env['pending'] -%} + PROCESSING + {% else %} + + {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} + + {%- endif %}
    {% call ToggleSection(section_name="members") %}
      {% for member in env['members'] %} -
    • +
    • {{ member }}
      • {% endfor %} @@ -127,7 +121,7 @@ {% call ToggleSection(section_name="edit") %}
        -
      • +
      • {{ edit_form.csrf_token }} {{ TextInput(edit_form.name, validation='requiredField') }} diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index ce649f69..16556720 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,5 +1,5 @@ -{% macro ToggleButton(action, open_html, close_html, section_name) %} - +{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %} + {{ close_html }} @@ -10,7 +10,7 @@ {% endmacro %} {% macro ToggleSection(section_name, classes="") %} -
        +
        {{ caller() }}
        {% endmacro %}