From 9073149cd3df5e13d3a55d2eeb7227bff8b79270 Mon Sep 17 00:00:00 2001 From: dandds Date: Mon, 29 Apr 2019 13:51:03 -0400 Subject: [PATCH 01/13] update sidenav styles --- styles/elements/_sidenav.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 4de80ef8..fa6f3a3f 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -1,6 +1,5 @@ @mixin sidenav__header { padding: $gap ($gap * 2); - font-size: $small-font-size; font-weight: bold; } @@ -21,6 +20,7 @@ .sidenav__title { @include sidenav__header; + font-size: $h3-font-size; text-transform: uppercase; width: 50%; color: $color-gray-dark; @@ -29,6 +29,8 @@ .sidenav__toggle { @include sidenav__header; + font-size: $small-font-size; + line-height: 2.8rem; float: right; color: $color-blue-darker; From ee29c7a0c853bdf65b676290d688a2da5e242320 Mon Sep 17 00:00:00 2001 From: dandds Date: Mon, 29 Apr 2019 13:59:45 -0400 Subject: [PATCH 02/13] more padding for portfolio section links --- styles/components/_portfolio_layout.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 1b2e2692..743d63d4 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -97,6 +97,7 @@ font-size: $small-font-size; .icon-link { + padding: 0.8rem 1.2rem; &.active { color: $color-gray; .icon { From 4e7fcb7aea726def170122e31db178797cca34e1 Mon Sep 17 00:00:00 2001 From: dandds Date: Mon, 29 Apr 2019 14:03:36 -0400 Subject: [PATCH 03/13] dark gray for breadcrumb nav in portfolios --- styles/components/_portfolio_layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 743d63d4..a39c54e5 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -16,7 +16,7 @@ .portfolio-breadcrumbs { margin-bottom: $gap * 2; - color: $color-gray-medium; + color: $color-gray-dark; font-size: $h5-font-size; .icon-link { From 48ef664f416b224ae93a06d2600dc23a5926099a Mon Sep 17 00:00:00 2001 From: dandds Date: Mon, 29 Apr 2019 14:14:50 -0400 Subject: [PATCH 04/13] more padding for portfolio application sections --- styles/elements/_block_lists.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss index 23c83bbb..4653e8f3 100644 --- a/styles/elements/_block_lists.scss +++ b/styles/elements/_block_lists.scss @@ -13,12 +13,11 @@ @mixin block-list-header { @include panel-base; @include panel-theme-default; - padding: $gap * 2; display: flex; flex-direction: row; justify-content: space-between; background-color: $color-gray-lightest; - padding: $gap 2 * $gap; + padding: $gap 3 * $gap; color: $color-gray; .icon-tooltip { From 4d5ddb447e0195b82104a43f3f6a6b67bb92ff9d Mon Sep 17 00:00:00 2001 From: dandds Date: Mon, 29 Apr 2019 17:26:22 -0400 Subject: [PATCH 05/13] updates to application environment and member table styling --- styles/components/_accordion_table.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 7fa7312a..119f1c31 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -19,9 +19,9 @@ .accordion-table__head { padding: $gap $gap*2; + font-size: $small-font-size; font-weight: 700; color: $color-gray; - text-transform: uppercase; background-color: $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest; border-top: none; @@ -107,6 +107,11 @@ } .accordion-table__item__expanded { + font-size: $small-font-size; + font-weight: $font-normal; + background-color: $color-gray-lightest; + padding: $gap*2 $gap*7 $gap*5 $gap*4; + th, td { .icon-link { font-weight: $font-normal; @@ -118,12 +123,7 @@ .accordion-table__item__expanded_first { float: left; - font-weight: bold; } - - font-size: $small-font-size; - background-color: $color-gray-lightest; - padding: $gap*2.5 $gap*7 $gap*5 $gap*7; } } } @@ -131,8 +131,6 @@ #application-members { .accordion-table { .accordion-table__head { - font-size: $small-font-size; - padding-left: $gap*3; } .accordion-table__item-content, .accordion-table__head { From 106fe17aa702ea55d9024871b8a65efebf8203fe Mon Sep 17 00:00:00 2001 From: dandds Date: Tue, 30 Apr 2019 06:56:29 -0400 Subject: [PATCH 06/13] adjust alert headers --- styles/components/_alerts.scss | 5 +++++ templates/components/alert.html | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/styles/components/_alerts.scss b/styles/components/_alerts.scss index 0aa6aee4..7e1f4a88 100644 --- a/styles/components/_alerts.scss +++ b/styles/components/_alerts.scss @@ -4,6 +4,11 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss */ +.usa-alert-heading { + line-height: 2.4rem; + margin-bottom: $gap; +} + @mixin alert { padding: $gap * 2; border-left-width: $gap / 2; diff --git a/templates/components/alert.html b/templates/components/alert.html index d6834f0d..dc5c4330 100644 --- a/templates/components/alert.html +++ b/templates/components/alert.html @@ -25,9 +25,9 @@
{% if vue_template %} -

+

{% else %} -

{{title}}

+

{{title}}

{% endif %} {% if message %} From 1484473bd7defb7c918b7daaff1a6b0926d3b8d1 Mon Sep 17 00:00:00 2001 From: dandds Date: Tue, 30 Apr 2019 16:37:40 -0400 Subject: [PATCH 07/13] updates to portfolio landing page - darker gray for breadcrumbs and subheads - larger font size for subheads - updated toggle for environmnets list per-application - more padding for application row --- styles/components/_portfolio_layout.scss | 6 ++--- styles/elements/_accordions.scss | 5 +++++ templates/portfolios/applications/index.html | 23 ++++++++++---------- 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index a39c54e5..335d4e84 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -34,10 +34,10 @@ .portfolio-breadcrumbs__home { &.icon-link--disabled { - color: $color-gray-medium; + color: $color-gray-dark; opacity: 1; .icon { - @include icon-color($color-gray-medium); + @include icon-color($color-gray-dark); } } } @@ -153,8 +153,6 @@ color: $color-gray-dark; padding: $gap 0; text-transform: uppercase; - opacity: 0.54; - font-size: $small-font-size; font-weight: bold; margin-bottom: 3 * $gap; } diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss index 62a8d66a..2c02f7e0 100644 --- a/styles/elements/_accordions.scss +++ b/styles/elements/_accordions.scss @@ -54,11 +54,16 @@ .accordion__actions { margin-top: $gap; + margin-bottom: $gap * 0.5; display: flex; flex-direction: row; .icon-link { font-size: $small-font-size; + + svg { + width: 1rem; + } } .counter { diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 29d54b8e..5ff931f7 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -54,22 +54,21 @@ - {{ "portfolios.applications.team_text" | translate }} - {{ application.num_users }} + {{ "portfolios.applications.team_text" | translate }} ({{ application.num_users }}) +
{% endif %} + + Environments ({{ application.environments|length }}) + + {{ Icon('caret_up') }} + + + {{ Icon('caret_down') }} + +
-
- - - {{ Icon('minus') }} - - - {{ Icon('plus') }} - - -
    {% for environment in application.environments %} From 41a191b1fc2546575d434486abf4e3aadc27b760 Mon Sep 17 00:00:00 2001 From: dandds Date: Tue, 30 Apr 2019 17:13:10 -0400 Subject: [PATCH 08/13] triangle marker for open environments --- styles/elements/_accordions.scss | 16 ++++++++++++++++ styles/sections/_application_list.scss | 1 + templates/portfolios/applications/index.html | 3 ++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss index 2c02f7e0..9e189d98 100644 --- a/styles/elements/_accordions.scss +++ b/styles/elements/_accordions.scss @@ -1,3 +1,19 @@ +.triangle-box { + position: relative; + + .triangle-up { + $triangle-size: ($gap * 1.5); + position: absolute; + width: 0; + height: 0; + border-left: $triangle-size solid transparent; + border-right: $triangle-size solid transparent; + border-bottom: $triangle-size solid $color-blue-light; + bottom: -4px; + right: 50%; + } +} + .accordion { @include block-list; diff --git a/styles/sections/_application_list.scss b/styles/sections/_application_list.scss index eaf41127..84a0b3d3 100644 --- a/styles/sections/_application_list.scss +++ b/styles/sections/_application_list.scss @@ -3,6 +3,7 @@ display: flex; flex-direction: row; justify-content: space-between; + padding: ($gap * 1.5) ($gap * 3); .usa-input { margin: 0; diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 5ff931f7..ab364b64 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -58,7 +58,7 @@
    {% endif %} - + Environments ({{ application.environments|length }}) {{ Icon('caret_up') }} @@ -66,6 +66,7 @@ {{ Icon('caret_down') }} +
    From bb06735c833f8d9bea021dd24ecc0826e6f61a72 Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 1 May 2019 06:24:15 -0400 Subject: [PATCH 09/13] updates to styles on app settings page: - global: more bottom padding for panels - app description textarea has no width contraint, constrained heigh - fix extra padding in panel footers - larger form columns for app name and description - remove deprecated environment list - do not need extra right padding on nested list items --- styles/components/_accordion_table.scss | 2 +- styles/components/_portfolio_layout.scss | 10 +++++++ styles/elements/_panels.scss | 4 +-- .../portfolios/applications/settings.html | 30 ++++--------------- 4 files changed, 19 insertions(+), 27 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 119f1c31..ecb37d83 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -110,7 +110,7 @@ font-size: $small-font-size; font-weight: $font-normal; background-color: $color-gray-lightest; - padding: $gap*2 $gap*7 $gap*5 $gap*4; + padding: $gap*2 $gap*4 $gap*5 $gap*4; th, td { .icon-link { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 335d4e84..5258b54b 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -336,6 +336,16 @@ } } } + + textarea { + max-height: 9rem; + max-width: none; + } + + .panel__footer { + padding-bottom: 0; + padding-top: 0; + } } .activity-log { diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss index 0036e474..96bb04dd 100644 --- a/styles/elements/_panels.scss +++ b/styles/elements/_panels.scss @@ -22,10 +22,10 @@ margin-top: 0; margin-left: 0; margin-right: 0; - margin-bottom: $site-margins-mobile * 2; + margin-bottom: $site-margins-mobile * 6; @include media($medium-screen) { - margin-bottom: $site-margins * 2; + margin-bottom: $site-margins * 8; } } diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html index 36717346..6570ccc1 100644 --- a/templates/portfolios/applications/settings.html +++ b/templates/portfolios/applications/settings.html @@ -20,10 +20,10 @@ {{ "fragments.edit_application_form.explain" | translate }}

    -
    +
    {{ TextInput(form.name) }}
    -
    +
    {% if user_can(permissions.DELETE_APPLICATION) %}
    -
    +
    {{ TextInput(form.description, paragraph=True) }}
    +
    +   +
    - -
    -
    -

    {{ 'portfolios.applications.environments_heading' | translate }}

    -

    - {{ 'portfolios.applications.environments_description' | translate }} -

    -
    - -
      - {% for environment in application.environments %} -
    • -
      - - -
      -
      • - {% endfor %} -
    -
    -
    From 7bf5ac09e2091290b9beb901342417681483284b Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 1 May 2019 06:52:50 -0400 Subject: [PATCH 10/13] Update box shadow for panels. Box shadow value should be stored and referenced as a variable. --- styles/components/_portfolio_layout.scss | 3 +-- styles/core/_variables.scss | 4 ++-- styles/elements/_panels.scss | 5 +++-- styles/elements/_sidenav.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 5258b54b..5a8f123f 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -387,8 +387,8 @@ } .application-list-item { + box-shadow: $box-shadow; border-radius: 5px; - box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); margin-bottom: 6 * $gap; .col { @@ -476,7 +476,6 @@ } table { - box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); thead { th:first-child { padding-left: 3 * $gap; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 19335b2a..a76893bc 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -113,7 +113,7 @@ $color-focus: $color-gray-light; $color-visited: $color-purple; $color-overlay: rgba(#000, 0.5); -$color-shadow: rgba(#000, 0.3); +$color-shadow: rgba(208, 219, 231, 0.5); $color-transparent: rgba(#000, 0); // Mobile First Breakpoints @@ -154,7 +154,7 @@ $label-border-radius: 2px; $checkbox-border-radius: 2px; $border-radius: 3px; $button-border-radius: 5px; -$box-shadow: 0 0 2px $color-shadow; +$box-shadow: 0px 2px 5px 0px $color-shadow; $focus-outline: 2px dotted $color-gray-light; $focus-spacing: 3px; $nav-width: 300px; // previously 951px; diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss index 96bb04dd..5c9040b8 100644 --- a/styles/elements/_panels.scss +++ b/styles/elements/_panels.scss @@ -47,8 +47,8 @@ } @mixin shadow-panel { - padding: $gap / 2 0; - box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); + padding: $gap /2 0; + box-shadow: $box-shadow; border-top: none; border-bottom: none; } @@ -57,6 +57,7 @@ @include panel-base; @include panel-theme-default; @include panel-margin; + @include shadow-panel; .panel__content { margin: ($gap * 2) 0; diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index fa6f3a3f..9e034598 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -16,7 +16,7 @@ } width: 25rem; - box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15); + box-shadow: $box-shadow; .sidenav__title { @include sidenav__header; From 5a23ca7abeeaee5c5a1f27c3e5e1257c0edbb800 Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 1 May 2019 10:10:06 -0400 Subject: [PATCH 11/13] less space between action items --- styles/elements/_action_group.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/elements/_action_group.scss b/styles/elements/_action_group.scss index 2d96dac8..1497a948 100644 --- a/styles/elements/_action_group.scss +++ b/styles/elements/_action_group.scss @@ -11,10 +11,10 @@ .usa-button, a { - margin: 0 0 0 ($gap * 2); + margin: 0 0 0 $gap; @include media($medium-screen) { - margin: 0 0 0 ($gap * 4); + margin: 0 0 0 ($gap * 2); } } From 4cde4d88d1b8fa41b60bee2ce583ea9b6531e1b4 Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 1 May 2019 10:33:30 -0400 Subject: [PATCH 12/13] Style updates to portfolio team page: - right align environment toggle - fix environment toggle text, add caret icons - display user permissions correctly --- styles/components/_accordion_table.scss | 4 ++++ styles/components/_portfolio_layout.scss | 4 ---- styles/core/_util.scss | 8 +++++++ templates/portfolios/applications/team.html | 26 ++++++++++++++++++++- translations.yaml | 1 + 5 files changed, 38 insertions(+), 5 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index ecb37d83..ce602ebf 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -150,5 +150,9 @@ flex-grow: 1; flex-basis: 0; } + + .accordion-table__item__toggler { + text-align: right; + } } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 5a8f123f..da78eddb 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -227,10 +227,6 @@ } } - .green { - color: $color-green; - } - .name { font-weight: bold; diff --git a/styles/core/_util.scss b/styles/core/_util.scss index cb508813..06ce6d74 100644 --- a/styles/core/_util.scss +++ b/styles/core/_util.scss @@ -46,3 +46,11 @@ @content; } } + +.green { + color: $color-green; +} + +.user-permission { + font-weight: $font-normal; +} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index d8e70ffd..89443b3e 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -46,7 +46,7 @@
    - {{ "portfolios.applications.team_settings.user" | translate }} + {{ "common.name" | translate }} {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} @@ -66,7 +66,11 @@ {% set user_info = environment_users[user.id] %} {% set user_permissions = user_info["permissions"] %} + {% macro PermissionField(value) %} + {{ value }} + {% endmacro %} +<<<<<<< HEAD
  • @@ -85,6 +89,26 @@ {% set close_html %} {{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {% endset %} +======= + +
  • +
    + + {{ name }} + {{ user.full_name }} + {{ PermissionField(user_permissions["delete_access"]) }} + {{ PermissionField(user_permissions["environment_management"]) }} + {{ PermissionField(user_permissions["team_management"]) }} + + + {% set open_html %} + {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }} + {% endset %} + + {% set close_html %} + {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }} + {% endset %} +>>>>>>> Style updates to portfolio team page: {{ ToggleButton( diff --git a/translations.yaml b/translations.yaml index 87027761..c0ca68f2 100644 --- a/translations.yaml +++ b/translations.yaml @@ -38,6 +38,7 @@ common: resource_names: environments: Environments choose_role: Choose a role + name: Name components: modal: close: Close From 035d24f55d9b1a737037dd5080b1e4a24657c965 Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 1 May 2019 11:00:01 -0400 Subject: [PATCH 13/13] fix errors from rebase --- styles/components/_accordion_table.scss | 2 +- templates/portfolios/applications/team.html | 27 ++------------------- 2 files changed, 3 insertions(+), 26 deletions(-) diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index ce602ebf..a1f438f3 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -110,7 +110,7 @@ font-size: $small-font-size; font-weight: $font-normal; background-color: $color-gray-lightest; - padding: $gap*2 $gap*4 $gap*5 $gap*4; + padding: $gap*2 $gap*4; th, td { .icon-link { diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index 89443b3e..c6e07f07 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -70,26 +70,6 @@ {{ value }} {% endmacro %} -<<<<<<< HEAD - -
  • -
    - - {{ name }} - {{ user.full_name }} - {{ user_permissions["delete_access"] }} - {{ user_permissions["environment_management"] }} - {{ user_permissions["team_management"] }} - - - {% set open_html %} - {{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) - {% endset %} - - {% set close_html %} - {{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) - {% endset %} -=======
  • @@ -108,7 +88,6 @@ {% set close_html %} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }} {% endset %} ->>>>>>> Style updates to portfolio team page: {{ ToggleButton( @@ -122,10 +101,8 @@ {% call ToggleSection(section_name="environments") %}
      {% for environment in user_info["environments"] %} -
    • -
      - {{ environment.name }} -
      +
    • + {{ environment.name }}
      • {% endfor %}