diff --git a/js/components/forms/base_form.js b/js/components/forms/base_form.js index 938eb3cc..77bc0099 100644 --- a/js/components/forms/base_form.js +++ b/js/components/forms/base_form.js @@ -34,8 +34,12 @@ export default { mixins: [FormMixin], directives: { sticky: { - inserted: el => { - stickybits(el) + inserted: (el, binding) => { + var customAttributes + if (binding.expression) { + customAttributes = JSON.parse(binding.expression) + } + stickybits(el, customAttributes) }, }, }, diff --git a/js/index.js b/js/index.js index 5ea9ed13..5bb1a924 100644 --- a/js/index.js +++ b/js/index.js @@ -130,8 +130,12 @@ const app = new Vue({ directives: { sticky: { - inserted: el => { - stickybits(el) + inserted: (el, binding) => { + var customAttributes + if (binding.expression) { + customAttributes = JSON.parse(binding.expression) + } + stickybits(el, customAttributes) }, }, }, diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 710643ab..5ad748d1 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -19,15 +19,18 @@ body { display: flex; flex-wrap: nowrap; flex-grow: 1; - margin-bottom: $footer-height; + 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; @include media($medium-screen) { margin: $gap * 2; + top: $usa-banner-height + $topbar-height; } } } diff --git a/styles/components/_global_navigation.scss b/styles/components/_global_navigation.scss index 809e25cd..75daa768 100644 --- a/styles/components/_global_navigation.scss +++ b/styles/components/_global_navigation.scss @@ -1,5 +1,6 @@ .global-navigation { background-color: $color-white; + height: auto; .sidenav__link { padding-right: $gap * 2; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index c49699f9..2d841840 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -1,14 +1,16 @@ .sticky-cta { margin-left: -$gap * 4; + margin-right: -$gap * 5; z-index: 10; @include media($medium-screen) { margin-left: -$gap * 5; - margin-right: -$gap * 3; + margin-right: -$gap * 5; } &.js-is-sticky { - width: 80.8%; + width: calc(100% - 25rem); + top: $usa-banner-height + $topbar-height; } .sticky-cta-container { @@ -18,7 +20,7 @@ background-color: $color-gray-lightest; border-top: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-lighter; - padding: 0 $gap * 2 0 $gap * 5; + padding: 0 $gap * 5 0 $gap * 5; box-shadow: $box-shadow; .usa-button { diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index a69ea78b..9e180685 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -1,6 +1,11 @@ .topbar { background-color: $color-blue-darkest; border-bottom: 1px solid $color-black; + height: $topbar-height; + position: fixed; + top: $usa-banner-height; + width: 100%; + z-index: 10; &__navigation { display: flex; diff --git a/styles/components/_usa_banner.scss b/styles/components/_usa_banner.scss index 07a11fa9..b9455683 100644 --- a/styles/components/_usa_banner.scss +++ b/styles/components/_usa_banner.scss @@ -3,6 +3,9 @@ align-items: center; padding: ($gap / 2) $gap; z-index: 15; + position: fixed; + height: $usa-banner-height; + width: 100%; img { flex-grow: 0; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 4ec4ab39..dc609fe4 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -13,6 +13,9 @@ $hover-transition-time: 0.2s; $search-input-height: 4.4rem; $search-button-width: 5rem; $footer-height: 5rem; +$usa-banner-height: 2.8rem; +$sidenav-expanded-width: 25rem; +$sidenav-collapsed-width: 10rem; /* * USWDS Variables diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 1cf84593..0a6b201c 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -4,20 +4,28 @@ } .sidenav-container { - position: relative; box-shadow: $box-shadow; + overflow: hidden; + position: relative; + top: $topbar-height + $usa-banner-height; + width: $sidenav-expanded-width; - .global-navigation.sidenav { - height: 100%; + &--minimized { + @extend .sidenav-container; + width: $sidenav-collapsed-width; + } + + &__fixed { + position: fixed; } .sidenav { + width: $sidenav-expanded-width; + @include media($large-screen) { margin: 0px; } - width: 25rem; - &__title { @include sidenav__header; @@ -43,7 +51,16 @@ ul { &.sidenav__list--padded { - margin: (4 * $gap) 0; + margin-top: 4 * $gap; + margin-bottom: $footer-height; + padding-bottom: $gap; + position: fixed; + overflow-y: scroll; + top: $topbar-height + $usa-banner-height + 4rem; + bottom: 0; + left: 0; + width: $sidenav-expanded-width; + background-color: $color-white; } list-style: none; @@ -182,7 +199,7 @@ &--minimized { @extend .sidenav; - width: 10rem; + width: $sidenav-collapsed-width; margin: 0px; } } diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index b4c37d5a..75e49ccf 100644 --- a/templates/components/sticky_cta.html +++ b/templates/components/sticky_cta.html @@ -1,5 +1,5 @@ {% macro StickyCTA(text) -%} -
+

{{ text }}

diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index d75d9880..c6141641 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -2,33 +2,37 @@ {% from "components/sidenav_item.html" import SidenavItem %} -
+