From 8d9b148cf7d2f4f4e57464033b12ccf00ff96288 Mon Sep 17 00:00:00 2001 From: bwang Date: Tue, 28 Mar 2023 12:45:48 -0500 Subject: [PATCH] Setup header and sticky header to be able to be full width - Move the header and skip link out of .mw-page-container-inner and the grid - Wrap the header and sticky header with a .vector-header-container element, allowing us to easily update header styles in the future - Update sticky header to use a
to fix a11y error. Update searchToggle.js to use .vector-header-container rather than
Bug: T332449 Bug: T330438 Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405 --- bundlesize.config.json | 2 +- includes/templates/StickyHeader.mustache | 4 +- includes/templates/skin.mustache | 12 +++-- resources/skins.vector.es6/searchToggle.js | 12 ++--- .../components/StickyHeader.less | 47 +++++++------------ .../skins.vector.styles/layouts/grid.less | 2 + .../skins.vector.styles/layouts/screen.less | 39 ++++++++------- .../__snapshots__/stickyHeader.test.js.snap | 4 +- 8 files changed, 61 insertions(+), 61 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index a25311cc9..7b820be71 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "12.2 kB" + "maxSize": "12.3 kB" }, { "resourceModule": "skins.vector.legacy.js", diff --git a/includes/templates/StickyHeader.mustache b/includes/templates/StickyHeader.mustache index 86744f2e8..15f30f15a 100644 --- a/includes/templates/StickyHeader.mustache +++ b/includes/templates/StickyHeader.mustache @@ -10,7 +10,7 @@ The exception to this is the TOC in the sticky header, which is not duplicated and is moved into the sticky header in the DOM. We apply `aria-hidden` to all the contents of the sticky header except for the TOC. }} -
+
-
+
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index 05edcbf48..bef57978f 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -30,10 +30,12 @@ object data-main-menu. See MainMenu.mustache for documentation. object data-footer for footer template partial. see Footer.mustache for documentation. }} +{{msg-vector-jumptocontent}} +
+ {{>Header}} +
- {{msg-vector-jumptocontent}}
- {{>Header}} {{>MainMenuPinned}}
{{{html-site-notice}}}
@@ -78,4 +80,8 @@
{{! END mw-page-container-inner }}
{{! END mw-page-container }} -{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}} +{{#data-vector-sticky-header}} +
+ {{>StickyHeader}} +
+{{/data-vector-sticky-header}} diff --git a/resources/skins.vector.es6/searchToggle.js b/resources/skins.vector.es6/searchToggle.js index 6cb475d24..4e57d9eab 100644 --- a/resources/skins.vector.es6/searchToggle.js +++ b/resources/skins.vector.es6/searchToggle.js @@ -1,5 +1,5 @@ const - HEADER_SELECTOR = 'header', + HEADER_CONTAINER_CLASS = 'vector-header-container', SEARCH_BOX_SELECTOR = '.vector-search-box', SEARCH_VISIBLE_CLASS = 'vector-header-search-toggled'; @@ -106,19 +106,19 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) { * @param {HTMLElement|Element} searchToggle */ module.exports = function initSearchToggle( searchToggle ) { - const header = - /** @type {HTMLElement|null} */ ( searchToggle.closest( HEADER_SELECTOR ) ); + const headerContainer = + /** @type {HTMLElement|null} */ ( searchToggle.closest( `.${HEADER_CONTAINER_CLASS}` ) ); - if ( !header ) { + if ( !headerContainer ) { return; } const searchBox = - /** @type {HTMLElement|null} */ ( header.querySelector( SEARCH_BOX_SELECTOR ) ); + /** @type {HTMLElement|null} */ ( headerContainer.querySelector( SEARCH_BOX_SELECTOR ) ); if ( !searchBox ) { return; } - bindToggleClickHandler( searchBox, header, searchToggle ); + bindToggleClickHandler( searchBox, headerContainer, searchToggle ); }; diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 073053c5c..454ba6c14 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -5,39 +5,26 @@ @spacing-search-title-divider: 30px; @font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`. -.vector-sticky-header { - width: 100%; - max-width: @max-width-page-container; - height: @height-sticky-header; +.vector-sticky-header-container { position: fixed; top: 0; left: 0; right: 0; z-index: @z-index-header; - transition: @transition-sticky-header; - align-items: center; - margin: 0 auto; - background: @background-color-base; - background-color: #fffffff7; border-bottom: @border-width-base @border-style-base @colorGray14; - justify-content: space-between; - box-sizing: border-box; - - .vector-feature-limited-width-disabled & { - max-width: none; - } - - // T317573 Account for page container. - padding: 6px @padding-horizontal-page-container-desktop; - - @media ( min-width: @min-width-desktop-wide ) { - padding: 6px @padding-horizontal-page-container-desktop-wide; - } - // Hide sticky header until visible class is applied to the body + transition: @transition-sticky-header; display: none; transform: translateY( -100% ); opacity: 0; +} + +.vector-sticky-header { + width: 100%; + height: @height-sticky-header; + display: flex; + align-items: center; + justify-content: space-between; // // Layout @@ -156,17 +143,15 @@ // (e.g. when the user navigates to a page with a hash fragment in the URI). scroll-padding-top: ~'calc( @{height-sticky-header} + @{scroll-padding-top} )'; - .vector-sticky-header { + .vector-sticky-header-container { // Sticky header is only enabled for js users and when feature flag is enabled - display: flex; + display: block; } - .vector-sticky-header-visible { - .vector-sticky-header { - // Show sticky header with transition when visible class is applied to the body - opacity: @opacity-base; - transform: translateY( 0 ); - } + .vector-sticky-header-visible .vector-sticky-header-container { + // Show sticky header with transition when visible class is applied to the body + opacity: @opacity-base; + transform: translateY( 0 ); } // - T314330 `.vector-feature-toc-pinned-enabled #vector-toc-pinned-container` diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index 680595a00..8d4b0037f 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -26,6 +26,7 @@ .mw-page-container-inner { display: grid; column-gap: @grid-column-gap; + // FIXME: Remove header from grid after cached HTML is resolved grid-template: ~'min-content min-content min-content 1fr min-content / @{grid-template-column-desktop}'; grid-template-areas: 'header header' 'siteNotice siteNotice' @@ -47,6 +48,7 @@ overflow-anchor: none; // T330108 } + // FIXME: Remove header from grid after cached HTML is resolved .mw-header { grid-area: header; } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index d2a40fdf5..5d67f5716 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -111,33 +111,19 @@ body { padding: @padding-content; } -// Container logic. -.mw-page-container { - // Setting position and z-index is important as it allows overlays appended to the body tag - // to position themselves over the Vector interface. This forms another stacking context for - // elements placed inside this element - position: relative; - z-index: 0; +.mixin-page-container() { max-width: @max-width-page-container; // Set a min-width to make explicit we do not support anything below this threshold. // For devices too small, they should be more useable with horizontal scrolling. // e.g. Portrait on an iPad min-width: @min-width-supported; - // Fill the viewport even if the content height is small. This also helps - // mitigate a long sidebar overflowing the page container (T257518). - min-height: 100%; - margin-left: auto; - margin-right: auto; + margin: 0 auto; // Use non-zero padding to disable margin collapse. // Be careful not to use overflow-y: scroll here (see T270146 and T271868) padding: 0.05px @padding-horizontal-page-container; background-color: @background-color-page-container; box-sizing: border-box; - .vector-feature-limited-width-disabled & { - max-width: none; - } - @media ( min-width: @min-width-desktop ) { padding-left: @padding-horizontal-page-container-desktop; padding-right: @padding-horizontal-page-container-desktop; @@ -147,6 +133,27 @@ body { padding-left: @padding-horizontal-page-container-desktop-wide; padding-right: @padding-horizontal-page-container-desktop-wide; } + + .vector-feature-limited-width-disabled & { + max-width: none; + } +} + +// Container logic. +.mw-page-container { + // Setting position and z-index is important as it allows overlays appended to the body tag + // to position themselves over the Vector interface. This forms another stacking context for + // elements placed inside this element + position: relative; + z-index: 0; + // Fill the viewport even if the content height is small. This also helps + // mitigate a long sidebar overflowing the page container (T257518). + min-height: 100%; + .mixin-page-container(); +} + +.vector-header-container { + .mixin-page-container(); } .skin--responsive .mw-page-container { diff --git a/tests/jest/__snapshots__/stickyHeader.test.js.snap b/tests/jest/__snapshots__/stickyHeader.test.js.snap index 5d5b70e06..28be4ce1b 100644 --- a/tests/jest/__snapshots__/stickyHeader.test.js.snap +++ b/tests/jest/__snapshots__/stickyHeader.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Sticky header renders 1`] = ` -"
+"
@@ -63,6 +63,6 @@ exports[`Sticky header renders 1`] = `
-
+ " `;