From 1f65543faa3aa213006b5bcbc727859a12175f63 Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Sun, 30 Jun 2024 13:48:59 -0600 Subject: [PATCH 1/7] Add scroll shadow to `#multipage-nav` wrapper for overflowing desktop screens. --- source/sass/components/multipage-nav.scss | 38 +++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 2c2a9564403..68b2c8f8801 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -8,6 +8,44 @@ @media (min-width: $bp-md) { border-bottom: 1px solid $gray-20; } + + > .container > .row > .col-12 { + overflow: auto; + + background: + /* Shadow Cover LEFT */ + linear-gradient( + to right, + white 30%, + rgba(255, 255, 255, 0) + ), + + /* Shadow Cover RIGHT */ + linear-gradient( + to right, + rgba(255, 255, 255, 0) 70%, + white 100% + ), + + /* Shadow LEFT */ + radial-gradient( + farthest-side at 0 50%, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0) + ), + + /* Shadow RIGHT */ + radial-gradient( + farthest-side at 100% 50%, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0) + ); + + background-repeat: no-repeat; + background-size: 40px 100%, calc(100% - 40px) 100%, 14px 100%, 14px 100%; + background-position: left center, right center, left center, right center; + background-attachment: local, local, scroll, scroll; + } } } From bd64d572f22dda1af5516964d7f25fc2f5a37b75 Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Sun, 30 Jun 2024 14:29:35 -0600 Subject: [PATCH 2/7] Fix linting for scroll shadow scss --- source/sass/components/multipage-nav.scss | 47 +++++++++++------------ 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 68b2c8f8801..46045fa7f8b 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -14,36 +14,33 @@ background: /* Shadow Cover LEFT */ - linear-gradient( - to right, - white 30%, - rgba(255, 255, 255, 0) - ), - + linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), /* Shadow Cover RIGHT */ - linear-gradient( - to right, - rgba(255, 255, 255, 0) 70%, - white 100% - ), - + linear-gradient(to right, rgba(255, 255, 255, 0) 70%, white 100%), /* Shadow LEFT */ - radial-gradient( - farthest-side at 0 50%, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0) - ), - + radial-gradient( + farthest-side at 0 50%, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0) + ), /* Shadow RIGHT */ - radial-gradient( - farthest-side at 100% 50%, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0) - ); + radial-gradient( + farthest-side at 100% 50%, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0) + ); background-repeat: no-repeat; - background-size: 40px 100%, calc(100% - 40px) 100%, 14px 100%, 14px 100%; - background-position: left center, right center, left center, right center; + background-size: + 40px 100%, + calc(100% - 40px) 100%, + 14px 100%, + 14px 100%; + background-position: + left center, + right center, + left center, + right center; background-attachment: local, local, scroll, scroll; } } From 23cb5e1b6ae668afa03c9e905e6bcba21863a100 Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Wed, 10 Jul 2024 00:55:26 -0600 Subject: [PATCH 3/7] Implement white scroll shadow with tailwind utility classes for secondary navigation --- .../wagtailpages/bannered_campaign_page.html | 2 +- source/sass/components/multipage-nav.scss | 32 +------------------ 2 files changed, 2 insertions(+), 32 deletions(-) diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html index 806fc93ad00..0a852b5388f 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html @@ -19,7 +19,7 @@
-
+
{% mini_site_horizontal_nav page %}
diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 46045fa7f8b..829e61a1ff4 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -10,38 +10,8 @@ } > .container > .row > .col-12 { - overflow: auto; + // overflow: auto; - background: - /* Shadow Cover LEFT */ - linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), - /* Shadow Cover RIGHT */ - linear-gradient(to right, rgba(255, 255, 255, 0) 70%, white 100%), - /* Shadow LEFT */ - radial-gradient( - farthest-side at 0 50%, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0) - ), - /* Shadow RIGHT */ - radial-gradient( - farthest-side at 100% 50%, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0) - ); - - background-repeat: no-repeat; - background-size: - 40px 100%, - calc(100% - 40px) 100%, - 14px 100%, - 14px 100%; - background-position: - left center, - right center, - left center, - right center; - background-attachment: local, local, scroll, scroll; } } } From 71e2f5957439bf8585bb59dbe3cc4d59b480e10c Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Wed, 10 Jul 2024 12:18:30 -0600 Subject: [PATCH 4/7] Resize white gradient shadow for overflowing elements in secondary navigation --- .../templates/wagtailpages/bannered_campaign_page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html index 0a852b5388f..fb6cbb93753 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html @@ -19,7 +19,7 @@
-
+
{% mini_site_horizontal_nav page %}
From 6342a1856a0aeae0bb6409caef042056cf53c5e0 Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Wed, 10 Jul 2024 12:23:32 -0600 Subject: [PATCH 5/7] Remove unused style block from scss targeting secondary nav for overflowing content. --- source/sass/components/multipage-nav.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 829e61a1ff4..2c2a9564403 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -8,11 +8,6 @@ @media (min-width: $bp-md) { border-bottom: 1px solid $gray-20; } - - > .container > .row > .col-12 { - // overflow: auto; - - } } } From b50593a575eea04f6ac09ba3a314338e689cf12a Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Thu, 11 Jul 2024 11:33:57 -0600 Subject: [PATCH 6/7] Lint fix for multipage-nav.scss --- source/sass/components/multipage-nav.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 2c2a9564403..80857a4404e 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -10,7 +10,6 @@ } } } - #multipage-nav { &:not(.vertical-nav):not(.pni-category-nav) { display: flex; From 5708d0dfc055d183fe3be6170ec20627c705ea90 Mon Sep 17 00:00:00 2001 From: Ramon Ramos Date: Mon, 15 Jul 2024 14:22:26 -0600 Subject: [PATCH 7/7] Update secondary navigation overflow behavior to wrap --- .../templates/wagtailpages/bannered_campaign_page.html | 2 +- source/sass/components/multipage-nav.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html index fb6cbb93753..389ae8e244b 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html @@ -19,7 +19,7 @@
-
+
{% mini_site_horizontal_nav page %}
diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 80857a4404e..c63fdb4efaa 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -16,6 +16,7 @@ flex-direction: row; align-items: stretch; border-bottom: 1px $gray-20 solid; + flex-wrap: wrap; @at-root #multipage-horizontal-nav-wrapper.full-width #{&} { border: none; @@ -26,6 +27,7 @@ align-items: center; margin-right: 2rem; padding-bottom: 16px; + padding-top: 16px; } }