From 66696080384311e02f398355365b6b5e89c9e7e4 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 29 Aug 2019 17:03:55 -0400 Subject: [PATCH 1/9] Make topbar sticky and set sticky cta header so it sticks below topbar --- js/index.js | 8 ++++++-- styles/components/_topbar.scss | 6 ++++++ templates/components/sticky_cta.html | 2 +- templates/navigation/topbar.html | 2 +- 4 files changed, 14 insertions(+), 4 deletions(-) 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/_topbar.scss b/styles/components/_topbar.scss index a69ea78b..d2bff318 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -1,6 +1,12 @@ .topbar { background-color: $color-blue-darkest; border-bottom: 1px solid $color-black; + z-index: 16; + height: 48px; + + &.js-is-sticky { + width: 100%; + } &__navigation { display: flex; diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index b4c37d5a..d47e29cb 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/topbar.html b/templates/navigation/topbar.html index 0defde8a..4f44780c 100644 --- a/templates/navigation/topbar.html +++ b/templates/navigation/topbar.html @@ -1,6 +1,6 @@ {% from "components/icon.html" import Icon %} -
+
{% if user_can(permissions.VIEW_PORTFOLIO_FUNDING) %} From c089682a27dbc68ef8d4dd8d4e654b2f32fe6cc8 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 29 Aug 2019 20:24:56 -0400 Subject: [PATCH 3/9] Use stickybits on sidenav --- styles/components/_topbar.scss | 2 +- styles/elements/_sidenav.scss | 18 +++++++++++------- templates/navigation/global_sidenav.html | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index d2bff318..c38ef04b 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -1,11 +1,11 @@ .topbar { background-color: $color-blue-darkest; border-bottom: 1px solid $color-black; - z-index: 16; height: 48px; &.js-is-sticky { width: 100%; + z-index: 16; } &__navigation { diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 45bc2637..c60550cb 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -4,20 +4,20 @@ } .sidenav-container { - position: relative; box-shadow: $box-shadow; - width: 19.2%; - min-width: 25rem; - - .global-navigation.sidenav { - height: 100%; - } .sidenav { @include media($large-screen) { margin: 0px; } + width: 25rem; + + &.js-is-sticky { + width: 19.2%; + min-width: 25rem; + } + &__title { @include sidenav__header; @@ -184,5 +184,9 @@ width: 10rem; margin: 0px; + + &.js-is-sticky { + width: 10rem; + } } } diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index d75d9880..36a95700 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -4,7 +4,7 @@