From 8dbb3b32a22759356d34572b1c8b57c1bdcf9812 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Fri, 17 Jan 2020 17:02:15 -0500 Subject: [PATCH 01/14] Portfolio Spacing & Layout Portfolio adjustments: -Cleaned up container margins/padding -Added max-width to header and Settings section -Refined Portfolio header and nav links Other adjustments: -Reduced font size of side nav links --- styles/components/_global_layout.scss | 3 +- styles/components/_portfolio_layout.scss | 37 ++++++++++++++++++------ styles/components/_sticky_cta.scss | 3 +- styles/core/_variables.scss | 2 +- styles/elements/_sidenav.scss | 4 +-- 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 5ad748d1..22de84e8 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -22,14 +22,13 @@ body { padding-bottom: $footer-height * 2.5; .global-panel-container { - margin: $gap; flex-grow: 1; -ms-flex-negative: 1; top: $usa-banner-height + $topbar-height; position: relative; + padding: 0 $spacing-large; @include media($medium-screen) { - margin: $gap * 2; top: $usa-banner-height + $topbar-height; } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 81a15b69..9dc9ee6a 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -4,25 +4,29 @@ min-height: 500px; } - margin-left: 2 * $gap; + .col.col--grow { + padding: 0; + } } .portfolio-header { flex-direction: column; + align-items: center; + margin: $spacing-medium 0; + max-width: 90rem; @include media($small-screen) { flex-direction: row; } - margin-bottom: $gap * 1; - .col--grow { overflow: inherit; } &__name { @include h1; + padding-right: $spacing-medium; h1 { - margin: 0 $gap ($gap * 2) 0; + margin: 0; font-size: 3.5rem; } @@ -30,6 +34,7 @@ font-size: $small-font-size; margin: 0 0 (-$gap * 0.5); color: $color-gray-medium; + max-width: 100%; } } @@ -38,9 +43,15 @@ font-size: $small-font-size; .icon-link { - padding: $gap; + padding: 0; border-radius: 0; color: $color-blue-darkest; + min-width: 10rem; + min-height: 10rem; + + .col { + margin: 0 auto; + } &:hover { background-color: $color-aqua-lightest; @@ -82,11 +93,19 @@ margin-bottom: 3 * $gap; } -.portfolio-content { - margin: (4 * $gap) $gap 0 $gap; +.portfolio-admin { + margin: $spacing-large 0; + max-width: 90rem; +} +.portfolio-content { .panel { padding-bottom: 2rem; + max-width: 90rem; + } + + hr { + max-width: 90rem; } a.add-new-button { @@ -289,8 +308,8 @@ } .portfolio-funding { - padding: 2 * $gap; - padding-top: 0; + max-width: 90rem; + margin: $spacing-large 0; .panel { @include shadow-panel; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index a62dc326..12d67d8e 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -20,9 +20,10 @@ .sticky-cta-container { display: flex; align-items: center; + max-width: 90rem; .usa-button { - margin: $gap $gap * 1.5 $gap 0; + margin: 0; width: 20rem; height: 3.2rem; font-size: $small-font-size; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 122739c4..70524e97 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -189,4 +189,4 @@ $spacing-x-small: 0.5rem; $spacing-small: 1rem; $spacing-md-small: 1.5rem; $spacing-medium: 2rem; -$spacing-large: 3rem; +$spacing-large: 4rem; diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 23a4f05f..81a55b4e 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -113,8 +113,8 @@ text-overflow: ellipsis; &--active { - @include h4; - + font-size: $base-font-size; + font-weight: $font-bold; background-color: $color-aqua-lightest !important; color: $color-primary-darker !important; box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker; From 8c0e88c5c49a1fa4c852c48728f88f86b59ddea5 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Mon, 20 Jan 2020 17:03:18 -0500 Subject: [PATCH 02/14] Topbar, Portfolio Header, & Content alignment --- styles/components/_empty_state.scss | 23 +++++++++++++++------- styles/components/_global_layout.scss | 1 + styles/components/_portfolio_layout.scss | 25 +++++++++++++++++------- styles/components/_sticky_cta.scss | 7 ++++--- styles/components/_topbar.scss | 3 ++- styles/core/_variables.scss | 2 +- styles/elements/_panels.scss | 10 ++++------ styles/sections/_home.scss | 8 ++++---- templates/portfolios/admin.html | 2 +- templates/user/edit.html | 2 +- 10 files changed, 52 insertions(+), 31 deletions(-) diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index b0b73b16..1259f438 100644 --- a/styles/components/_empty_state.scss +++ b/styles/components/_empty_state.scss @@ -1,8 +1,6 @@ .empty-state { - padding: $gap * 3; - max-width: 100%; - background-color: $color-gray-lightest; - margin-top: $gap * 5; + max-width: $max-panel-width; + background-color: #F6F6F7; &--white { background-color: $color-white; @@ -18,17 +16,28 @@ margin-top: 3rem; } + h3 { + margin: 0 0 1rem; + padding: 3.2rem 2.4rem 0; + } + + p { + margin: 0; + padding: 0 $gap * 3; + } + hr { - margin-left: -$gap * 3; - margin-right: -$gap * 3; + margin: $gap * 4 0 0; } &__footer { text-align: center; + background-color: $color-gray-lightest; + padding: $gap * 3; a.usa-button { width: 60%; - display: inline-block; + margin: 0 auto; } } } diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 22de84e8..ff84b3a0 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -28,6 +28,7 @@ body { position: relative; padding: 0 $spacing-large; + @include media($medium-screen) { top: $usa-banner-height + $topbar-height; } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 9dc9ee6a..00beae67 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -5,15 +5,16 @@ } .col.col--grow { + position: relative; padding: 0; } } .portfolio-header { flex-direction: column; - align-items: center; - margin: $spacing-medium 0; - max-width: 90rem; + margin: $gap * 2 0; + max-width: $max-panel-width; + @include media($small-screen) { flex-direction: row; } @@ -25,6 +26,12 @@ &__name { @include h1; padding-right: $spacing-medium; + position: absolute; + top: 50%; + left: 0; + -webkit-transform: translateX(0%) translateY(-50%); + transform: translateX(0%) translateY(-50%); + h1 { margin: 0; font-size: 3.5rem; @@ -64,6 +71,7 @@ &.active { color: $color-blue; background-color: $color-gray-lightest; + text-decoration: none; &:hover { background-color: $color-aqua-lightest; @@ -95,17 +103,17 @@ .portfolio-admin { margin: $spacing-large 0; - max-width: 90rem; + max-width: $max-panel-width; } .portfolio-content { .panel { padding-bottom: 2rem; - max-width: 90rem; + max-width: $max-panel-width; } hr { - max-width: 90rem; + max-width: $max-panel-width; } a.add-new-button { @@ -263,6 +271,7 @@ .portfolio-applications { margin-top: $gap * 5; + max-width: $max-panel-width; &__header { &--title { @@ -308,7 +317,7 @@ } .portfolio-funding { - max-width: 90rem; + max-width: $max-panel-width; margin: $spacing-large 0; .panel { @@ -378,6 +387,8 @@ } .portfolio-reports { + max-width: $max-panel-width; + &__header { margin-bottom: 4 * $gap; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 12d67d8e..c3a7b0ea 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -24,9 +24,6 @@ .usa-button { margin: 0; - width: 20rem; - height: 3.2rem; - font-size: $small-font-size; } } @@ -43,6 +40,10 @@ &-buttons { display: flex; + a { + font-size: 1.5rem; + } + .action-group { margin: 0; diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index a64a1344..7f7a3e6d 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -4,14 +4,15 @@ height: $topbar-height; position: fixed; top: $usa-banner-height; - width: 100%; z-index: 10; + width: 100%; &__navigation { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; + max-width: 1180px; a { color: $color-white; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 70524e97..feb245ad 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -16,7 +16,7 @@ $footer-height: 5rem; $usa-banner-height: 2.8rem; $sidenav-expanded-width: 25rem; $sidenav-collapsed-width: 10rem; -$max-panel-width: 80rem; +$max-panel-width: 90rem; $home-pg-icon-width: 6rem; /* diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss index 8ecd36c6..df681767 100644 --- a/styles/elements/_panels.scss +++ b/styles/elements/_panels.scss @@ -19,10 +19,7 @@ } @mixin panel-margin { - margin-top: 0; - margin-left: 0; - margin-right: 0; - margin-bottom: $site-margins-mobile * 6; + margin: $spacing-large 0; @include media($medium-screen) { margin-bottom: $site-margins * 8; @@ -56,9 +53,10 @@ @include panel-theme-default; @include panel-margin; @include shadow-panel; + max-width: $max-panel-width; &__content { - padding: $gap * 2; + padding: 3.2rem 2.4rem; } &__body { @@ -66,7 +64,7 @@ } &__heading { - padding: $gap * 2; + padding: 3.2rem 2.4rem; @include media($medium-screen) { padding: $gap * 4; diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index b0d715d2..936f919c 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -1,12 +1,12 @@ .home { - margin: $gap * 3; + .sticky-cta { margin: -1.6rem -1.6rem 0 -1.6rem; } &__content { - margin: 4rem; - max-width: 900px; + margin: $spacing-large 0; + max-width: $max-panel-width; &--descriptions { .col { @@ -29,7 +29,7 @@ background-color: $color-white; .home-container { - max-width: 90rem; + max-width: $max-panel-width; margin-left: auto; margin-right: auto; margin-bottom: 8rem; diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html index 3c2a9b9c..264e40f9 100644 --- a/templates/portfolios/admin.html +++ b/templates/portfolios/admin.html @@ -22,7 +22,7 @@ {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }} {{ TextInput(portfolio_form.description, paragraph=True) }}
- {{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }} + {{ SaveButton(text='Save Changes') }}
diff --git a/templates/user/edit.html b/templates/user/edit.html index fc4ac64f..226dc167 100644 --- a/templates/user/edit.html +++ b/templates/user/edit.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% block content %} -
+
{% include "fragments/flash.html" %} From 4dcd49269f2728e9b8d2e2cfcb649363fc8638ac Mon Sep 17 00:00:00 2001 From: hmbrink Date: Tue, 21 Jan 2020 10:45:40 -0500 Subject: [PATCH 03/14] Topbar testing --- styles/components/_portfolio_layout.scss | 11 ----------- styles/components/_topbar.scss | 8 ++++++++ styles/core/_util.scss | 4 ++++ templates/base_public.html | 2 +- templates/portfolios/new/step_1.html | 8 +++++--- 5 files changed, 18 insertions(+), 15 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 00beae67..ee7b1ed1 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -3,11 +3,6 @@ @include grid-row; min-height: 500px; } - - .col.col--grow { - position: relative; - padding: 0; - } } .portfolio-header { @@ -25,12 +20,6 @@ &__name { @include h1; - padding-right: $spacing-medium; - position: absolute; - top: 50%; - left: 0; - -webkit-transform: translateX(0%) translateY(-50%); - transform: translateX(0%) translateY(-50%); h1 { margin: 0; diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index 7f7a3e6d..03a74f55 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -65,3 +65,11 @@ justify-content: flex-end; } } + +.login-topbar .topbar__navigation { + max-width: 100%; +} + +.login-topbar .topbar__context .topbar__link-icon { + margin: 0 0 0 0.8rem; +} diff --git a/styles/core/_util.scss b/styles/core/_util.scss index 5203da45..0790a121 100644 --- a/styles/core/_util.scss +++ b/styles/core/_util.scss @@ -94,3 +94,7 @@ hr { margin: ($gap * 3) ($site-margins * -4); } } + +.usa-section { + padding: 0; +} diff --git a/templates/base_public.html b/templates/base_public.html index 7b872471..07447633 100644 --- a/templates/base_public.html +++ b/templates/base_public.html @@ -17,7 +17,7 @@
{% include 'components/usa_header.html' %} - {% include 'navigation/topbar.html' %} + {% block content %}{% endblock %} diff --git a/templates/portfolios/new/step_1.html b/templates/portfolios/new/step_1.html index 4a499821..abc6d25e 100644 --- a/templates/portfolios/new/step_1.html +++ b/templates/portfolios/new/step_1.html @@ -10,9 +10,11 @@
{% include "fragments/flash.html" %} -
-

{{ "portfolios.header" | translate }}

-

{{ "New Portfolio" }}

+
+
+

{{ "portfolios.header" | translate }}

+

{{ "New Portfolio" }}

+
{{ StickyCTA(text="Create New Portfolio") }} From 32451c69afdf0efdb6de5e20d5ad3c6c2cd2e266 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Tue, 21 Jan 2020 15:27:30 -0500 Subject: [PATCH 04/14] Topbar max-width --- styles/components/_topbar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index 03a74f55..c536fb01 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -12,7 +12,6 @@ flex-direction: row; align-items: stretch; justify-content: space-between; - max-width: 1180px; a { color: $color-white; From 4fd83be37f69a228ac0f79d66c77dbf2994fbb7e Mon Sep 17 00:00:00 2001 From: hmbrink Date: Tue, 21 Jan 2020 15:31:48 -0500 Subject: [PATCH 05/14] Portfolio Header --- styles/components/_portfolio_layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index ee7b1ed1..58039596 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -16,10 +16,14 @@ .col--grow { overflow: inherit; + display: table; + min-height: 10rem; } &__name { @include h1; + display: table-cell; + vertical-align: middle; h1 { margin: 0; From ae3144c82ff432eea34d8252ca759f65206a9751 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Tue, 21 Jan 2020 15:41:03 -0500 Subject: [PATCH 06/14] removed extra grid column padding --- styles/core/_grid.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss index d060198d..d22a866f 100644 --- a/styles/core/_grid.scss +++ b/styles/core/_grid.scss @@ -41,7 +41,6 @@ &.col--grow { flex: 1 auto; - padding-right: $spacing-small; } &.col--half { From 16db93c2daa38025c798a525d1d4bf3f27843c80 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Wed, 22 Jan 2020 14:25:56 -0500 Subject: [PATCH 07/14] Topbar navigation --- styles/components/_empty_state.scss | 2 +- styles/components/_footer.scss | 7 ++++--- styles/components/_global_layout.scss | 1 - styles/components/_topbar.scss | 5 +++-- styles/sections/_home.scss | 1 - 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index 1259f438..71c9e742 100644 --- a/styles/components/_empty_state.scss +++ b/styles/components/_empty_state.scss @@ -1,6 +1,6 @@ .empty-state { max-width: $max-panel-width; - background-color: #F6F6F7; + background-color: #f6f6f7; &--white { background-color: $color-white; diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss index bb248e4d..bd2ede65 100644 --- a/styles/components/_footer.scss +++ b/styles/components/_footer.scss @@ -3,9 +3,7 @@ background-color: $color-white; border-top: 1px solid $color-gray-lightest; display: flex; - flex-direction: row-reverse; align-items: center; - padding: $gap * 1.5; position: fixed; left: 0; bottom: 0; @@ -13,8 +11,11 @@ height: $footer-height; color: $color-gray-dark; font-size: 1.5rem; + padding: 0 $gap * 1.5; &__login { - padding-left: 0.8rem; + width: 100%; + max-width: 1165px; + text-align: right; } } diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index ff84b3a0..22de84e8 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -28,7 +28,6 @@ body { position: relative; padding: 0 $spacing-large; - @include media($medium-screen) { top: $usa-banner-height + $topbar-height; } diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index c536fb01..c61872ae 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -12,6 +12,7 @@ flex-direction: row; align-items: stretch; justify-content: space-between; + max-width: 1180px; a { color: $color-white; @@ -66,9 +67,9 @@ } .login-topbar .topbar__navigation { - max-width: 100%; + max-width: 100%; } .login-topbar .topbar__context .topbar__link-icon { - margin: 0 0 0 0.8rem; + margin: 0 0 0 0.8rem; } diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index 936f919c..23d9d2e1 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -1,5 +1,4 @@ .home { - .sticky-cta { margin: -1.6rem -1.6rem 0 -1.6rem; } From 01341be95b6dc542b4570fe66f15b09618b0a2b7 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Wed, 22 Jan 2020 14:34:23 -0500 Subject: [PATCH 08/14] Profile max-width --- styles/components/_global_layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 22de84e8..2f5e0c4a 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -31,5 +31,9 @@ body { @include media($medium-screen) { top: $usa-banner-height + $topbar-height; } + + .user-edit { + max-width: $max-panel-width; + } } } From 0f2ba887d9d60c24f1c09c3fcfffae0930cf2a4a Mon Sep 17 00:00:00 2001 From: hmbrink Date: Thu, 23 Jan 2020 13:13:04 -0500 Subject: [PATCH 09/14] Large spacing variable --- styles/components/_footer.scss | 2 +- styles/components/_global_layout.scss | 2 +- styles/components/_portfolio_layout.scss | 4 ++-- styles/components/_topbar.scss | 2 +- styles/core/_variables.scss | 1 + styles/sections/_home.scss | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss index bd2ede65..881ab9a7 100644 --- a/styles/components/_footer.scss +++ b/styles/components/_footer.scss @@ -15,7 +15,7 @@ &__login { width: 100%; - max-width: 1165px; + max-width: 1175px; text-align: right; } } diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 2f5e0c4a..9b21b41f 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -26,7 +26,7 @@ body { -ms-flex-negative: 1; top: $usa-banner-height + $topbar-height; position: relative; - padding: 0 $spacing-large; + padding: 0 $large-spacing; @include media($medium-screen) { top: $usa-banner-height + $topbar-height; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 58039596..af083468 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -95,7 +95,7 @@ } .portfolio-admin { - margin: $spacing-large 0; + margin: $large-spacing 0; max-width: $max-panel-width; } @@ -311,7 +311,7 @@ .portfolio-funding { max-width: $max-panel-width; - margin: $spacing-large 0; + margin: $large-spacing 0; .panel { @include shadow-panel; diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index c61872ae..6d84f426 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -12,7 +12,7 @@ flex-direction: row; align-items: stretch; justify-content: space-between; - max-width: 1180px; + max-width: 1190px; a { color: $color-white; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index feb245ad..12657ca4 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -18,6 +18,7 @@ $sidenav-expanded-width: 25rem; $sidenav-collapsed-width: 10rem; $max-panel-width: 90rem; $home-pg-icon-width: 6rem; +$large-spacing: 4rem; /* * USWDS Variables diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index 23d9d2e1..52636a61 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -4,7 +4,7 @@ } &__content { - margin: $spacing-large 0; + margin: $large-spacing 0; max-width: $max-panel-width; &--descriptions { From e6291ad8506132e9609f3fbb09581b0cb3e8454e Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Fri, 24 Jan 2020 10:51:45 -0500 Subject: [PATCH 10/14] Refactor EmptyState macro and update styling for view only empty state based on new designs --- templates/applications/index.html | 5 +-- templates/components/empty_state.html | 24 +++++++---- .../reports/application_and_env_spending.html | 9 +--- templates/task_orders/index.html | 5 +-- translations.yaml | 41 +++++++++++-------- 5 files changed, 44 insertions(+), 40 deletions(-) diff --git a/templates/applications/index.html b/templates/applications/index.html index 00a9b0e8..fd5a5fa7 100644 --- a/templates/applications/index.html +++ b/templates/applications/index.html @@ -24,11 +24,8 @@ {% if not portfolio.applications %} {{ EmptyState( - header="portfolios.applications.empty_state.header"|translate, - message="portfolios.applications.empty_state.message"|translate, - button_text="portfolios.applications.empty_state.button_text"|translate, + resource='applications', button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id), - view_only_text="portfolios.applications.empty_state.view_only_text"|translate, user_can_create=can_create_applications, ) }} diff --git a/templates/components/empty_state.html b/templates/components/empty_state.html index 9989e4f8..8357252e 100644 --- a/templates/components/empty_state.html +++ b/templates/components/empty_state.html @@ -1,14 +1,22 @@ -{% macro EmptyState(header, message, button_text, button_link, view_only_text, user_can_create=True) %} +{% macro EmptyState(resource, button_link, user_can_create=False) %} + {% if user_can_create %} + {% set perms = 'edit' %} + {% else %} + {% set perms = 'view' %} + {% endif %} + + {% set header = "empty_state.{}.header.{}".format(resource, perms) | translate | safe %} + {% set message = "empty_state.{}.message.{}".format(resource, perms) | translate | safe %} + {% set button_text = "empty_state.{}.button_text".format(resource) | translate | safe %} +

{{ header }}

{{ message }}

-
-
- {% if user_can_create %} + {% if user_can_create -%} +
+
{{ button_text }} - {% else %} -

{{ view_only_text }}

- {% endif %} -
+
+ {%- endif %}
{% endmacro %} diff --git a/templates/portfolios/reports/application_and_env_spending.html b/templates/portfolios/reports/application_and_env_spending.html index 783b29ac..44efd76e 100644 --- a/templates/portfolios/reports/application_and_env_spending.html +++ b/templates/portfolios/reports/application_and_env_spending.html @@ -6,17 +6,10 @@ {% if not portfolio.applications %} {% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %} - {% set message = ('portfolios.reports.empty_state.sub_message.can_create_applications' | translate) - if can_create_applications - else ('portfolios.reports.empty_state.sub_message.cannot_create_applications' | translate) - %} {{ EmptyState( - header='portfolios.reports.empty_state.message' | translate, - message=message, - button_text="portfolios.applications.empty_state.button_text"|translate, + resource='applications_reporting', button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id), - view_only_text="portfolios.applications.empty_state.view_only_text"|translate, user_can_create=can_create_applications, ) }} diff --git a/templates/task_orders/index.html b/templates/task_orders/index.html index a720c789..8caeeab2 100644 --- a/templates/task_orders/index.html +++ b/templates/task_orders/index.html @@ -85,11 +85,8 @@ {% endcall %} {% else %} {{ EmptyState( - header="task_orders.empty_state.header"|translate, - message="task_orders.empty_state.message"|translate, + resource="task_orders", button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id), - button_text="task_orders.empty_state.button_text"|translate, - view_only_text="task_orders.empty_state.view_only_text"|translate, user_can_create=user_can(permissions.CREATE_TASK_ORDER), ) }} {% endif %} diff --git a/translations.yaml b/translations.yaml index d9615c4d..8c4c194f 100644 --- a/translations.yaml +++ b/translations.yaml @@ -84,6 +84,31 @@ email: application_invite: "{inviter_name} has invited you to a JEDI cloud application" portfolio_invite: "{inviter_name} has invited you to a JEDI cloud portfolio" environment_ready: JEDI cloud environment ready +empty_state: + applications: + header: + edit: You don’t have any Applications yet + view: This portfolio has no Applications + message: + edit: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same. + view: A Portfolio member with Edit Application permissions can add Applications to this Portfolio. + button_text: Create Your First Application + applications_reporting: + header: + edit: Nothing to report. + view: Nothing to report. + message: + edit: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started. + view: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments. + button_text: Add a new application + task_orders: + header: + edit: Add approved task orders + view: This Portfolio has no Task Orders + message: + edit: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future. + view: A Portfolio member with Edit Funding permissions can fund this Portfolio with approved Task Orders. + button_text: Add Task Order flash: application: created: @@ -370,11 +395,6 @@ portfolios: add_member: Add Team Member add_another_environment: Add another environment create_button: Create Application - empty_state: - header: You don't have any Applications yet - message: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same. - button_text: Create Your First Application - view_only_text: Contact your portfolio administrator to add an application. new: step_1_header: Name and Describe New Application step_1_button_text: "Next: Add Environments" @@ -482,12 +502,6 @@ portfolios: header: Funding Duration tooltip: Funding duration is the period of time that there is a valid task order funding the portfolio. estimate_warning: Reports displayed in JEDI are estimates and not a system of record. - empty_state: - message: Nothing to report. - sub_message: - can_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started. - cannot_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments. - action_label: "Add a new application" total_value: header: Total Portfolio Value tooltip: Total portfolio value is all obligated and projected funds for all task orders in this portfolio. @@ -549,11 +563,6 @@ task_orders: sticky_header_text: "Add a Task Order" sticky_header_review_text: Review Changes sticky_header_context: "Step {step} of 5" - empty_state: - header: Add approved task orders - message: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future. - button_text: Add Task Order - view_only_text: Contact your portfolio administrator to add a Task Order. sign: digital_signature_description: I confirm the uploaded Task Order is signed by the appropriate, duly warranted Agency Contracting Officer who authorized me to upload the Task Order. confirmation_description: I confirm that the information entered here in matches that of the submitted Task Order. From 7857fffc1c5b625ca9a5c41a50ef8c4f57d5d690 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Fri, 24 Jan 2020 11:53:29 -0500 Subject: [PATCH 11/14] Add alert for when portfolio isn't funded, Update styling for env pending label --- static/icons/clock.svg | 1 + styles/elements/_labels.scss | 2 +- .../applications/fragments/environments.html | 37 +++++++++++-------- templates/components/label.html | 5 +++ translations.yaml | 1 + 5 files changed, 30 insertions(+), 16 deletions(-) create mode 100644 static/icons/clock.svg diff --git a/static/icons/clock.svg b/static/icons/clock.svg new file mode 100644 index 00000000..ef1d84a1 --- /dev/null +++ b/static/icons/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/elements/_labels.scss b/styles/elements/_labels.scss index 8c044f8d..1e431957 100644 --- a/styles/elements/_labels.scss +++ b/styles/elements/_labels.scss @@ -21,7 +21,7 @@ text-transform: uppercase; &--default { - background-color: $color-gray-dark; + background-color: $color-gray; } &--info { diff --git a/templates/applications/fragments/environments.html b/templates/applications/fragments/environments.html index fa4e5959..d0934268 100644 --- a/templates/applications/fragments/environments.html +++ b/templates/applications/fragments/environments.html @@ -1,3 +1,4 @@ +{% from "components/alert.html" import Alert %} {% from "components/icon.html" import Icon %} {% from "components/label.html" import Label %} {% from 'components/save_button.html' import SaveButton %} @@ -10,10 +11,13 @@ new_env_form) %}

{{ "portfolios.applications.settings.environments" | translate }}

+ {% if portfolio.num_task_orders == 0 -%} + {{ Alert(message="portfolios.applications.environments.funding_alert"|translate({'name': portfolio.name})) }} + {%- endif %} + {% if g.matchesPath("application-environments") -%} + {% include "fragments/flash.html" %} + {%- endif %}
- {% if g.matchesPath("application-environments") -%} - {% include "fragments/flash.html" %} - {%- endif %} {% if 0 == environments_obj | length -%}

@@ -30,14 +34,21 @@

  • - - - {{ env['name'] }} {{ Icon('link', classes='icon--medium icon--primary') }} - - + {% if not env["pending"] -%} + + + {{ env['name'] }} {{ Icon('link', classes='icon--medium icon--primary') }} + + + {% else -%} + + {{ env['name'] }} + + {{ Label(type="pending_creation", classes='label--below')}} + {%- endif %} {% if user_can(permissions.EDIT_ENVIRONMENT) -%} {{ ToggleButton( @@ -57,10 +68,6 @@ classes="environment-list__item__members" ) }} -
    - {% if env['pending'] -%} - {{ Label(type="changes_pending", classes='label--below')}} - {%- endif %}
    diff --git a/templates/components/label.html b/templates/components/label.html index 27f1c1b1..4d2679f1 100644 --- a/templates/components/label.html +++ b/templates/components/label.html @@ -9,6 +9,11 @@ "text": "changes pending", "color": "default", }, + "pending_creation": { + "icon": "clock", + "text": "pending creation", + "color": "default", + }, "ppoc": {"text": "primary point of contact"} } %} diff --git a/translations.yaml b/translations.yaml index d9615c4d..9f85ac63 100644 --- a/translations.yaml +++ b/translations.yaml @@ -417,6 +417,7 @@ portfolios: add_subscription: Add new subscription blank_slate: This Application has no environments disabled: ": Access Suspended" + funding_alert: "Application environments will not be created until the {name} portfolio is funded." environments_heading: Application Environments existing_application_title: "{application_name} Application Settings" member_count: "{count} Members" From 8093edbf0396c7a384ac91b16ecfce7654ac1810 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Mon, 27 Jan 2020 13:02:06 -0500 Subject: [PATCH 12/14] User icon Added user icon from designs for top navigation --- static/icons/user.svg | 1 + templates/navigation/topbar.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 static/icons/user.svg diff --git a/static/icons/user.svg b/static/icons/user.svg new file mode 100644 index 00000000..a0da4770 --- /dev/null +++ b/static/icons/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/navigation/topbar.html b/templates/navigation/topbar.html index 2715c86f..f48f04ea 100644 --- a/templates/navigation/topbar.html +++ b/templates/navigation/topbar.html @@ -11,7 +11,7 @@
    {% if g.current_user %} - {{ Icon('avatar', classes='topbar__link-icon') }} + {{ Icon('user', classes='topbar__link-icon') }} {{ g.current_user.first_name + " " + g.current_user.last_name }} From 15ac65752ff9f1246141693b0bad043a0744b0ed Mon Sep 17 00:00:00 2001 From: hmbrink Date: Mon, 27 Jan 2020 13:46:56 -0500 Subject: [PATCH 13/14] New portfolio header adjustments --- styles/components/_empty_state.scss | 2 +- styles/components/_portfolio_layout.scss | 4 ++++ templates/portfolios/new/step_1.html | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index 71c9e742..e18a2faf 100644 --- a/styles/components/_empty_state.scss +++ b/styles/components/_empty_state.scss @@ -1,6 +1,6 @@ .empty-state { max-width: $max-panel-width; - background-color: #f6f6f7; + background-color: $color-gray-lightest; &--white { background-color: $color-white; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index b5be6090..77b8b179 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -5,6 +5,10 @@ } } +.portfolio-header-new .portfolio-header__name { + padding: 1.6rem 0; +} + .portfolio-header { flex-direction: column; margin: $gap * 2 0; diff --git a/templates/portfolios/new/step_1.html b/templates/portfolios/new/step_1.html index dddc9047..3305d924 100644 --- a/templates/portfolios/new/step_1.html +++ b/templates/portfolios/new/step_1.html @@ -13,7 +13,7 @@

    {{ "portfolios.header" | translate }}

    -

    {{ "New Portfolio" }}

    +

    {{ 'portfolios.new.title' | translate }}

    {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }} From f0122c794d5b78578784e5765ad03940164858dc Mon Sep 17 00:00:00 2001 From: hmbrink Date: Mon, 27 Jan 2020 14:09:42 -0500 Subject: [PATCH 14/14] New portfolio header padding --- 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 77b8b179..4a45cc5f 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -6,7 +6,7 @@ } .portfolio-header-new .portfolio-header__name { - padding: 1.6rem 0; + padding: 1.6rem 0; } .portfolio-header {