From 98537fd79772116074cd4663b1a54a01d6984855 Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 4 Jun 2024 10:29:26 +0200 Subject: [PATCH 01/19] Move reduced navigation from u.com to vanilla --- scss/_patterns_navigation-reduced.scss | 120 +++++++++ scss/_vanilla.scss | 5 +- scss/standalone/patterns_navigation.scss | 3 +- .../examples/patterns/navigation/reduced.html | 241 ++++++++++++++++++ 4 files changed, 366 insertions(+), 3 deletions(-) create mode 100644 scss/_patterns_navigation-reduced.scss create mode 100644 templates/docs/examples/patterns/navigation/reduced.html diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss new file mode 100644 index 000000000..476fa623a --- /dev/null +++ b/scss/_patterns_navigation-reduced.scss @@ -0,0 +1,120 @@ +@mixin vf-p-navigation-reduced { + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation--sliding.is-reduced.has-search-open { + .p-navigation__nav .p-navigation__items { + display: inline-flex; + } + + .p-navigation__search { + align-items: center; + background-color: #262626; + display: flex; + justify-content: center; + left: 0; + padding: 0.625rem 1rem; + position: absolute; + top: 2rem; + width: 100%; + + .p-search-box { + margin: 0; + max-width: 50rem; + } + } + + .p-navigation.is-secondary { + display: none; + } + } + } + + .p-navigation--sliding.is-reduced { + position: relative; + + .p-navigation__items:first-child { + margin-left: -1rem; + } + + .p-navigation__logo-tag { + display: none; + } + + .p-navigation__tagged-logo { + .p-navigation__link { + padding-left: 0; + } + } + + .p-navigation__link, + .p-navigation__logo-title { + font-size: 0.875rem; + color: $color-mid-light; + font-weight: 300; + transition: none; + line-height: 1rem; + } + + @media (max-width: $breakpoint-navigation-threshold - 1) { + + .p-navigation__logo-title, + .p-navigation__link { + color: $color-x-light; + font-size: 1rem; + line-height: 1.5rem; + } + } + + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__link::after { + top: 0.5rem; + } + } + + .p-navigation__link--search-toggle::after { + right: 1rem; + top: 0.75rem; + } + + @media (min-width: $breakpoint-navigation-threshold) { + background-color: $color-dark; + + .p-navigation__link { + padding: 0.5rem 2rem 0.5rem 1rem; + } + + .p-navigation__link--search-toggle { + padding-left: 0.5rem; + + &::after { + top: 0.5rem; + } + } + + .p-navigation__item--dropdown-toggle.is-active { + background-color: rgba(255, 255, 255, 0.1); + } + } + + &~.global-nav-dropdown { + top: 2.1rem !important; + } + } + + .p-navigation.is-secondary { + position: sticky; + top: 0; + z-index: 9; + + .p-navigation__nav.is-open { + display: flex; + + .p-navigation__items { + display: block; + } + } + + .p-navigation__toggle--open.is-open { + transform: rotate(-180deg); + } + } +} \ No newline at end of file diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss index 90ef9438a..c78c18d28 100644 --- a/scss/_vanilla.scss +++ b/scss/_vanilla.scss @@ -33,6 +33,7 @@ @import 'patterns_modal'; @import 'patterns_muted-heading'; @import 'patterns_navigation'; +@import 'patterns_navigation-reduced'; @import 'patterns_notifications'; @import 'patterns_pagination'; @import 'patterns_pull-quotes'; @@ -113,7 +114,6 @@ @include vf-p-heading-icon; @include vf-p-headings; @include vf-p-section; - @include vf-p-form-password-toggle; @include vf-p-icons; @include vf-p-image; @@ -127,6 +127,7 @@ @include vf-p-modal; @include vf-p-muted-heading; @include vf-p-navigation; + @include vf-p-navigation-reduced; @include vf-p-notification; @include vf-p-pagination; @include vf-p-pull-quotes; @@ -182,4 +183,4 @@ @include vf-u-no-print; @include vf-u-text-max-width; @include vf-u-text-figures; -} +} \ No newline at end of file diff --git a/scss/standalone/patterns_navigation.scss b/scss/standalone/patterns_navigation.scss index 51e11fb5f..dcf05f7cc 100644 --- a/scss/standalone/patterns_navigation.scss +++ b/scss/standalone/patterns_navigation.scss @@ -2,6 +2,7 @@ @include vf-base; @include vf-p-navigation; +@include vf-p-navigation-reduced; @include vf-p-search-box; @@ -14,4 +15,4 @@ @include vf-u-off-screen; // needed in example that aligns navigation with the grid -@include vf-p-grid; +@include vf-p-grid; \ No newline at end of file diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html new file mode 100644 index 000000000..e69e6463c --- /dev/null +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -0,0 +1,241 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Navigation / Reduced{% endblock %} + +{% block standalone_css %}patterns_navigation{% endblock %} + +{% block content %} +
+
+
+ +
    +
  • + +
    • +
  • + Menu +
    • +
+
+ +
+ +
+
+ +
+
+
+ + +
+ +
+
+ +
+
+
+
+

Ubuntu for desktops

+

The number 1 open + source operating system powers millions of PCs and laptops around the world.

+

+ Download Ubuntu Desktop +

+
+
+
+ +
+
+
+
+ +
+
+
+

The secure, modern operating system used by millions

+
+
+
+
+
+
+

The preferred choice for professional developers

+
+
+

+ Each release of Ubuntu delivers the latest applications, libraries and toolchains. Ubuntu is a primary + platform for all major IDEs, game development tools and AI/ML software. +

+
+
+
+
+
+

Everything you need to daily drive

+
+
+

+ Ubuntu offers essential applications for web browsing, messaging, gaming, and content creation, including + Firefox, Chrome, Discord, Steam, and OBS Studio, supporting all your daily computing needs. +

+
+
+
+
+
+

Private and secure by design

+
+
+

+ With regular updates and built-in security features, Ubuntu prioritises user privacy and system integrity, + making it the secure choice for those who value data protection. +

+
+
+
+
+
+

Deep integration with enterprise tools

+
+
+

+ Ubuntu seamlessly integrates with enterprise environments, Ubuntu Pro provides extended + security patching and compliance tooling alongside support for third party identity management tools. +

+
+
+
+
+
+

Fully open source

+
+
+

+ Ubuntu has always been free to download, use and share. We believe in the power of open source software; + Ubuntu could not exist without its worldwide community of voluntary developers. +

+
+
+
+
+
+
+ + +{% endblock %} \ No newline at end of file From c7d17b3fd88a5b3d3d2000274cff726d604c09c2 Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 4 Jun 2024 18:33:47 +0200 Subject: [PATCH 02/19] Small refactor based on review --- scss/_patterns_navigation-reduced.scss | 116 +++++++++--------- .../examples/patterns/navigation/reduced.html | 6 +- 2 files changed, 60 insertions(+), 62 deletions(-) diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss index 476fa623a..e4da39e94 100644 --- a/scss/_patterns_navigation-reduced.scss +++ b/scss/_patterns_navigation-reduced.scss @@ -1,40 +1,7 @@ @mixin vf-p-navigation-reduced { - @media (min-width: $breakpoint-navigation-threshold - 1) { - .p-navigation--sliding.is-reduced.has-search-open { - .p-navigation__nav .p-navigation__items { - display: inline-flex; - } - - .p-navigation__search { - align-items: center; - background-color: #262626; - display: flex; - justify-content: center; - left: 0; - padding: 0.625rem 1rem; - position: absolute; - top: 2rem; - width: 100%; - - .p-search-box { - margin: 0; - max-width: 50rem; - } - } - - .p-navigation.is-secondary { - display: none; - } - } - } - - .p-navigation--sliding.is-reduced { + .p-navigation--reduced { position: relative; - .p-navigation__items:first-child { - margin-left: -1rem; - } - .p-navigation__logo-tag { display: none; } @@ -47,43 +14,78 @@ .p-navigation__link, .p-navigation__logo-title { - font-size: 0.875rem; - color: $color-mid-light; - font-weight: 300; - transition: none; - line-height: 1rem; + color: $color-x-light; + line-height: map-get($line-heights, small); + font-size: 1rem; } - @media (max-width: $breakpoint-navigation-threshold - 1) { + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__items:first-child { + margin-left: -1rem; + } - .p-navigation__logo-title, - .p-navigation__link { - color: $color-x-light; - font-size: 1rem; - line-height: 1.5rem; + .p-navigation__link, + .p-navigation__logo-title { + color: $color-mid-light; + font-size: #{map-get($font-sizes, small)}rem; + line-height: map-get($line-heights, x-small); + margin: 0; } - } - @media (min-width: $breakpoint-navigation-threshold - 1) { .p-navigation__link::after { - top: 0.5rem; + top: 0.75rem; } } - .p-navigation__link--search-toggle::after { - right: 1rem; - top: 0.75rem; + .p-navigation__link--search-toggle { + @media (min-width: $breakpoint-navigation-threshold - 1) { + &::after { + top: 0.5rem; + right: 1.5rem; + } + } + + .p-navigation__search-label { + display: none; + } + } + + @media (min-width: $breakpoint-navigation-threshold - 1) { + &.has-search-open { + .p-navigation__nav .p-navigation__items { + display: inline-flex; + } + + .p-navigation__search { + background-color: $colors--dark-theme--background-default; + justify-content: center; + left: 0; + padding: 0.625rem 1rem; + position: absolute; + top: 2rem; + width: 100%; + + .p-search-box { + margin: 0; + max-width: 50rem; + } + } + + .p-navigation.is-secondary { + display: none; + } + } } @media (min-width: $breakpoint-navigation-threshold) { background-color: $color-dark; .p-navigation__link { - padding: 0.5rem 2rem 0.5rem 1rem; + padding: 0.5rem 1rem 0.5rem 1rem; } - .p-navigation__link--search-toggle { - padding-left: 0.5rem; + .p-navigation__item--dropdown-toggle .p-navigation__link { + padding-right: 2rem; &::after { top: 0.5rem; @@ -91,13 +93,9 @@ } .p-navigation__item--dropdown-toggle.is-active { - background-color: rgba(255, 255, 255, 0.1); + background-color: $colors--theme--background-default; } } - - &~.global-nav-dropdown { - top: 2.1rem !important; - } } .p-navigation.is-secondary { diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html index e69e6463c..bb6f1c0db 100644 --- a/templates/docs/examples/patterns/navigation/reduced.html +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -4,7 +4,7 @@ {% block standalone_css %}patterns_navigation{% endblock %} {% block content %} -
+
-
+
- -
@@ -104,8 +90,16 @@ WSL +
+
+ + + +
+
+
@@ -203,13 +197,15 @@

Fully open source */ const navigation = document.querySelector(".p-navigation--sliding"); - + const secondaryNavigation = document.querySelector(".p-navigation.is-secondary"); // Toggle search bar const searchToggles = document.querySelectorAll(".p-navigation__link--search-toggle"); searchToggles.forEach((toggle) => { toggle.addEventListener("click", (event) => { event.preventDefault(); navigation.classList.toggle("has-search-open"); + secondaryNavigation.classList.toggle("has-search-open"); + document.querySelector("input[type='search']").focus(); }); }); From cf2771d71e060acf29bdcaac01791878ed60a30e Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 19 Jun 2024 11:33:32 +0200 Subject: [PATCH 06/19] Clean up spacing in reduced nav --- scss/_patterns_navigation-reduced.scss | 60 ++++++++------------------ scss/_patterns_navigation.scss | 8 +++- 2 files changed, 25 insertions(+), 43 deletions(-) diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss index 7264ef151..e16a32cac 100644 --- a/scss/_patterns_navigation-reduced.scss +++ b/scss/_patterns_navigation-reduced.scss @@ -1,12 +1,15 @@ @mixin vf-p-navigation-reduced { // TODO: // - [ ] --reduced needs to extend the --sliding navigation - // - [ ] spacing as variables - // - [ ] extract sticky to separate class name - // - [ ] refactor search + // - [ ] fix search on mobile + // - [ ] dropdowns behaviours on mobile // - [ ] review use of media queries // - [ ] mobile chevron in secondary navigation // - [ ] remove the need for "secondary" modifier + // - [ ] extract the sticky modifier to main navigation + // - [x] refactor search + // - [x] extract sticky to separate class name + // - [x] spacing as variables // - [x] reduced nav theme? // - [x] colors as variables // - [x] "muted" color in the reduced nav @@ -14,7 +17,7 @@ .p-navigation--reduced { position: relative; - // logo overrides for reduced navigation + // LOGO OVERRIDES FOR REDUCED NAVIGATION // orange logo tag is hidden in reduced navigation .p-navigation__tagged-logo { @@ -32,6 +35,7 @@ font-size: #{map-get($font-sizes, default)}rem; } + // REDUCED SIZE OF NAVIGATION ON LARGE SCREENS @media (min-width: $breakpoint-navigation-threshold) { background-color: $colors--theme--background-alt; @@ -44,14 +48,13 @@ } .p-navigation__link { - padding: 0.5rem 1rem 0.5rem 1rem; + padding-bottom: $spv--small; + padding-top: $spv--small; } .p-navigation__item--dropdown-toggle .p-navigation__link { - padding-right: 2rem; - &::after { - top: 0.5rem; + top: $spv--small; } } @@ -60,52 +63,27 @@ } } - // search + // SEARCH IN REDUCED NAVIGATION .p-navigation__link--search-toggle { - @media (min-width: $breakpoint-navigation-threshold) { - // FIXME: update padding in default Vanilla search toggle - padding-right: 1rem; + // search label is always hidden in reduced navigation + .p-navigation__search-label { + display: none; + } + @media (min-width: $breakpoint-navigation-threshold) { &::after { - right: 0.5rem; - top: 0.5rem; + top: $spv--small; } } - - .p-navigation__search-label { - display: none; - } } @media (min-width: $breakpoint-navigation-threshold) { &.has-search-open { + // make sure reduced navigation items remain visible when search is open .p-navigation__nav .p-navigation__items { display: inline-flex; } - - .p-navigation__link--search-toggle::after { - @include vf-icon-close-themed; - } - // .p-navigation__search { - // background-color: $colors--theme--background-default; - // justify-content: center; - // left: 0; - // padding: 0.625rem 1rem; - // position: absolute; - // top: 2rem; - // width: 100%; - - // .p-search-box { - // margin: 0; - // max-width: 50rem; - // } - // } - - // // FIXME: this doesn't seem to work anyway - // .p-navigation.is-secondary { - // display: none; - // } } } } diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index acf0c19e3..450ee5926 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -524,10 +524,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px // show both label and icon on large screens @media (min-width: $breakpoint-large) { - padding-left: $sph--large; - .p-navigation__search-label { display: initial; + padding-left: $sph--large; } } @@ -611,6 +610,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px opacity: 0.5; pointer-events: all; } + + // change search toggle icon to close icon + .p-navigation__link--search-toggle::after { + @include vf-icon-close-themed; + } } .p-navigation.has-menu-open { From dc84090bf3f0827f10169a157e5e414ef8c6bd85 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 19 Jun 2024 11:52:36 +0200 Subject: [PATCH 07/19] Add sticky navigation option --- scss/_patterns_navigation-reduced.scss | 9 +-------- scss/_patterns_navigation.scss | 8 ++++++++ templates/docs/examples/templates/z-index.html | 4 ++-- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss index e16a32cac..7400a4bc2 100644 --- a/scss/_patterns_navigation-reduced.scss +++ b/scss/_patterns_navigation-reduced.scss @@ -6,7 +6,7 @@ // - [ ] review use of media queries // - [ ] mobile chevron in secondary navigation // - [ ] remove the need for "secondary" modifier - // - [ ] extract the sticky modifier to main navigation + // - [x] extract the sticky modifier to main navigation // - [x] refactor search // - [x] extract sticky to separate class name // - [x] spacing as variables @@ -88,13 +88,6 @@ } } - .p-navigation.is-sticky, - [class^='p-navigation--'].is-sticky { - position: sticky; - top: 0; - z-index: 9; - } - .p-navigation.is-secondary { .p-navigation__nav.is-open { display: flex; diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 450ee5926..7a955bbc3 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -494,6 +494,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } } + // STICKY NAVIGATION + .p-navigation.is-sticky, + [class^='p-navigation--'].is-sticky { + position: sticky; + top: 0; + z-index: 10; + } + // SEARCH // on mobile screens search box is visible inside of the mobile navigation dropdown diff --git a/templates/docs/examples/templates/z-index.html b/templates/docs/examples/templates/z-index.html index 232021af5..c505efcda 100644 --- a/templates/docs/examples/templates/z-index.html +++ b/templates/docs/examples/templates/z-index.html @@ -1,5 +1,5 @@ {% extends "_layouts/examples.html" %} {% block title %}Z-index{% endblock %} {% block content %} -

+ {% endblock %} \ No newline at end of file From d057cf94be1ee6f17daadbf4d7d299bf370d3ad9 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 19 Jun 2024 17:30:08 +0200 Subject: [PATCH 09/19] Make sure reduced navigation implements sliding navigation as well --- scss/_patterns_navigation.scss | 18 +++++++---- .../patterns/navigation/_script-sliding.js | 6 ++-- .../examples/patterns/navigation/reduced.html | 30 +++++++++---------- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 7a955bbc3..4500d0a6c 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -140,7 +140,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } .p-navigation, - .p-navigation--sliding { + .p-navigation--sliding, + .p-navigation--reduced { background-color: $colors--theme--background-default; display: flex; flex-direction: column; @@ -596,7 +597,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px // when navigation search is expanded .p-navigation.has-search-open, - .p-navigation--sliding.has-search-open { + .p-navigation--sliding.has-search-open, + .p-navigation--reduced.has-search-open { // make sure search in navigation renders on top of the overlay .p-navigation__nav { display: flex; @@ -761,7 +763,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease; - .p-navigation--sliding.has-menu-open { + .p-navigation--sliding.has-menu-open, + .p-navigation--reduced.has-menu-open { height: 100vh; overflow-y: hidden; @@ -804,7 +807,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } /* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */ - .p-navigation--sliding .p-navigation__dropdown { + .p-navigation--sliding .p-navigation__dropdown, + .p-navigation--reduced .p-navigation__dropdown { display: block; height: 100vh; left: 100vw; @@ -859,7 +863,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } } - .p-navigation--sliding .p-navigation__items { + .p-navigation--sliding .p-navigation__items, + .p-navigation--reduced .p-navigation__items { transition: transform $sliding-nav-animation-settings; &.is-active { @@ -890,7 +895,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px } /* stylelint-enable max-nesting-depth */ - .p-navigation--sliding { + .p-navigation--sliding, + .p-navigation--reduced { // Default positioning for nested dropdown buttons. Overridden by subsequent styles. .p-navigation__item--dropdown-toggle { position: initial; diff --git a/templates/docs/examples/patterns/navigation/_script-sliding.js b/templates/docs/examples/patterns/navigation/_script-sliding.js index 5766a27ac..97b0020ae 100644 --- a/templates/docs/examples/patterns/navigation/_script-sliding.js +++ b/templates/docs/examples/patterns/navigation/_script-sliding.js @@ -1,6 +1,6 @@ const initNavigationSliding = () => { - const navigation = document.querySelector('.p-navigation--sliding'); - const secondaryNavigation = document.querySelector('.p-navigation--sliding + .p-navigation'); + const navigation = document.querySelector('.p-navigation--sliding, .p-navigation--reduced'); + const secondaryNavigation = document.querySelector('.p-navigation--reduced + .p-navigation'); const toggles = document.querySelectorAll('.p-navigation__nav .p-navigation__link[aria-controls]:not(.js-back)'); const searchButtons = document.querySelectorAll('.js-search-button'); const menuButton = document.querySelector('.js-menu-button'); @@ -91,7 +91,7 @@ const initNavigationSliding = () => { document.addEventListener('click', function (event) { const target = event.target; if (target.closest) { - if (!target.closest('.p-navigation--sliding')) { + if (!target.closest('.p-navigation--sliding, .p-navigation--reduced')) { resetToggles(); } } diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html index d915487ed..05c39e539 100644 --- a/templates/docs/examples/patterns/navigation/reduced.html +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -4,7 +4,7 @@ {% block standalone_css %}patterns_navigation{% endblock %} {% block content %} -
+
@@ -33,28 +33,28 @@ Use cases @@ -65,7 +65,7 @@
@@ -173,7 +173,7 @@

Deep integration

- Ubuntu seamlessly integrates with enterprise environments, Ubuntu Pro provides extended + Ubuntu seamlessly integrates with enterprise environments, Ubuntu Pro provides extended security patching and compliance tooling alongside support for third party identity management tools.

From fc8214b851c1b70b87e83e2f0edfff3fa1a8fff8 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 19 Jun 2024 17:56:53 +0200 Subject: [PATCH 10/19] Fix linting --- scss/_vanilla.scss | 2 +- scss/standalone/patterns_navigation.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss index c78c18d28..6f4021b9a 100644 --- a/scss/_vanilla.scss +++ b/scss/_vanilla.scss @@ -183,4 +183,4 @@ @include vf-u-no-print; @include vf-u-text-max-width; @include vf-u-text-figures; -} \ No newline at end of file +} diff --git a/scss/standalone/patterns_navigation.scss b/scss/standalone/patterns_navigation.scss index dcf05f7cc..401f94807 100644 --- a/scss/standalone/patterns_navigation.scss +++ b/scss/standalone/patterns_navigation.scss @@ -15,4 +15,4 @@ @include vf-u-off-screen; // needed in example that aligns navigation with the grid -@include vf-p-grid; \ No newline at end of file +@include vf-p-grid; From da1acb1cde5fffae00861bc40b7f65474d9810fd Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 25 Jun 2024 13:39:55 +0200 Subject: [PATCH 11/19] Addressing feedback, cleaning up the example --- scss/_patterns_navigation-reduced.scss | 17 +--- scss/_patterns_navigation.scss | 2 +- .../patterns/navigation/_script-sliding.js | 32 ++++---- .../examples/patterns/navigation/reduced.html | 81 +------------------ 4 files changed, 19 insertions(+), 113 deletions(-) diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss index 1d87fe18b..ccc30368f 100644 --- a/scss/_patterns_navigation-reduced.scss +++ b/scss/_patterns_navigation-reduced.scss @@ -1,19 +1,4 @@ @mixin vf-p-navigation-reduced { - // TODO: - // - [ ] --reduced needs to extend the --sliding navigation - // - [x] fix search on mobile - // - [x] dropdowns behaviours on mobile - // - [x] review use of media queries - // - [x] mobile chevron in secondary navigation - // - [x] remove the need for "secondary" modifier - // - [x] extract the sticky modifier to main navigation - // - [x] refactor search - // - [x] extract sticky to separate class name - // - [x] spacing as variables - // - [x] reduced nav theme? - // - [x] colors as variables - // - [x] "muted" color in the reduced nav - // - [x] reduced nav background color (mobile/desktop) .p-navigation--reduced { position: relative; @@ -84,7 +69,7 @@ } @media (min-width: $breakpoint-navigation-threshold) { &.has-search-open + .has-search-open .p-navigation__banner { - display: initial; + display: flex; // reset to value as defined in _patterns_navigation.scss } &.has-search-open { diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 4500d0a6c..022a37755 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -500,7 +500,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px [class^='p-navigation--'].is-sticky { position: sticky; top: 0; - z-index: 10; + z-index: 99; // show it above all other content, but below modal/overlays } // SEARCH diff --git a/templates/docs/examples/patterns/navigation/_script-sliding.js b/templates/docs/examples/patterns/navigation/_script-sliding.js index 97b0020ae..5038aabb9 100644 --- a/templates/docs/examples/patterns/navigation/_script-sliding.js +++ b/templates/docs/examples/patterns/navigation/_script-sliding.js @@ -6,7 +6,7 @@ const initNavigationSliding = () => { const menuButton = document.querySelector('.js-menu-button'); const dropdowns = document.querySelectorAll('ul.p-navigation__dropdown'); const lists = [...dropdowns]; - const mainList = dropdowns[0] ? dropdowns[0].parentNode.parentNode : null; + const mainList = dropdowns[0]?.parentNode?.parentNode; if (mainList) { lists.push(mainList); } @@ -80,7 +80,6 @@ const initNavigationSliding = () => { if (!target || target === exception) { return; } - console.log(toggle, target); target.setAttribute('aria-hidden', 'true'); toggle.parentNode.classList.remove('is-active'); toggle.parentNode.parentNode.classList.remove('is-active'); @@ -117,20 +116,22 @@ const initNavigationSliding = () => { toggle.addEventListener('click', function (e) { e.preventDefault(); const target = document.getElementById(toggle.getAttribute('aria-controls')); - const isNested = target.parentNode.parentNode.classList.contains('p-navigation__dropdown'); + if (target) { + const isNested = target.parentNode.parentNode.classList.contains('p-navigation__dropdown'); - if (!isNested) { - resetToggles(target); - } - if (target.getAttribute('aria-hidden') === 'true') { - toggle.parentNode.classList.add('is-active'); - toggle.parentNode.parentNode.classList.add('is-active'); - target.setAttribute('aria-hidden', 'false'); - setFocusable(target); - } else { - target.setAttribute('aria-hidden', 'true'); - toggle.parentNode.classList.remove('is-active'); - toggle.parentNode.parentNode.classList.remove('is-active'); + if (!isNested) { + resetToggles(target); + } + if (target.getAttribute('aria-hidden') === 'true') { + toggle.parentNode.classList.add('is-active'); + toggle.parentNode.parentNode.classList.add('is-active'); + target.setAttribute('aria-hidden', 'false'); + setFocusable(target); + } else { + target.setAttribute('aria-hidden', 'true'); + toggle.parentNode.classList.remove('is-active'); + toggle.parentNode.parentNode.classList.remove('is-active'); + } } }); }); @@ -145,7 +146,6 @@ const initNavigationSliding = () => { }; dropdowns.forEach(function (dropdown) { - console.log(window.getComputedStyle(dropdown.children[0], null).display); dropdown.children[1].addEventListener('keydown', function (e) { if (e.shiftKey && e.key === 'Tab' && window.getComputedStyle(dropdown.children[0], null).display === 'none') { goBackOneLevel(e, dropdown.children[1].children[0]); diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html index 05c39e539..e561e5c07 100644 --- a/templates/docs/examples/patterns/navigation/reduced.html +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -54,7 +54,7 @@ Sign in
  • - +
    • @@ -111,85 +111,6 @@

    Ubuntu for desktops

    -

    The number 1 open - source operating system powers millions of PCs and laptops around the world.

    -

    - Download Ubuntu Desktop -

    -
    -
    - - -
    -
    -
    -

    The secure, modern operating system used by millions

    -
    -
    -
    -
    -
    -
    -

    The preferred choice for professional developers

    -
    -
    -

    - Each release of Ubuntu delivers the latest applications, libraries and toolchains. Ubuntu is a primary - platform for all major IDEs, game development tools and AI/ML software. -

    -
    -
    -
    -
    -
    -

    Everything you need to daily drive

    -
    -
    -

    - Ubuntu offers essential applications for web browsing, messaging, gaming, and content creation, including - Firefox, Chrome, Discord, Steam, and OBS Studio, supporting all your daily computing needs. -

    -
    -
    -
    -
    -
    -

    Private and secure by design

    -
    -
    -

    - With regular updates and built-in security features, Ubuntu prioritises user privacy and system integrity, - making it the secure choice for those who value data protection. -

    -
    -
    -
    -
    -
    -

    Deep integration with enterprise tools

    -
    -
    -

    - Ubuntu seamlessly integrates with enterprise environments, Ubuntu Pro provides extended - security patching and compliance tooling alongside support for third party identity management tools. -

    -
    -
    -
    -
    -
    -

    Fully open source

    -
    -
    -

    - Ubuntu has always been free to download, use and share. We believe in the power of open source software; - Ubuntu could not exist without its worldwide community of voluntary developers. -

    -
    -
    From 506e1decb158ec6c5d52e3d9986456ad89a0a772 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 26 Jun 2024 12:14:50 +0200 Subject: [PATCH 12/19] Combine navigation contents into single list --- scss/_patterns_navigation.scss | 5 +++++ templates/docs/examples/patterns/navigation/reduced.html | 4 +--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 022a37755..6c8dca89d 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -229,6 +229,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px // shift navigation items by the size of grid margin to align with grid .p-navigation__items:first-child { margin-left: calc(-1 * $sph--large); + width: calc(100% + $sph--large); } // on medium screen sizes (6 columns) use 2/4 column split @@ -262,6 +263,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px max-width: $nav-link-max-width; } + + &.is-right-shifted { + margin-left: auto; + } } .p-navigation__link { diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html index e561e5c07..96f8a1989 100644 --- a/templates/docs/examples/patterns/navigation/reduced.html +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -43,9 +43,7 @@ Get Ubuntu - -
      -
    • - +
    From 5fd6013d383ed1c2c247426df81fdd3d97019878 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 26 Jun 2024 14:43:02 +0200 Subject: [PATCH 14/19] Update docs --- releases.yml | 8 ++++++++ templates/docs/patterns/navigation/index.md | 17 +++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/releases.yml b/releases.yml index 313c53598..354e624e4 100644 --- a/releases.yml +++ b/releases.yml @@ -8,6 +8,14 @@ url: /docs/patterns/images#cover-image status: New notes: We've added a new cover variant to the image container component via is-cover class to support having images cover the container with predefined aspect ratio. + - component: Navigation / Sticky + url: /docs/patterns/navigation#sticky + status: New + notes: We've introduced a new sticky option to the top navigation component via is-sticky class name. + - component: Navigation / Reduced + url: /docs/patterns/navigation#reduced + status: New + notes: We've introduced a new reduced variant of the top navigation for building two level top navigation. - version: 4.13.0 features: - component: Image container diff --git a/templates/docs/patterns/navigation/index.md b/templates/docs/patterns/navigation/index.md index fe16e27b9..e3d15bd40 100644 --- a/templates/docs/patterns/navigation/index.md +++ b/templates/docs/patterns/navigation/index.md @@ -69,6 +69,23 @@ On small screens the search box and menu items can be expanded individually as t
    View example of the search navigation
    +## Sticky + +Top navigation can be made sticky by adding the `is-sticky` class to the root element of the navigation. + +## Reduced + +
    +
    +

    Work in progress:

    +

    Reduced navigation is part of a larger piece of work to upstream the ubuntu.com navigation to Vanilla. These changes are introduced gradualy and may not be fully functional or documented yet.

    +
    +
    + +When used on websites with more complex information archutecture there may be a need to provide two levels of top navigation. In such case the reduced navigation pattern can be used to provide a top level navigation (that would contain the top level navigation items, as on website home page), followed by standard navigation, that would serve as a secondary navigation for the current section of the website. + +
    View example of the reduced navigation pattern
    + ## Side navigation The side navigation pattern can be used to provide more detailed navigation alongside your content. From 927ca8ecf5c1414d6b484e68cc5e9be8164cb219 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 26 Jun 2024 15:00:08 +0200 Subject: [PATCH 15/19] Add example reduced navigation dropdowns --- scss/_patterns_navigation-reduced.scss | 1 + scss/_patterns_navigation.scss | 2 +- .../examples/patterns/navigation/reduced.html | 88 +++++++++++++++++-- 3 files changed, 83 insertions(+), 8 deletions(-) diff --git a/scss/_patterns_navigation-reduced.scss b/scss/_patterns_navigation-reduced.scss index ccc30368f..84d323438 100644 --- a/scss/_patterns_navigation-reduced.scss +++ b/scss/_patterns_navigation-reduced.scss @@ -1,6 +1,7 @@ @mixin vf-p-navigation-reduced { .p-navigation--reduced { position: relative; + z-index: 99; // display above sticky top navigation, but below modals/overlays // LOGO OVERRIDES FOR REDUCED NAVIGATION diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 78d251a20..e04585684 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -523,7 +523,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px [class^='p-navigation--'].is-sticky { position: sticky; top: 0; - z-index: 99; // show it above all other content, but below modal/overlays + z-index: 98; // show it above all other content, but below modal/overlays and reduced navigation } // SEARCH diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html index f5ed2f2f4..2a005da49 100644 --- a/templates/docs/examples/patterns/navigation/reduced.html +++ b/templates/docs/examples/patterns/navigation/reduced.html @@ -28,25 +28,99 @@
    -