From 8c0e88c5c49a1fa4c852c48728f88f86b59ddea5 Mon Sep 17 00:00:00 2001 From: hmbrink Date: Mon, 20 Jan 2020 17:03:18 -0500 Subject: [PATCH] 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" %}