golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Accommodate other sticky elements with sticky header 

- Update sticky header js to apply top offsets.

Bug: T289817
Change-Id: Id0e7bf7b018fbbfb2a9c1932314bf67f245b465d
This commit is contained in:
Clare Ming 2021-09-20 17:37:54 -06:00
parent 74736571e7
commit e30c3408cf
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/skins.vector.js/stickyHeader.js
View File

@ -7,7 +7,8 @@ var
FIRST_HEADING_ID = 'firstHeading',
USER_MENU_ID = 'p-personal',
VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle';
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle',
OTHER_STICKY_ELEMENT_SELECTORS = '.charts-stickyhead th';
/**
* Copies attribute from an element to another.
@ -128,6 +129,13 @@ function makeStickyHeaderFunctional(
document.querySelector( '#ca-history a' ),
document.querySelector( '#ca-talk a' )
);
// Apply offset for other sticky elements on page if applicable.
var otherStickyElements = document.querySelectorAll( OTHER_STICKY_ELEMENT_SELECTORS );
Array.prototype.forEach.call( otherStickyElements, function ( el ) {
el.classList.add( 'mw-sticky-header-element' );
} );
stickyObserver.observe( stickyIntersection );
}

33
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -3,8 +3,10 @@
// Set an explicit height. This is needed for scroll padding and for other
// sticky elements on the page. Setting the height in relative units enables
// the header's height to adapt to the browser's font size setting.
@height-sticky-header: unit( 60px / @font-size-browser, em );
// the header's height to adapt to the browser's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-sticky-header: unit( 60px / @font-size-browser, rem );
.vector-sticky-header {
width: 100%;
@ -129,18 +131,25 @@
display: none;
}
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the
// root element. This is needed so that the sticky header does not overlap the
// top of an element when the URI has a hash fragment (e.g. when the user clicks
// a jump link) and when the user tabs through elements in reverse order.
//
// Please note that this class must be independent of the
// .vector-sticky-header-visible class to correctly handle situations where the
// sticky header isn't visible yet but we still need scroll padding applied
// (e.g. when the user navigates to a page with a hash fragment in the URI).
@media ( min-width: @width-breakpoint-tablet ) {
.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the
// root element. This is needed so that the sticky header does not overlap the
// top of an element when the URI has a hash fragment (e.g. when the user clicks
// a jump link) and when the user tabs through elements in reverse order.
//
// Please note that this class must be independent of the
// .vector-sticky-header-visible class to correctly handle situations where the
// sticky header isn't visible yet but we still need scroll padding applied
// (e.g. when the user navigates to a page with a hash fragment in the URI).
scroll-padding-top: @height-sticky-header;
// T289817 Override other sticky element offsets to ensure that other
// sticky elements (i.e. table headers) appear below the sticky header.
.mw-sticky-header-element {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
}
}