wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Setup header and sticky header to be able to be full width

Browse source 
- 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 <div> to fix a11y error. Update searchToggle.js to use .vector-header-container rather than <header>

Bug: T332449
Bug: T330438
Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405
This commit is contained in:
bwang 2023-03-28 12:45:48 -05:00
parent 1c650d4f25
commit 8d9b148cf7
8 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "12.2 kB"
"maxSize": "12.3 kB"
},
{
"resourceModule": "skins.vector.legacy.js",

4
includes/templates/StickyHeader.mustache
View file

@ -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.
}}
<header id="vector-sticky-header" class="vector-sticky-header">
<div id="vector-sticky-header" class="vector-sticky-header">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right" aria-hidden="true">
{{#data-button-start}}
@ -54,4 +54,4 @@
</div>
</div>
</div>
</header>
</div>

12
includes/templates/skin.mustache
View file

@ -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.
}}
<a class="mw-jump-link" href="#bodyContent">{{msg-vector-jumptocontent}}</a>
<div class="vector-header-container">
{{>Header}}
</div>
<div class="mw-page-container">
<a class="mw-jump-link" href="#bodyContent">{{msg-vector-jumptocontent}}</a>
<div class="mw-page-container-inner">
{{>Header}}
{{>MainMenuPinned}}
<div class="vector-sitenotice-container">
<div id="siteNotice">{{{html-site-notice}}}</div>
@ -78,4 +80,8 @@
</div>
</div> {{! END mw-page-container-inner }}
</div> {{! END mw-page-container }}
{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}
{{#data-vector-sticky-header}}
<div class="vector-header-container vector-sticky-header-container">
{{>StickyHeader}}
</div>
{{/data-vector-sticky-header}}

12
resources/skins.vector.es6/searchToggle.js
View file

@ -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 );
};

47
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -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`

2
resources/skins.vector.styles/layouts/grid.less
View file

@ -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;
}

39
resources/skins.vector.styles/layouts/screen.less
View file

@ -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 {

4
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sticky header renders 1`] = `
"<header id=\\"vector-sticky-header\\" class=\\"vector-sticky-header\\">
"<div id=\\"vector-sticky-header\\" class=\\"vector-sticky-header\\">
<div class=\\"vector-sticky-header-start\\">
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right\\" aria-hidden=\\"true\\">
@ -63,6 +63,6 @@ exports[`Sticky header renders 1`] = `
</div>
</div>
</div>
</header>
</div>
"
`;