jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modify the sticky header offset styles 

- Prevents the ToC in the sidebar from jumping down when the sticky
  header becomes visible
- Removes the `.sticky-header-element` class from the ToC since that
  only modifies the elements position when the sticky header becomes
  visible (whereas in this case, it should be modified when the sticky
  header is enabled, before it's visible).

Bug: T314330
Change-Id: Ic6f50b8dc4f1507d875825d23eb44c24a998eaf7
This commit is contained in:
Jan Drewniak 2022-09-16 07:11:25 -04:00
parent 1352035534
commit 06c243da35
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/templates/TableOfContentsContainer.mustache
View File

@ -1,7 +1,7 @@
<div class="mw-table-of-contents-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc}}
<div class="vector-sticky-toc-container mw-sticky-header-element">
<div class="vector-sticky-toc-container">
{{>TableOfContents}}
</div>
{{/data-toc}}

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

@ -157,17 +157,20 @@
opacity: 1;
transform: translateY( 0 );
}
}
// T289817 Override other sticky element offsets to ensure that other
// sticky elements (i.e. table headers) appear below the sticky header.
//
// @stable See the Integration notes for developers section at
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
.mw-sticky-header-element,
.charts-stickyhead th {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
// - T314330 `.vector-toc-not-collapsed .vector-sticky-toc-container`
// Prevent ToC from jumping when sticky header is enabled.
// - T289817 `.mw-sticky-header-element` provides an API for template developers
// to make their templates compatible with the Vector 2022 sticky header.
// @stable See the Integration notes for developers section at
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
// - `.charts-stickyhead th` makes chart and table headers appear below the sticky header.
.vector-toc-not-collapsed .vector-sticky-toc-container,
.mw-sticky-header-element,
.charts-stickyhead th {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
}
}