From ffe0d8839ff0cb85c2e16c3bce8fdfa8972b07ff Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 4 Jul 2022 15:08:46 +0200 Subject: [PATCH 01/15] First attempt --- scss/_reboot.scss | 14 -------------- scss/_variables.scss | 2 +- site/assets/scss/_boosted.scss | 8 -------- site/assets/scss/_content.scss | 18 ++++++++++++++---- .../docs/5.2/getting-started/accessibility.md | 1 - 5 files changed, 15 insertions(+), 28 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 19ffef5b4a..3ae0319ac4 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -35,22 +35,8 @@ scroll-behavior: smooth; } } - - // Boosted mod: Improve focus visibility when fixed/sticky header is used - // See https://caniuse.com/?search=scroll-padding - // scss-docs-start scroll-offset - @if $enable-fixed-header { - scroll-padding-top: $scroll-offset-top * .5; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $scroll-offset-top; - } - } - // scss-docs-end scroll-offset - // End mod } - // Body // // 1. Remove the margin in all browsers. diff --git a/scss/_variables.scss b/scss/_variables.scss index 8556d89802..03f1498f80 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1945,7 +1945,7 @@ $pre-line-height: 1.25 !default; // //// Scroll margin -$scroll-offset-top: $spacer * 6 !default; // Matching .navbar computed height +$scroll-offset-top: $spacer * 5 !default; // Matching .navbar computed height //// Back to top // scss-docs-start back-to-top diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index 223c13716a..43c71b1d4d 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -1,12 +1,4 @@ // stylelint-disable selector-max-id -:root { - scroll-padding-top: $offset-top / 2; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $offset-top; - } -} - html, body { min-height: 100vh; diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 719f35d477..e57de97bb9 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -3,13 +3,23 @@ // .bd-content { - // Offset content from fixed navbar when jumping to headings + // Boosted mod: Offset content from fixed navbar when jumping to headings, values adjusted > :target { - padding-top: 5rem; - margin-top: -5rem; + padding-top: 7.5rem; + margin-top: -7.5rem; + + @include media-breakpoint-up(md) { + padding-top: 10.5rem; + margin-top: -10.5rem; + } + + @include media-breakpoint-up(lg) { + padding-top: 6.875rem; + margin-top: -6.875rem; + } } - > h2:not(:first-child) { + > h2 { margin-top: 3rem; } diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.2/getting-started/accessibility.md index 0ab1cafc83..6b8ed740eb 100644 --- a/site/content/docs/5.2/getting-started/accessibility.md +++ b/site/content/docs/5.2/getting-started/accessibility.md @@ -71,7 +71,6 @@ When using a fixed (or sticky) header, tabbing backward often hides focused elem 1. `$scroll-offset-top` variable defines the offset, 2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header. -{{< scss-docs name="scroll-offset" file="scss/_reboot.scss" >}} ### Minimum target size From 97ae625f1b0085ddaf276e4976acc755db58d410 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 9 Nov 2022 14:41:13 +0100 Subject: [PATCH 02/15] Handle the differents sizes of header --- js/src/orange-navbar.js | 16 ++++++---------- scss/_orange-navbar.scss | 3 ++- site/assets/scss/_content.scss | 16 +++++++++++++--- site/content/docs/5.2/migration.md | 3 +++ 4 files changed, 24 insertions(+), 14 deletions(-) diff --git a/js/src/orange-navbar.js b/js/src/orange-navbar.js index 68918dc1ef..863b8cb625 100644 --- a/js/src/orange-navbar.js +++ b/js/src/orange-navbar.js @@ -36,16 +36,12 @@ class OrangeNavbar extends BaseComponent { static enableMinimizing(el) { // The minimized behaviour works only if your header has .sticky-top (fixed-top will be sticky without minimizing) const scroll = window.scrollY - const headerChildren = [...el.children] - const globalHeaderChild = headerChildren.find(element => !element.classList.contains('supra')) - - if (globalHeaderChild) { - if (scroll > 0) { - // Consider first element not having .supra in array is the first header - globalHeaderChild.classList.add('header-minimized') - } else { - globalHeaderChild.classList.remove('header-minimized') - } + + if (scroll > 0) { + // Consider first element not having .supra in array is the first header + el.classList.add('header-minimized') + } else { + el.classList.remove('header-minimized') } } diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss index 6ccda5005e..82bab6b47b 100644 --- a/scss/_orange-navbar.scss +++ b/scss/_orange-navbar.scss @@ -25,7 +25,8 @@ } } -.header-minimized { +.header-minimized :first-child:not(.supra), +.header-minimized .supra + .navbar { // scss-docs-start minimized-navbar-css-vars @include media-breakpoint-up(md){ --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */ diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index e57de97bb9..5796cae070 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -6,16 +6,26 @@ // Boosted mod: Offset content from fixed navbar when jumping to headings, values adjusted > :target { padding-top: 7.5rem; - margin-top: -7.5rem; + margin-top: -5.5rem; @include media-breakpoint-up(md) { padding-top: 10.5rem; - margin-top: -10.5rem; + margin-top: -8.5rem; + + .header-minimized ~ .bd-gutter & { + padding-top: 8rem; + margin-top: -6rem; + } } @include media-breakpoint-up(lg) { padding-top: 6.875rem; - margin-top: -6.875rem; + margin-top: -4.875rem; + + .header-minimized ~ .bd-gutter & { + padding-top: 4.375rem; + margin-top: -2.375rem; + } } } diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index d2b06516a5..ca7a08c9d9 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -22,6 +22,9 @@ If you need more details about the changes, please refer to the [v5.2.2 release] - **Modals** - Warning Modals markups have changed to show that a modal dialog represents its own separate document/context, so most of the `.modal-title`s are now `

`s associated with a `.h*`. Please reflect this modification into your websites by choosing the right header level. +- **Orange Navbar** + - Breaking The minimizing behavior with `.header-minimized` is applied on top of the `
` instead of one of his child directly. + ## v5.2.1
From 26b3210d0f81793d271ff4bbc55d6043268b9e9c Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 Jan 2023 15:39:48 +0100 Subject: [PATCH 03/15] Actualizing the CSS and js to be smaller and leave less --- js/src/orange-navbar.js | 5 +---- site/assets/scss/_content.scss | 10 +++++----- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/js/src/orange-navbar.js b/js/src/orange-navbar.js index 2f692240c7..d74df0ba82 100644 --- a/js/src/orange-navbar.js +++ b/js/src/orange-navbar.js @@ -35,10 +35,7 @@ class OrangeNavbar extends BaseComponent { // Static static enableMinimizing(el) { // The minimized behaviour works only if your header has .sticky-top (fixed-top will be sticky without minimizing) - const scroll = window.scrollY - - if (scroll > 0) { - // Consider first element not having .supra in array is the first header + if (window.scrollY > 0) { el.classList.add('header-minimized') } else { el.classList.remove('header-minimized') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f3afce5dfd..c044693bc7 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -6,25 +6,25 @@ // Boosted mod: Offset content from fixed navbar when jumping to headings, values adjusted > :target { padding-top: 7.5rem; - margin-top: -5.5rem; + margin-top: -5.75rem; @include media-breakpoint-up(md) { padding-top: 10.5rem; - margin-top: -8.5rem; + margin-top: -8.75rem; .header-minimized ~ .bd-gutter & { padding-top: 8rem; - margin-top: -6rem; + margin-top: -6.25rem; } } @include media-breakpoint-up(lg) { padding-top: 6.875rem; - margin-top: -4.875rem; + margin-top: -5rem; .header-minimized ~ .bd-gutter & { padding-top: 4.375rem; - margin-top: -2.375rem; + margin-top: -2.625rem; } } } From d0d5675eba9ea40d611d55bd808aab4c3977647c Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 Jan 2023 15:45:45 +0100 Subject: [PATCH 04/15] fix tests --- js/tests/unit/orange-navbar.spec.js | 45 +++-------------------------- 1 file changed, 4 insertions(+), 41 deletions(-) diff --git a/js/tests/unit/orange-navbar.spec.js b/js/tests/unit/orange-navbar.spec.js index e372925974..2540d0cddb 100644 --- a/js/tests/unit/orange-navbar.spec.js +++ b/js/tests/unit/orange-navbar.spec.js @@ -122,64 +122,27 @@ describe('OrangeNavbar', () => { it('should add .header-minimized to the global header non-supra first