From a9854438f4aae3f72748d0fefaaabadc2319871f Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Mon, 13 Nov 2023 14:46:49 -0700 Subject: [PATCH 1/4] CuBoulder/tiamat-theme#267 adds base styles for content area menu blocks; adds minor cleanup --- boulder_base.libraries.yml | 2 +- css/ucb-menu.css | 36 ++++++++++++++++++- .../block/block--system-menu-block.html.twig | 13 ++++--- templates/layout/page.html.twig | 2 +- 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml index e575c797..1f188f8e 100644 --- a/boulder_base.libraries.yml +++ b/boulder_base.libraries.yml @@ -99,7 +99,7 @@ ucb-site-contact-info-footer: css: theme: css/ucb-site-contact-info-footer.css: {} - + ucb-hero-unit: version: 1.x js: diff --git a/css/ucb-menu.css b/css/ucb-menu.css index 063a4944..af2ac940 100644 --- a/css/ucb-menu.css +++ b/css/ucb-menu.css @@ -26,7 +26,7 @@ line-height: 2rem; margin-left: 2px; } - .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region ≈, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu { + .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu { gap: 0; } .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region { @@ -92,3 +92,37 @@ line-height: 2rem; } } + +.ucb-page-content .ucb-menu { + flex-direction: column; +} + +.ucb-page-content .ucb-menu li.menu-item .nav-link { + color: #202020; + background-color: #FFFFFF; + font-size: 1em; + line-height: 1.2em; + border-bottom: 1px solid #e7e7e7; + border-radius: 0; + margin: 0; + padding: 10px; +} + +.ucb-page-content .ucb-menu li.menu-item:last-child .nav-link { + border-bottom: none; +} + +.ucb-page-content .ucb-menu li.menu-item .nav-link::after { + display: none; +} + +.ucb-page-content .ucb-menu li.menu-item .nav-link:hover { + color: #000; + background-color: #e7e7e7; +} + +.ucb-page-content .ucb-menu li.menu-item.active .nav-link, +.ucb-page-content .ucb-menu li.menu-item .nav-link.is-active { + color: #000; + background-color: var(--ucb-gold); +} diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig index 812e4603..595b2386 100755 --- a/templates/block/block--system-menu-block.html.twig +++ b/templates/block/block--system-menu-block.html.twig @@ -6,13 +6,12 @@ #} {% set classes = [ - 'container', - 'block', - 'block-' ~ configuration.provider|clean_class, - 'block-' ~ plugin_id|clean_class, - bundle ? 'block--type-' ~ bundle|clean_class, - view_mode ? 'block--view-mode-' ~ view_mode|clean_class, - 'ucb-system-menu-block' + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + bundle ? 'block--type-' ~ bundle|clean_class, + view_mode ? 'block--view-mode-' ~ view_mode|clean_class, + 'ucb-system-menu-block' ] %} {% block content %} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 636a85cd..9dcd6b11 100644 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -50,7 +50,7 @@ {# HEADER CONTENT #} {% block page_header %} {{ attach_library('boulder_base/ucb-social-media') }} - + {{ attach_library('boulder_base/ucb-menu') }} {% set menu_style = drupal_config('boulder_base.settings', 'ucb_menu_style') %} {% if menu_style == 'highlight' %} {{ attach_library('boulder_base/ucb-menu-style-highlight') }} From a3809e6bf0044f2f0a0cfda9e56dd3aa83231d33 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Tue, 14 Nov 2023 12:11:27 -0700 Subject: [PATCH 2/4] CuBoulder/tiamat-theme#267 refines content area menu blocks --- css/ucb-menu.css | 87 ++++++++++++++++++++++++----- templates/navigation/menu.html.twig | 13 ++--- 2 files changed, 77 insertions(+), 23 deletions(-) diff --git a/css/ucb-menu.css b/css/ucb-menu.css index af2ac940..8d8c2e73 100644 --- a/css/ucb-menu.css +++ b/css/ucb-menu.css @@ -6,6 +6,10 @@ display: none; } +.ucb-menu .ucb-menu { + display: none; +} + @media only screen and (max-width: 600px) { .ucb-mobile-menu-button-div { line-height: 2em; @@ -95,34 +99,87 @@ .ucb-page-content .ucb-menu { flex-direction: column; + margin-bottom: 20px; + --ucb-menu-indent-start: 10px; + --ucb-menu-indent-inc: 5px; + --ucb-menu-indent-border-width: 2px; } -.ucb-page-content .ucb-menu li.menu-item .nav-link { - color: #202020; - background-color: #FFFFFF; - font-size: 1em; - line-height: 1.2em; - border-bottom: 1px solid #e7e7e7; - border-radius: 0; +.ucb-page-content .ucb-menu .ucb-menu { margin: 0; - padding: 10px; } -.ucb-page-content .ucb-menu li.menu-item:last-child .nav-link { - border-bottom: none; +.ucb-page-content .ucb-menu .expanded>.ucb-menu { + display: block; } -.ucb-page-content .ucb-menu li.menu-item .nav-link::after { +.ucb-page-content .ucb-menu .collapsed>.ucb-menu { display: none; } -.ucb-page-content .ucb-menu li.menu-item .nav-link:hover { +.ucb-page-content .ucb-menu li.menu-item { + border-bottom: 1px solid rgba(0, 0, 0, 9%); +} + +.ucb-page-content .ucb-menu li.menu-item.active { + background-color: inherit; +} + +.ucb-page-content .ucb-menu .ucb-menu li.menu-item { + border-bottom: none; +} + +.ucb-page-content .ucb-menu li.menu-item:last-child { + border-bottom: none; +} + +.ucb-page-content .ucb-menu li.menu-item a.nav-link { + color: inherit; + font-size: 1em; + line-height: 1.2em; + border-radius: 0; + margin: 0; + padding: 10px 10px 10px var(--ucb-menu-indent-start); +} + +.ucb-page-content .ucb-menu li.menu-item a.nav-link:hover { color: #000; - background-color: #e7e7e7; + background-color: rgba(0, 0, 0, 9%); } -.ucb-page-content .ucb-menu li.menu-item.active .nav-link, -.ucb-page-content .ucb-menu li.menu-item .nav-link.is-active { +.ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active { color: #000; background-color: var(--ucb-gold); } + +.ucb-page-content .ucb-menu .ucb-menu li.menu-item a.nav-link { + font-weight: 400; + font-size: .9em; + padding: 7px 10px 7px calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) - var(--ucb-menu-indent-border-width)); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 2); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 3); +} + +.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 4); +} + +.ucb-page-content .ucb-menu .expanded.active>a.nav-link, +.ucb-page-content .ucb-menu .expanded.active>.ucb-menu { + border-left: var(--ucb-menu-indent-border-width) solid var(--ucb-gold); +} + +.ucb-page-content .ucb-menu .ucb-menu .expanded.active>a.nav-link, +.ucb-page-content .ucb-menu .ucb-menu .expanded.active>.ucb-menu { + border-left: none; +} + +.ucb-page-content .ucb-menu .expanded.active>a.nav-link { + padding-left: calc(var(--ucb-menu-indent-start) - var(--ucb-menu-indent-border-width)); +} diff --git a/templates/navigation/menu.html.twig b/templates/navigation/menu.html.twig index bc453785..f6f2effd 100755 --- a/templates/navigation/menu.html.twig +++ b/templates/navigation/menu.html.twig @@ -36,14 +36,13 @@ {% macro menu_links(items, attributes, menu_level) %} {% import _self as menus %} {% if items %} - {{ attach_library('boulder_base/ucb-menu') }} {% for item in items %} {% set classes = [ 'menu-item', - item.is_expanded ? 'dropdown hovernav menu-dropdown', - item.is_collapsed ? 'dropdown hovernav menu-dropdown', - item.in_active_trail ? 'active', + item.is_expanded ? 'expanded', + item.is_collapsed ? 'collapsed', + item.in_active_trail ? 'active' ] %} {% if item.title|upper == "HOME" %} @@ -52,10 +51,8 @@ {% elseif item.below %} - {{ link(item.title, item.url, { 'class':['nav-link', 'dropdown-toggle']}) }} -
    - {{ menus.menu_links(item.below, attributes, menu_level + 1) }} -
+ {{ link(item.title, item.url, { 'class': ['nav-link']}) }} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} {% else %} {{ link(item.title, item.url, { 'class': ['nav-link']}) }} {% endif %} From b685c11282529a05c942f8aa3285ba48631a904f Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Tue, 14 Nov 2023 14:00:28 -0700 Subject: [PATCH 3/4] Adds minor cleanup --- css/ucb-menu.css | 4 ++-- templates/layout/page.html.twig | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/ucb-menu.css b/css/ucb-menu.css index 8d8c2e73..eb97e73e 100644 --- a/css/ucb-menu.css +++ b/css/ucb-menu.css @@ -118,7 +118,7 @@ } .ucb-page-content .ucb-menu li.menu-item { - border-bottom: 1px solid rgba(0, 0, 0, 9%); + border-bottom: 1px solid rgba(0, 0, 0, .09); } .ucb-page-content .ucb-menu li.menu-item.active { @@ -144,7 +144,7 @@ .ucb-page-content .ucb-menu li.menu-item a.nav-link:hover { color: #000; - background-color: rgba(0, 0, 0, 9%); + background-color: rgb(0, 0, 0, .09); } .ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active { diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 9dcd6b11..db6c3ed6 100644 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -191,7 +191,7 @@ {% elseif page.left_sidebar|render %} -
+
{{ page.left_sidebar }} @@ -202,7 +202,7 @@
{% elseif page.right_sidebar|render %} -
+
{{ page.content }} From ca25960efbb24188b5d8eb237b3225b8709e6ea4 Mon Sep 17 00:00:00 2001 From: Timur Tripp Date: Tue, 14 Nov 2023 14:02:07 -0700 Subject: [PATCH 4/4] Adds minor cleanup (2) --- css/ucb-menu.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/ucb-menu.css b/css/ucb-menu.css index eb97e73e..6c81271c 100644 --- a/css/ucb-menu.css +++ b/css/ucb-menu.css @@ -144,7 +144,7 @@ .ucb-page-content .ucb-menu li.menu-item a.nav-link:hover { color: #000; - background-color: rgb(0, 0, 0, .09); + background-color: rgba(0, 0, 0, .09); } .ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active {