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

Update naming convention for TOC

Browse source 
Deploys vector-feature-toc-pinned-enabled/vector-toc-pinned-disabled additions to CSS.

Bug: T325032
Change-Id: Ifa9a33ad686080a8b630ecead3fafed1eddd7e2b
This commit is contained in:
ksarabia 2023-02-16 17:55:58 -06:00 committed by Kimberly Sarabia
parent 71c5607908
commit e057a46d45
6 changed files with 53 additions and 13 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": "11.5 kB"
"maxSize": "12 kB"
},
{
"resourceModule": "skins.vector.legacy.js",

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

@ -164,7 +164,9 @@
// @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.
// FIXME: Remove the following line containing '.vector-toc-pinned #vector-toc-pinned-container' after line 169 has been in prod for a week.
.vector-toc-pinned #vector-toc-pinned-container,
&.vector-feature-toc-pinned-enabled #vector-toc-pinned-container,
&.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark,
.mw-sticky-header-element,
.charts-stickyhead th {

14
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -150,9 +150,21 @@
.client-js {
@media ( min-width: @min-width-desktop ) {
/**
* FIXME: Remove the following line containing '.vector-toc-unpinned' after line 157 has been in prod for a week.
*/
.vector-toc-unpinned.vector-sticky-header-visible .vector-sticky-header .vector-toc-landmark,
&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible .vector-sticky-header .vector-toc-landmark,
/**
* FIXME: Remove the following line containing '.vector-toc-unpinned' after line 162 has been in prod for a week.
*/
.vector-toc-unpinned:not( .vector-sticky-header-visible ) .vector-page-titlebar .vector-toc-landmark,
.vector-toc-pinned .mw-table-of-contents-container.vector-toc-landmark {
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) .vector-page-titlebar .vector-toc-landmark,
/**
* FIXME: Remove the following line containing '.vector-toc-pinned' after line 167 has been in prod for a week.
*/
.vector-toc-pinned .mw-table-of-contents-container.vector-toc-landmark,
&.vector-feature-toc-pinned-enabled .mw-table-of-contents-container.vector-toc-landmark {
display: block;
}
}

24
resources/skins.vector.styles/components/TableOfContentsPinned.less
View file

@ -9,7 +9,9 @@
@media ( min-width: @min-width-desktop ) {
#mw-panel-toc {
.vector-toc-pinned & {
// FIXME: Remove the following line containing '.vector-toc-pinned' after line 14 has been in prod for a week.
.vector-toc-pinned &,
.vector-feature-toc-pinned-enabled & {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
@ -19,12 +21,16 @@
contain: paint;
}
.vector-feature-page-tools-disabled .vector-toc-pinned & {
// FIXME: Remove the following line containing '.vector-toc-pinned' after line 26 has been in prod for a week.
.vector-feature-page-tools-disabled .vector-toc-pinned &,
.vector-feature-page-tools-disabled.vector-feature-toc-pinned-enabled & {
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -27px;
}
.vector-feature-page-tools-enabled .vector-toc-pinned & {
// FIXME: Remove the following line containing '.vector-toc-pinned' after line 33 has been in prod for a week.
.vector-feature-page-tools-enabled .vector-toc-pinned &,
.vector-feature-page-tools-enabled.vector-feature-toc-pinned-enabled & {
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
}
@ -35,17 +41,23 @@
position: sticky;
top: 0;
.vector-toc-pinned & {
// FIXME: Remove the following line containing '.vector-toc-pinned &' after line 46 has been in prod for a week.
.vector-toc-pinned &,
.vector-feature-toc-pinned-enabled & {
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
.vector-feature-page-tools-disabled .vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
// FIXME: Remove the following line containing '.vector-toc-pinned' after line 53 has been in prod for a week.
.vector-feature-page-tools-disabled .vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
.vector-feature-page-tools-disabled.vector-feature-toc-pinned-enabled @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
// Needed to align TOC with bottom of title.
margin-top: @margin-top-pinned-toc;
}
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned & {
// FIXME: Remove the following line containing '.vector-toc-pinned' after line 60 has been in prod for a week.
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned &,
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled & {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}

12
resources/skins.vector.styles/components/TableOfContentsUnpinned.less
View file

@ -97,7 +97,9 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
//
// TOC in page titlebar
//
.vector-toc-unpinned:not( .vector-sticky-header-visible ) {
// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 102 has been in prod for a week.
.vector-toc-unpinned:not( .vector-sticky-header-visible ),
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) {
.vector-page-titlebar-toc {
.mixin-toc-unpinned();
}
@ -106,7 +108,9 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
//
// TOC in page titlebar below page title
//
.vector-toc-unpinned:not( .vector-sticky-header-visible ).vector-below-page-title {
// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 113 has been in prod for a week.
.vector-toc-unpinned:not( .vector-sticky-header-visible ).vector-below-page-title,
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ).vector-below-page-title {
.vector-page-titlebar-toc {
.mixin-toc-below-page-title();
}
@ -115,7 +119,9 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
//
// TOC in sticky header
//
.vector-toc-unpinned.vector-sticky-header-visible {
// FIXME: Remove the following line containing '.vector-toc-unpinned' after line 124 has been in prod for a week.
.vector-toc-unpinned.vector-sticky-header-visible,
&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible {
.vector-sticky-header-toc {
.mixin-toc-unpinned();
}

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

@ -112,7 +112,11 @@
.vector-feature-page-tools-disabled {
@{selector-sidebar-no-toc-sidebar-closed},
.vector-toc-unpinned @{selector-main-menu-closed} {
/**
* FIXME: Remove the following line containing '.vector-toc-unpinned' after line 117 has been in prod for a week.
*/
.vector-toc-unpinned @{selector-main-menu-closed},
&.vector-feature-toc-pinned-disabled @{selector-main-menu-closed} {
& ~ .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
@ -125,7 +129,11 @@
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-page-tools-enabled {
&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
&.vector-feature-main-menu-pinned-disabled .vector-toc-unpinned .mw-content-container {
/**
* FIXME: Remove the following line containing '.vector-toc-unpinned' after line 134 has been in prod for a week.
*/
&.vector-feature-main-menu-pinned-disabled .vector-toc-unpinned .mw-content-container,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-disabled .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;