From c9adf4e4f27f872c5c7d41f1ec52db30ac82399a Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 12:14:59 -0800 Subject: [PATCH 1/6] Setting the rule about what to show where to only happen with expanded items. --- .../custom/ts_wrin/sass/global/_header.scss | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/themes/custom/ts_wrin/sass/global/_header.scss b/themes/custom/ts_wrin/sass/global/_header.scss index 2a7445b6b..fc337ca6b 100644 --- a/themes/custom/ts_wrin/sass/global/_header.scss +++ b/themes/custom/ts_wrin/sass/global/_header.scss @@ -145,7 +145,7 @@ header { } .tray-toggle.language-toggle svg { width: 28px; - } + } .tray-toggle.filter-toggle { position: relative; border-radius: 5px; @@ -280,7 +280,7 @@ header nav.menu--main { display: none; } -header nav.menu--main.has-active-trail { +header nav.menu--main.menu-item--expanded { bottom: 0; display: block; margin-left: 0; @@ -362,7 +362,7 @@ header nav.menu--main .menu-wrapper > ul.menu { } } -header nav.menu--main.has-active-trail .menu-wrapper { +header nav.menu--main.menu-item--expanded .menu-wrapper { height: 37px; overflow: hidden; width: calc(100% - #{$grid-gutter-mobile}); @@ -372,7 +372,7 @@ header nav.menu--main.has-active-trail .menu-wrapper { width: calc(100% - #{$grid-gutter-mobile} * 3); } } -header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { +header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { box-sizing: border-box; margin-bottom: -10px; margin-top: 10px; @@ -437,7 +437,7 @@ header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { outline: none; } } - & > li > .menu-item-title a { + & > li > a { @include font($caslon, "normal", "italic"); @include font-line-height(15, 15); margin-right: $space-xs; @@ -453,7 +453,7 @@ header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { display: none; } } -.white nav.menu--main.has-active-trail .menu-wrapper > ul.menu { +.white nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { &:after, li a { color: $white; @@ -471,17 +471,17 @@ header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { } } -.white nav.menu--main.has-active-trail .back-arrow svg, -.white nav.menu--main.has-active-trail .nav-arrow svg, -.white nav.menu--main.has-active-trail .back-arrow svg path, -.white nav.menu--main.has-active-trail .nav-arrow svg path { +.white nav.menu--main.menu-item--expanded .back-arrow svg, +.white nav.menu--main.menu-item--expanded .nav-arrow svg, +.white nav.menu--main.menu-item--expanded .back-arrow svg path, +.white nav.menu--main.menu-item--expanded .nav-arrow svg path { fill: $white; stroke: $white; outline: none; transition: all 0.2s linear; } -.white nav.menu--main.has-active-trail .back-arrow, -.white nav.menu--main.has-active-trail .nav-arrow { +.white nav.menu--main.menu-item--expanded .back-arrow, +.white nav.menu--main.menu-item--expanded .nav-arrow { @include hocus { outline: none; svg, @@ -493,7 +493,7 @@ header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { } } -header nav.menu--main.has-active-trail.no-scroll { +header nav.menu--main.menu-item--expanded.no-scroll { .menu-wrapper > ul.menu:after { content: none; } @@ -667,11 +667,11 @@ header nav.menu--donate > ul.menu { nav.menu--main .menu-wrapper > ul.menu li.menu-item { align-items: flex-start; } - nav.menu--main.has-active-trail .menu-wrapper > ul:before, + nav.menu--main.menu-item--expanded .menu-wrapper > ul:before, nav.menu--main .menu-wrapper > ul:before { border-color: $black; } - nav.menu--main.has-active-trail + nav.menu--main.menu-item--expanded .menu-wrapper > ul:after nav.menu--main @@ -706,11 +706,11 @@ header nav.menu--donate > ul.menu { .header-right .menu-toggle div span:after { background-color: $black; } - nav.menu--main.has-active-trail .menu-wrapper > ul.menu:after { + nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu:after { color: $black; } - nav.menu--main.has-active-trail .menu-wrapper > ul.menu li a, - nav.menu--main.has-active-trail .menu-wrapper > ul li a, + nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu li a, + nav.menu--main.menu-item--expanded .menu-wrapper > ul li a, nav.menu--main .menu-wrapper > ul li a, nav.menu--secondary > ul.menu li a { color: $black; @@ -720,15 +720,15 @@ header nav.menu--donate > ul.menu { outline: none; } } - nav.menu--main.has-active-trail .back-arrow svg, - nav.menu--main.has-active-trail .nav-arrow svg, - nav.menu--main.has-active-trail .back-arrow svg path, - nav.menu--main.has-active-trail .nav-arrow svg path { + nav.menu--main.menu-item--expanded .back-arrow svg, + nav.menu--main.menu-item--expanded .nav-arrow svg, + nav.menu--main.menu-item--expanded .back-arrow svg path, + nav.menu--main.menu-item--expanded .nav-arrow svg path { fill: $black; stroke: $black; } - nav.menu--main.has-active-trail .back-arrow, - nav.menu--main.has-active-trail .nav-arrow { + nav.menu--main.menu-item--expanded .back-arrow, + nav.menu--main.menu-item--expanded .nav-arrow { @include hocus { outline: none; svg, From 84cbc528d81c060384b9cfda5f63d64d75d84e68 Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 12:41:37 -0800 Subject: [PATCH 2/6] Fixing menu styles on mobile, where the links need to be block-level and the after element needs a hover cursor. --- themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss b/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss index 3505cf7ae..92d68c0e6 100644 --- a/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss +++ b/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss @@ -316,7 +316,7 @@ body.fixed { margin-top: 24px; } } - & > ul.menu > li > .menu-item-title { + & > ul.menu > li > .menu-item-title a { display: block; margin-bottom: 22px; position: relative; @@ -326,6 +326,7 @@ body.fixed { center / cover; color: $brand-gold; content: ""; + cursor: pointer; display: block; height: 14px; position: absolute; @@ -404,12 +405,17 @@ body.fixed { display: block; margin-bottom: 22px; } + + a { + display: block; + } } & > li > .menu-item-title:after { background: transparent url("../img/svgs/arrow-gold.svg") no-repeat center center / cover; color: $brand-gold; content: ""; + cursor: pointer; display: block; height: 14px; position: absolute; From 4e9dfa9e7299ebe9a3c14769593fc1f03520beeb Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 14:37:35 -0800 Subject: [PATCH 3/6] Undoing class change and applying class less freely. --- themes/custom/ts_wrin/sass/global/_header.scss | 2 +- themes/custom/ts_wrin/ts_wrin.theme | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/custom/ts_wrin/sass/global/_header.scss b/themes/custom/ts_wrin/sass/global/_header.scss index fc337ca6b..095d1e38c 100644 --- a/themes/custom/ts_wrin/sass/global/_header.scss +++ b/themes/custom/ts_wrin/sass/global/_header.scss @@ -437,7 +437,7 @@ header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { outline: none; } } - & > li > a { + & > li > .menu-item-title a { @include font($caslon, "normal", "italic"); @include font-line-height(15, 15); margin-right: $space-xs; diff --git a/themes/custom/ts_wrin/ts_wrin.theme b/themes/custom/ts_wrin/ts_wrin.theme index 58ffe8d8e..bae73b2ea 100644 --- a/themes/custom/ts_wrin/ts_wrin.theme +++ b/themes/custom/ts_wrin/ts_wrin.theme @@ -151,7 +151,7 @@ function ts_wrin_preprocess_block(array &$variables) { ]; if ($variables['plugin_id'] == 'menu_block:main' && isset($variables["content"]["#items"])) { foreach ($variables["content"]["#items"] as $item) { - if ($item['in_active_trail']) { + if ($item['in_active_trail'] && $item['is_expanded']) { $variables['attributes']['class'][] = 'has-active-trail'; break; } From 22c0d4af06d2d75a597ac39754750fb609db1215 Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 14:42:17 -0800 Subject: [PATCH 4/6] Revert "Undoing class change and applying class less freely." This reverts commit 4e9dfa9e7299ebe9a3c14769593fc1f03520beeb. --- themes/custom/ts_wrin/sass/global/_header.scss | 2 +- themes/custom/ts_wrin/ts_wrin.theme | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/custom/ts_wrin/sass/global/_header.scss b/themes/custom/ts_wrin/sass/global/_header.scss index 095d1e38c..fc337ca6b 100644 --- a/themes/custom/ts_wrin/sass/global/_header.scss +++ b/themes/custom/ts_wrin/sass/global/_header.scss @@ -437,7 +437,7 @@ header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { outline: none; } } - & > li > .menu-item-title a { + & > li > a { @include font($caslon, "normal", "italic"); @include font-line-height(15, 15); margin-right: $space-xs; diff --git a/themes/custom/ts_wrin/ts_wrin.theme b/themes/custom/ts_wrin/ts_wrin.theme index bae73b2ea..58ffe8d8e 100644 --- a/themes/custom/ts_wrin/ts_wrin.theme +++ b/themes/custom/ts_wrin/ts_wrin.theme @@ -151,7 +151,7 @@ function ts_wrin_preprocess_block(array &$variables) { ]; if ($variables['plugin_id'] == 'menu_block:main' && isset($variables["content"]["#items"])) { foreach ($variables["content"]["#items"] as $item) { - if ($item['in_active_trail'] && $item['is_expanded']) { + if ($item['in_active_trail']) { $variables['attributes']['class'][] = 'has-active-trail'; break; } From 5809845c5a87d2f7d1f96b7a09462cd55500a67e Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 14:45:10 -0800 Subject: [PATCH 5/6] Undoing the undo and redoing what I do want. --- .../custom/ts_wrin/sass/global/_header.scss | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/themes/custom/ts_wrin/sass/global/_header.scss b/themes/custom/ts_wrin/sass/global/_header.scss index fc337ca6b..05bf292c4 100644 --- a/themes/custom/ts_wrin/sass/global/_header.scss +++ b/themes/custom/ts_wrin/sass/global/_header.scss @@ -280,7 +280,7 @@ header nav.menu--main { display: none; } -header nav.menu--main.menu-item--expanded { +header nav.menu--main.has-active-trail { bottom: 0; display: block; margin-left: 0; @@ -362,7 +362,7 @@ header nav.menu--main .menu-wrapper > ul.menu { } } -header nav.menu--main.menu-item--expanded .menu-wrapper { +header nav.menu--main.has-active-trail .menu-wrapper { height: 37px; overflow: hidden; width: calc(100% - #{$grid-gutter-mobile}); @@ -372,7 +372,7 @@ header nav.menu--main.menu-item--expanded .menu-wrapper { width: calc(100% - #{$grid-gutter-mobile} * 3); } } -header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { +header nav.menu--main.has-active-trail .menu-wrapper > ul.menu { box-sizing: border-box; margin-bottom: -10px; margin-top: 10px; @@ -453,7 +453,7 @@ header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { display: none; } } -.white nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { +.white nav.menu--main.has-active-trail .menu-wrapper > ul.menu { &:after, li a { color: $white; @@ -471,17 +471,17 @@ header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { } } -.white nav.menu--main.menu-item--expanded .back-arrow svg, -.white nav.menu--main.menu-item--expanded .nav-arrow svg, -.white nav.menu--main.menu-item--expanded .back-arrow svg path, -.white nav.menu--main.menu-item--expanded .nav-arrow svg path { +.white nav.menu--main.has-active-trail .back-arrow svg, +.white nav.menu--main.has-active-trail .nav-arrow svg, +.white nav.menu--main.has-active-trail .back-arrow svg path, +.white nav.menu--main.has-active-trail .nav-arrow svg path { fill: $white; stroke: $white; outline: none; transition: all 0.2s linear; } -.white nav.menu--main.menu-item--expanded .back-arrow, -.white nav.menu--main.menu-item--expanded .nav-arrow { +.white nav.menu--main.has-active-trail .back-arrow, +.white nav.menu--main.has-active-trail .nav-arrow { @include hocus { outline: none; svg, @@ -493,7 +493,7 @@ header nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu { } } -header nav.menu--main.menu-item--expanded.no-scroll { +header nav.menu--main.has-active-trail.no-scroll { .menu-wrapper > ul.menu:after { content: none; } @@ -667,11 +667,11 @@ header nav.menu--donate > ul.menu { nav.menu--main .menu-wrapper > ul.menu li.menu-item { align-items: flex-start; } - nav.menu--main.menu-item--expanded .menu-wrapper > ul:before, + nav.menu--main.has-active-trail .menu-wrapper > ul:before, nav.menu--main .menu-wrapper > ul:before { border-color: $black; } - nav.menu--main.menu-item--expanded + nav.menu--main.has-active-trail .menu-wrapper > ul:after nav.menu--main @@ -706,11 +706,11 @@ header nav.menu--donate > ul.menu { .header-right .menu-toggle div span:after { background-color: $black; } - nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu:after { + nav.menu--main.has-active-trail .menu-wrapper > ul.menu:after { color: $black; } - nav.menu--main.menu-item--expanded .menu-wrapper > ul.menu li a, - nav.menu--main.menu-item--expanded .menu-wrapper > ul li a, + nav.menu--main.has-active-trail .menu-wrapper > ul.menu li a, + nav.menu--main.has-active-trail .menu-wrapper > ul li a, nav.menu--main .menu-wrapper > ul li a, nav.menu--secondary > ul.menu li a { color: $black; @@ -720,15 +720,15 @@ header nav.menu--donate > ul.menu { outline: none; } } - nav.menu--main.menu-item--expanded .back-arrow svg, - nav.menu--main.menu-item--expanded .nav-arrow svg, - nav.menu--main.menu-item--expanded .back-arrow svg path, - nav.menu--main.menu-item--expanded .nav-arrow svg path { + nav.menu--main.has-active-trail .back-arrow svg, + nav.menu--main.has-active-trail .nav-arrow svg, + nav.menu--main.has-active-trail .back-arrow svg path, + nav.menu--main.has-active-trail .nav-arrow svg path { fill: $black; stroke: $black; } - nav.menu--main.menu-item--expanded .back-arrow, - nav.menu--main.menu-item--expanded .nav-arrow { + nav.menu--main.has-active-trail .back-arrow, + nav.menu--main.has-active-trail .nav-arrow { @include hocus { outline: none; svg, From 38712fd201b137864ca72cd88a62a9863fd947b8 Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Fri, 10 Dec 2021 14:49:39 -0800 Subject: [PATCH 6/6] Setting the expanded menu to show only if there are children under it. --- themes/custom/ts_wrin/ts_wrin.theme | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/custom/ts_wrin/ts_wrin.theme b/themes/custom/ts_wrin/ts_wrin.theme index 58ffe8d8e..bae73b2ea 100644 --- a/themes/custom/ts_wrin/ts_wrin.theme +++ b/themes/custom/ts_wrin/ts_wrin.theme @@ -151,7 +151,7 @@ function ts_wrin_preprocess_block(array &$variables) { ]; if ($variables['plugin_id'] == 'menu_block:main' && isset($variables["content"]["#items"])) { foreach ($variables["content"]["#items"] as $item) { - if ($item['in_active_trail']) { + if ($item['in_active_trail'] && $item['is_expanded']) { $variables['attributes']['class'][] = 'has-active-trail'; break; }