diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 94200f4..2925bc6 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -78,6 +78,10 @@ .menu-level-3 { padding-left: 2rem; } + + .menu-backdrop { + display: none; + } } } @@ -88,25 +92,37 @@ } #cp_theme_d10_menu { - .top-node:hover .dropdown-menu, - .top-node:focus-within .dropdown-menu { - display: flex; - flex-wrap: none; - } - .top-node .dropdown-menu { + display: flex; + flex-wrap: nowrap; left: 0; - box-shadow: none; width: 100%; padding-left: 1rem; padding-right: 1rem; + background: none; + box-shadow: none; + border: 0; + visibility: hidden; + opacity: 0; + transform: translateY(-6px); + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; &>div { width: 19%; } } - } + .menu-backdrop { + z-index: 8; + position: absolute; + top: 38.5px; + left: 0; + width: 100vw; + background: white; + box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; + transition: height 0.2s ease-in-out; + } + } } /* Bootstrap XXL breakpoint */ @@ -118,13 +134,6 @@ } #cp_theme_d10_menu { - .top-node:hover .dropdown-menu, - .top-node:focus-within .dropdown-menu { - &>div { - width: 316px; - } - } - .top-node .dropdown-menu { padding-left: calc((100% - 1400px)/2 + 1rem); padding-right: calc((100% - 1400px)/2 + 1rem); diff --git a/themes/cp_theme_d10/css/page.css b/themes/cp_theme_d10/css/page.css index d8fe0b8..9b3ddf0 100644 --- a/themes/cp_theme_d10/css/page.css +++ b/themes/cp_theme_d10/css/page.css @@ -383,6 +383,7 @@ iframe { /* "Narrow" pages -- all content narrow (70.5rem) */ .fluxes_article .page-content, +.path-webform .page-content, .webform #page .page-content, .entity-webform-canonical #page .page-content, .entity-webform-confirmation #page .page-content, @@ -390,6 +391,8 @@ iframe { .cp_event #page .page-content, .system-404 .page-content, .system-403 .page-content, +.path-user .page-content, +.layout-builder-overrides-node-discard-changes .page-content, .cp-search-search-results-page #page .page-content { max-width: 70.5rem; margin-left: auto; @@ -415,8 +418,7 @@ iframe { .node-add-page .page-content, .view-data-products-page-1 #page .page-content, .fluxes_volume .page-content .block:not(.block-system-main-block), -.fluxes_volume .page-content .layout--normal, -.path-user #page .page-content { +.fluxes_volume .page-content .layout--normal { max-width: 1400px; margin-left: auto; margin-right: auto; diff --git a/themes/cp_theme_d10/js/global.js b/themes/cp_theme_d10/js/global.js index e9772cc..77b2eeb 100644 --- a/themes/cp_theme_d10/js/global.js +++ b/themes/cp_theme_d10/js/global.js @@ -11,17 +11,111 @@ once('cp_theme_d10', '#cp_theme_d10_menu .top-node .drop-down-toggle').forEach(function (el) { el.addEventListener('click', function (event) { let target = el.closest(".top-node"); - target.classList.toggle("open"); + if (window.innerWidth < 992) { + target.classList.toggle("open"); + } event.preventDefault(); }); el.addEventListener('keyup', function (event) { if(event.key === "Enter") { let target = el.closest(".top-node"); - target.classList.toggle("open"); + if (window.innerWidth < 992) { + target.classList.toggle("open"); + } event.preventDefault(); } }); }); + const menuBackdrop = document.querySelector(".menu-backdrop"); + if (!menuBackdrop) { + return; + } + + let committedTopNode = null; + let dwellTimer = null; + let closeTimer = null; + let switchTimer = null; + const DWELL_TIME = 200; + const CLOSE_GRACE = 100; + const SWITCH_DELAY = 160; + + function revealDropdown(topNode) { + if (committedTopNode !== topNode) { return; } + const dropdown = topNode.querySelector(':scope > .dropdown-menu'); + if (dropdown) { + dropdown.style.visibility = 'visible'; + dropdown.style.opacity = '1'; + dropdown.style.transform = 'translateY(0)'; + } + const height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px'; + menuBackdrop.style.height = height; + } + + function showDropdown(topNode) { + clearTimeout(closeTimer); + clearTimeout(switchTimer); + const prev = committedTopNode; + committedTopNode = topNode; + if (prev && prev !== topNode) { + hideDropdown(prev); + switchTimer = setTimeout(function () { revealDropdown(topNode); }, SWITCH_DELAY); + } else { + revealDropdown(topNode); + } + } + + function hideDropdown(topNode) { + const dropdown = topNode.querySelector(':scope > .dropdown-menu'); + if (!dropdown) { return; } + dropdown.style.opacity = ''; + dropdown.style.transform = ''; + setTimeout(function () { dropdown.style.visibility = ''; }, 200); + } + + function closeMenu() { + if (committedTopNode) { + hideDropdown(committedTopNode); + committedTopNode = null; + } + menuBackdrop.style.height = '0px'; + } + + once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) { + el.addEventListener('mouseenter', function () { + if (window.innerWidth < 992) { + return; + } + clearTimeout(closeTimer); + dwellTimer = setTimeout(function () { showDropdown(el); }, DWELL_TIME); + }); + + el.addEventListener('mouseleave', function () { + if (window.innerWidth < 992) { + return; + } + clearTimeout(dwellTimer); + closeTimer = setTimeout(closeMenu, CLOSE_GRACE); + }); + + el.addEventListener('focusin', function () { + if (window.innerWidth < 992) { + return; + } + clearTimeout(dwellTimer); + clearTimeout(closeTimer); + showDropdown(el); + }); + + el.addEventListener('focusout', function (event) { + if (window.innerWidth < 992) { + return; + } + const nextTopNode = event.relatedTarget && event.relatedTarget.closest('#cp_theme_d10_menu .top-node'); + if (!el.contains(event.relatedTarget) && committedTopNode === el && !nextTopNode) { + closeMenu(); + } + }); + }); once('cp_theme_d10', '#cp_theme_d10_menu').forEach(function (el) { el.addEventListener('mouseout', function (event) { if (event.target === document.activeElement) { diff --git a/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig b/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig new file mode 100644 index 0000000..b30a685 --- /dev/null +++ b/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig @@ -0,0 +1,13 @@ +{# extends @bootstrap/layout/block.html.twig +/** + * @file + * Theme override for tabs. + */ +#} +{% block content %} + {% if content %} + + {% endif %} +{% endblock %} diff --git a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig index 548b37b..2bc0626 100644 --- a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig +++ b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig @@ -56,7 +56,7 @@