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

[Zebra] Unify ToC & menu scroll behaviour

Browse source 
- Refactor the TOC toggle button position
- Move the TOC/pinnable scrollable element from
  `.vector-pinnable-element` to `.vector-pinned-container`
  and `.vector-dropdown-content`.
- Applies The Fade™️, as well as a vh max-height, to both
  pinned menus and dropdowns.

Changes the way The Fade™️ is positioned by using
position:sticky so that it can be applied to
dropdowns, sidebar menus as well as all ToC permutations.

Bug: T335155
Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
This commit is contained in:
Jan Drewniak 2023-05-03 11:53:54 -04:00
parent 01664af716
commit 036e1295ec
7 changed files with 51 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/skins.vector.zebra.styles/components/Dropdown.less
View file

@ -17,6 +17,8 @@
*/
.vector-dropdown .vector-dropdown-content {
.mixin-vector-dropdown-menu();
.mixin-vector-scrollable-with-fade();
max-height: 75vh;
}
.vector-pinnable-element .vector-menu-heading {

37
resources/skins.vector.zebra.styles/components/PinnableElement.less
View file

@ -10,41 +10,20 @@
.vector-pinned-container {
.mixin-vector-content-box();
.mixin-vector-scrollable-with-fade();
// Border-box changes the height calculation.
box-sizing: border-box;
padding: @padding-vertical-dropdown-menu @padding-horizontal-dropdown-menu;
margin-bottom: @grid-column-gap;
// Height is viewport height - row gap above and below the container.
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
}
// Applies styles for making a pinned element sticky
// Mixin should be applied to the container element of `.vector-pinned-container`;
.vector-sticky-pinned-container {
height: 100%;
.vector-pinned-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: @grid-row-gap;
}
.vector-pinnable-element {
max-height: ~'calc( 100vh - @{grid-row-gap} - @{padding-vertical-dropdown-menu} - @{padding-vertical-dropdown-menu} - @{grid-row-gap} )';
overflow-y: auto;
&::after {
content: '';
display: block;
position: absolute;
// Offset position to account for menu borders.
bottom: @border-width-base;
// Offset to account for border radius.
left: @border-radius-content-box;
right: @border-radius-content-box;
height: @height-scroll-indicator;
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
background-repeat: no-repeat;
background-position: -12px; // T311436 Hacky way to prevent the fade from covering the scrollbar
pointer-events: none; // Make the link below the fade clickable
}
}
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: @grid-row-gap;
}
/**

12
resources/skins.vector.zebra.styles/components/StickyHeader.less
View file

@ -148,14 +148,12 @@
transform: translateY( 0 );
}
.vector-sticky-pinned-container {
.vector-pinned-container {
top: ~'calc( @{height-header} + @{grid-row-gap})';
}
.vector-pinned-container {
max-height: ~'calc( 100vh - @{height-header} - (@{grid-row-gap} * 2) )';
}
.vector-pinnable-element {
max-height: ~'calc( 100vh - @{height-header} - @{grid-row-gap} - @{padding-vertical-dropdown-menu} - @{padding-vertical-dropdown-menu} - @{grid-row-gap} )';
}
.vector-sticky-pinned-container {
top: ~'calc( @{height-header} + @{grid-row-gap})';
}
// - T289817 `.mw-sticky-header-element` provides an API for template developers

46
resources/skins.vector.zebra.styles/components/TableOfContents.less
View file

@ -1,5 +1,3 @@
@import '../../common/variables.less';
/**
* Checkbox hack used by collapsed TOC on narrow viewports for no JS users.
* Although it's display:none, the :checked state is still affected when clicking
@ -10,18 +8,6 @@
}
.vector-toc {
max-height: 75vh;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
background-color: @background-color-page-container;
font-size: @font-size-base;
.vector-pinnable-header-label {
// Override heading element styles in elements.less
overflow: unset;
}
.vector-toc-numb {
display: none;
}
@ -29,23 +15,22 @@
.vector-toc-toggle {
// For no-js users, toggling is disabled and icon is hidden
display: none;
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{size-toc-subsection-toggle-icon} - 1px )'; // leaves 6px between icon + text
width: @size-toc-subsection-toggle-icon; // ~22px @ 12
height: @size-toc-subsection-toggle-icon;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
width: @size-toc-subsection-toggle;
height: @size-toc-subsection-toggle;
// Changes the size of the icon background image
font-size: @size-toc-subsection-toggle-icon;
transition: @transition-duration-base;
color: transparent;
position: absolute;
left: -@size-toc-subsection-toggle/2;
// Visual centering.
top: 2px;
cursor: pointer;
// Vertically center the icon with the text
margin-top: 2px;
}
.vector-toc-link {
display: block;
word-break: break-word;
color: @color-link;
display: block;
}
// Highlight and bold active sections, active top sections that are unexpanded
@ -61,7 +46,7 @@
.vector-toc-text {
// Increase width to prevent line wrapping due to bold text
// Avoid applying on link element to avoid focus indicator changing size
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu-item} )';
width: ~'calc( 100% + @{padding-horizontal-dropdown-menu} )';
}
}
}
@ -83,19 +68,10 @@
}
.vector-toc-list-item {
display: block;
position: relative;
list-style-type: none;
padding-left: 8px;
padding-left: @toc-list-item-padding-left;
margin: 0;
&.vector-toc-level-1 {
padding-left: 0;
}
a {
font-size: inherit;
}
}
}

9
resources/skins.vector.zebra.styles/layouts/toc/pinned.less
View file

@ -12,12 +12,3 @@
// That's why the negative margins have to be applied here, instead of on #vector-toc.
contain: paint;
}
// TODO: Alternative toggle positioning - this margin can be removed if:
// 1. overflow-x:hidden is removed from .vector-toc
// 2. toggle is moved to left:-togggleWidth
// 3. padding-left: @togggleWidth here.
.vector-toc {
padding-left: 30px;
margin-left: -20px;
}

20
resources/skins.vector.zebra.styles/mixins.less
View file

@ -85,3 +85,23 @@
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}
.mixin-vector-scrollable-with-fade() {
overflow-y: auto;
&::after {
content: '';
display: block;
position: sticky;
bottom: 0;
left: 0;
right: 0;
width: ~'calc( 100% + @{padding-vertical-dropdown-menu} * 2 )';
height: @padding-vertical-dropdown-menu;
margin-top: -@padding-vertical-dropdown-menu;
transform: translate( -@padding-vertical-dropdown-menu, @padding-vertical-dropdown-menu );
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
background-repeat: no-repeat;
pointer-events: none; // Make the link below the fade clickable
}
}

17
resources/skins.vector.zebra.styles/variables.less
View file

@ -109,22 +109,15 @@
// Dropdowns & menus
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
@padding-horizontal-dropdown-menu: 20px;
@padding-vertical-dropdown-menu: 20px;
@padding-horizontal-dropdown-menu: 16px;
@padding-vertical-dropdown-menu: 16px;
@padding-vertical-dropdown-menu-item: 6px;
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
// Scroll Indicator
@height-scroll-indicator: 30px;
// The amount of space that should be between the bottom of the viewport and the
// bottom of the scroll indicator.
@max-height-bottom-spacing-scroll-indicator: 16px;
// TOC and Page tools Pinned elements
@padding-top-pinned-element: unit( (30px - @padding-top-tabs) / @font-size-browser, em);
// TOC
@size-toc-subsection-toggle-icon: 1.834em;
@size-toc-subsection-toggle: 22px;
@size-toc-subsection-toggle-icon: 0.7rem;
@toc-list-item-padding-left: 12px;
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202