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

Simplify TOC design for pinned TOC on no js small viewports

Browse source 
Bug: T340571
Change-Id: Ie34d7d478b3a73cade9f5328439515e419692eb7
This commit is contained in:
Jan Drewniak 2023-10-16 23:31:18 -04:00
parent 1d7cf846e8
commit 8a3e24e346
10 changed files with 24 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/templates/ColumnStart.mustache
View file

@ -1,7 +1,6 @@
{{#is-zebra-enabled}}<div class="vector-column-start">{{/is-zebra-enabled}}
{{>MainMenuPinned}}
{{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox">
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}

12
includes/templates/PageTitlebar.mustache
View file

@ -4,18 +4,6 @@
}}
<header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">
{{#data-toc}}
{{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }}
<label
id="vector-toc-collapsed-button"
class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only"
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="vector-toc"
tabindex="0"
title="{{msg-vector-toc-menu-tooltip}}">
<span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span>
<span>{{msg-vector-toc-collapsible-button-label}}</span>
</label>
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}

21
resources/skins.vector.styles/components/PinnableElement.less
View file

@ -8,24 +8,3 @@
padding-right: 0;
}
}
/**
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
* elements collapse (become unpinned) at this resolution via PinnableElement.js.
* Although this is handled in JS, this rule prevents the pinned menu from
* appearing on pageload, at low resolutions, before the JS kicks in.
*
* When JS is disabled, we still want to hide the pinned containers at lower resolutions
* to fallback to the gradeC, single column layout.
*/
@media ( max-width: @max-width-tablet ) {
// .client-js and .client-nojs selectors needed to increase specificity to override gradeC.less
// Prefered to using !important as this still needs to be overridable to handle
// the anon, no-js TOC case found in layouts/toc/unpinned.less
&.client-js,
&.client-nojs {
.vector-pinned-container {
display: none;
}
}
}

17
resources/skins.vector.styles/layouts/gradeC.less
View file

@ -1,17 +0,0 @@
//
// No grid support behaviour
//
// If there is no display grid support we remove pinnable elements
// On IE11 this leaves a clean single column grid.
// To be revisited when table of contents is collapsible in which situation we should be able to
// force it as sticky.
.vector-pinned-container {
display: none;
}
@supports ( display: grid ) {
.vector-pinned-container {
display: block;
}
}

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

@ -11,8 +11,6 @@
#vector-sticky-header,
#p-lang-btn,
.vector-menu-checkbox,
// T339344
#vector-toc-collapsed-button,
.vector-limited-width-toggle,
// Hide all navigation
nav,

39
resources/skins.vector.styles/layouts/toc/unpinned.less
View file

@ -1,10 +1,7 @@
@import '../../variables.less';
@import '../../mixins.less';
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
// TOC dropdown styles
#vector-toc-collapsed-button,
.vector-sticky-header-toc,
.vector-page-titlebar-toc {
display: none;
@ -107,44 +104,16 @@
}
//
// No-JS TOC in page titlebar on narrow screens for anon users
// Applies simplified TOC styles to No-JS pinned TOC on narrow viewports
//
@media ( max-width: @max-width-tablet ) {
// Make the TOC appear in the page titlebar on small viewports
// even when the TOC location in the DOM is actually in the sidebar
// This case only happens for no-js anon users.
&.vector-feature-toc-pinned-clientpref-1 {
#vector-toc-collapsed-button {
display: block;
}
#vector-toc-pinned-container {
// Override TOC container's sticky positioning
position: relative;
.mixin-toc-unpinned();
.vector-sticky-pinned-container {
position: static;
}
.vector-toc {
display: none;
position: absolute;
top: 36px; // TOC button height
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
// @icon-padding-md so perhaps this needs to make use of the flush classes?
left: -12px;
margin-top: @padding-top-content; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base;
z-index: @z-index-dropdown;
.vector-pinnable-header,
.vector-toc-contents {
padding-left: @padding-horizontal-dropdown-menu-item;
}
}
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
// Hide the TOC when the button is not checked
display: block;
max-height: 200px;
}
}
}

2
resources/skins.vector.styles/skin.less
View file

@ -57,5 +57,3 @@
@import './print.less';
@import './layouts/print.less';
}
@import './layouts/gradeC.less';

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

@ -17,31 +17,28 @@
margin-bottom: @grid-column-gap;
// Height is viewport height - row gap above and below the container.
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
display: none;
// If there is no display grid support we remove pinnable elements
@supports ( display: grid ) {
display: block;
}
}
// Applies styles for making a pinned element sticky
.vector-sticky-pinned-container {
// Applies styles for making a pinned element sticky
position: sticky;
top: @grid-row-gap;
}
/**
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
* elements collapse (become unpinned) at this resolution via PinnableElement.js.
* Although this is handled in JS, this rule prevents the pinned menu from
* appearing on pageload, at low resolutions, before the JS kicks in.
*
* When JS is disabled, we still want to hide the pinned containers at lower resolutions
* to fallback to the gradeC, single column layout.
*/
@media ( max-width: @max-width-tablet ) {
// .client-js and .client-nojs selectors needed to increase specificity to override gradeC.less
// Prefered to using !important as this still needs to be overridable to handle
// the anon, no-js TOC case found in layouts/toc/unpinned.less
&.client-js,
&.client-nojs {
.vector-pinned-container {
display: none;
}
/**
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
* elements collapse (become unpinned) at this resolution via PinnableElement.js.
* Although this is handled in JS, this rule prevents the pinned menu from
* appearing on pageload, at low resolutions, before the JS kicks in.
*/
&.client-js .vector-pinned-container {
display: none;
}
}

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

@ -1,12 +1,3 @@
/**
* 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
* the associated label.
*/
#vector-toc-collapsed-checkbox {
display: none;
}
.vector-toc {
.vector-pinnable-header {
padding-left: @toc-list-item-padding-start;

43
resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
View file

@ -1,16 +1,6 @@
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
// TOC dropdown styles
#vector-toc-collapsed-button,
.vector-sticky-header-toc,
.vector-page-titlebar-toc {
display: none;
margin-right: 8px;
}
// TOC styles when unpinned
.mixin-toc-unpinned() {
display: block;
margin-right: 8px;
.vector-dropdown-content {
// Override default dropdown max width
@ -94,39 +84,16 @@
}
//
// No-JS TOC in page titlebar on narrow screens for anon users
// Applies simplified TOC styles to No-JS pinned TOC on narrow viewports
//
@media ( max-width: @max-width-tablet ) {
// Make the TOC appear in the page titlebar on small viewports
// even when the TOC location in the DOM is actually in the sidebar
// This case only happens for no-js anon users.
&.vector-feature-toc-pinned-clientpref-1 {
#vector-toc-collapsed-button {
display: block;
.vector-sticky-pinned-container {
position: static;
}
#vector-toc-pinned-container {
// Override TOC container's sticky positioning
position: relative;
.mixin-toc-unpinned();
}
.vector-toc {
display: none;
position: absolute;
top: 36px; // TOC button height
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
// @icon-padding-md so perhaps this needs to make use of the flush classes?
left: -12px;
margin-top: @padding-top-content; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base;
z-index: @z-index-dropdown;
}
@{selector-nojs-collapsed-toc-open} ~ .vector-toc-landmark .vector-toc {
// Hide the TOC when the button is not checked
display: block;
max-height: 200px;
}
}
}