From 70472d86e31eae5bc408930d56d0add770ab68c6 Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 25 Jul 2023 18:13:45 +0200 Subject: [PATCH] Implement new global nav for mobile view --- static/js/src/core.js | 6 ++- static/js/src/navigation.js | 74 +++++++++++++++------------- static/sass/_pattern_navigation.scss | 51 +++++++++++++------ static/sass/styles.scss | 10 ---- 4 files changed, 81 insertions(+), 60 deletions(-) diff --git a/static/js/src/core.js b/static/js/src/core.js index eaac58094d6..1766ba5bb7b 100755 --- a/static/js/src/core.js +++ b/static/js/src/core.js @@ -4,4 +4,8 @@ import { createNav } from "@canonical/global-nav"; // Initalise the cookie policy notification. cookiePolicy(); -createNav({ breakpoint: 1150, mobileContainerSelector: ".global-nav-mobile", desktopContainerSelector: ".global-nav-desktop"}); +createNav({ + breakpoint: 1150, + mobileContainerSelector: ".global-nav-mobile", + desktopContainerSelector: ".global-nav-desktop", +}); diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js index 8f2ed2406bf..e8f224d83ee 100644 --- a/static/js/src/navigation.js +++ b/static/js/src/navigation.js @@ -12,7 +12,6 @@ const topLevelNavDropdowns = Array.from( ".p-navigation__item--dropdown-toggle:not(.global-nav__dropdown-toggle):not(.js-back)" ) ); -console.log("topLevelNaDropdowns",topLevelNavDropdowns) const nav = navigation.querySelector(".js-show-nav"); const menuButtons = document.querySelectorAll(".js-menu-button"); const skipLink = document.querySelector(".p-link--skip"); @@ -149,17 +148,14 @@ function toggleSecondaryMobileNavDropdown(event) { } function handleDropdownClick(clickedDropdown) { - console.log("handleDropdownClick, ", clickedDropdown) const isActive = clickedDropdown.classList.contains("is-active"); updateNavMenu(clickedDropdown, !isActive); setTabindex(clickedDropdown.querySelector("ul.p-navigation__dropdown")); } function goBackOneLevel(e, backButton) { - console.log("backButton", backButton) e.preventDefault(); const target = backButton.parentNode.parentNode; - console.log(target) target.setAttribute("aria-hidden", true); toggleIsActiveState(backButton.closest(".is-active"), false); toggleIsActiveState(backButton.closest(".is-active"), false); @@ -197,31 +193,24 @@ function toggleSection(e) { @param {HTMLNode} dropdown
  • */ function updateNavMenu(dropdown, show) { - console.log("in updateNavMenu", dropdown) let dropdownContent = document.getElementById(dropdown.id + "-content"); let dropdownContentMobile = document.getElementById( dropdown.id + "-content-mobile" ); let isAccountDropdown = dropdown.classList.contains("js-account"); - console.log(dropdown.id) updateAccountDropdown(dropdown, isAccountDropdown); - console.log(dropdownContentMobile, dropdownContent) if ((dropdownContent && dropdownContentMobile) || isAccountDropdown) { - console.log("updateNavMenu first if") if (!show) updateDropdownStates(dropdown, show, ANIMATION_DELAY); else updateDropdownStates(dropdown, show); if (isAccountDropdown) show = false; toggleDropdownWindowAnimation(show); } else if (dropdownContentMobile) { - console.log("updateNavMenu second if") - updateMobileDropdownState(dropdown, show); } } function updateDropdownStates(dropdown, show, delay) { - console.log("updateDropdownStates", dropdown, show) let isNested = dropdown.parentNode.classList.contains( "p-navigation__dropdown" ); @@ -238,7 +227,6 @@ function updateDropdownStates(dropdown, show, delay) { } function updateDesktopDropdownStates(dropdown, show, delay) { - console.log(dropdown.id, show) let dropdownContent = document.getElementById( dropdown.dataset.id + "-content" ); @@ -253,7 +241,7 @@ function updateDesktopDropdownStates(dropdown, show, delay) { function updateMobileDropdownState(dropdown, show, isNested) { let dropdownContentMobile = document.getElementById( - dropdown.dataset.id + "-content-mobile" + dropdown.id + "-content-mobile" ); if (dropdownContentMobile) { dropdownContentMobile.setAttribute("aria-hidden", !show); @@ -311,7 +299,9 @@ function toggleDropdownWindowAnimation(show) { function toggleGlobalNavVisibility(dropdown, show, delay) { const globalNavContent = dropdown.querySelector(".global-nav-dropdown"); - const globalNavInnerContent = dropdown.querySelector(".global-nav-dropdown__content"); + const globalNavInnerContent = dropdown.querySelector( + ".global-nav-dropdown__content" + ); if (show) { globalNavInnerContent.classList.remove("u-hide"); globalNavInnerContent.setAttribute("aria-hidden", !show); @@ -557,31 +547,47 @@ const searchButtons = document.querySelectorAll(".js-search-button"); const overlay = document.querySelector(".p-navigation__search-overlay"); initNavigationSearch(); -// Setuo global-nav +// Setup global-nav function setUpGlobalNav() { const globalNavTab = document.querySelector(".global-nav-mobile"); - const globalNavMainTabs = globalNavTab.querySelector("ul.p-navigation__items"); - globalNavMainTabs.classList.remove("p-navigation__items"); - globalNavMainTabs.classList.add("p-navigation__dropdown", "dropdown-content-mobile"); - globalNavMainTabs.setAttribute("id", "all-canonical-content-mobile"); - const globalNavMobileDropdowns = globalNavTab.querySelectorAll(".p-navigation__dropdown"); - globalNavMobileDropdowns.forEach((dropdown) => { - console.log(dropdown.id) - const tempHTMLContainer = document.createElement('div'); - tempHTMLContainer.innerHTML = `
  • + const globalNavMainTab = globalNavTab.querySelector("ul.p-navigation__items"); + globalNavMainTab.classList.replace( + "p-navigation__items", + "p-navigation__dropdown", + "dropdown-content-mobile" + ); + globalNavMainTab.setAttribute("id", "all-canonical-content-mobile"); + + globalNavTab + .querySelectorAll(".p-navigation__dropdown") + .forEach((dropdown) => { + const dropdownToggle = dropdown.closest( + ".p-navigation__item--dropdown-toggle" + ); + if (dropdownToggle.getAttribute("role") != "menuitem") { + const newDropdownId = `all-canonical-${dropdown.id}`; + dropdown.setAttribute("id", `${newDropdownId}-content-mobile`); + dropdownToggle.setAttribute("id", newDropdownId); + dropdownToggle + .querySelector("a.p-navigation__link") + .setAttribute("href", `#${newDropdownId}-content-mobile`); + dropdownToggle.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + handleDropdownClick(dropdownToggle); + }); + } + const tempHTMLContainer = document.createElement("div"); + tempHTMLContainer.innerHTML = `
    • `; - const backButton = tempHTMLContainer.firstChild.cloneNode(true); - attachBackButtonEventListener(backButton.querySelector(".js-back")); - dropdown.prepend(backButton); - dropdown.addEventListener("click", (e) => { - e.stopPropagation() - handleDropdownClick(dropdown); + const backButton = tempHTMLContainer.firstChild.cloneNode(true); + attachBackButtonEventListener(backButton.querySelector(".js-back")); + dropdown.prepend(backButton); + dropdown.setAttribute("aria-hidden", "true"); }); - dropdown.setAttribute("aria-hidden", "true"); - }) } document.addEventListener("DOMContentLoaded", () => { setUpGlobalNav(); @@ -594,7 +600,7 @@ if (accountContainer) { .then((response) => response.json()) .then((data) => { if (data.account === null) { - accountContainer.innerHTML = `Sign-in`; + accountContainer.innerHTML = `Sign-in `; } else { window.accountJSONRes = data.account; accountContainer.innerHTML = ` @@ -735,5 +741,3 @@ function addUTMToForms() { } } } - -console.log("Mega nav built") \ No newline at end of file diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss index ed274d5a587..e576a76c9f9 100644 --- a/static/sass/_pattern_navigation.scss +++ b/static/sass/_pattern_navigation.scss @@ -12,6 +12,13 @@ } } + #all-canonical-mobile .global-nav__header-link-anchor::after { + @media (max-width: $breakpoint-small) { + right: 1rem !important; + top: 1.25rem !important; + } + } + .global-nav-desktop .global-nav-dropdown { top: 0; } @@ -39,7 +46,7 @@ } } - .p-navigation__dropdown-item { + li.p-navigation__dropdown-item { line-height: 1.5rem; margin: 0; padding-bottom: 0.25rem; @@ -53,6 +60,11 @@ } } + a.p-navigation__dropdown-item { + padding-bottom: 0.75rem; + padding-top: 0.75rem; + } + .p-navigation__item--dropdown-toggle { .p-muted-heading { padding-left: 3rem; @@ -128,6 +140,7 @@ .p-navigation__nav .p-navigation__items { display: inline-flex; } + .p-navigation__search { align-items: center; background-color: #262626; @@ -147,16 +160,6 @@ } } - @media (max-width: $breakpoint-navigation-threshold) { - .p-navigation--sliding.is-reduced.has-menu-open { - .p-navigation__row { - .p-navigation__nav { - background-color: #111; - } - } - } - } - .p-navigation.is-secondary { z-index: 9; @@ -173,15 +176,29 @@ } .p-navigation__tagged-logo { - min-width: 15.7rem; + min-width: 17.4rem; } } .p-navigation--sliding.is-reduced { - @extend %small-text; - margin-bottom: 0; + .p-navigation__banner { + height: 2.5rem; + padding-left: 1.5rem; + @media (min-width: $breakpoint-navigation-threshold) { + height: 2rem; + padding-left: 3rem; + width: 24%; + } + } + + .p-navigation__tagged-logo { + .p-navigation__link { + padding-top: 0.5rem; + } + } + .p-navigation__user { .p-navigation__link span { display: none; @@ -320,5 +337,11 @@ & ~ .global-nav-dropdown { top: 2.1rem !important; } + + @media (min-width: $breakpoint-navigation-threshold - 1) { + #all-canonical-content-mobile { + display: none; + } + } } } diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 4e943fa06c3..150b7d07b74 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1331,13 +1331,3 @@ hr.p-separator.is-shallow { width: auto; } } -.is-reduced .global-nav__header-link-anchor::after { - top: 0.5rem !important; -} - -#all-canonical-mobile .global-nav__header-link-anchor::after { - @media (max-width: $breakpoint-small) { - right: 1rem !important; - top: 1.25rem !important; - } -}