From da92ecf7cc4b19d7c534b3b90bd2592b2a0e2d55 Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Tue, 18 Apr 2023 17:57:55 -0400 Subject: [PATCH] [Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443 --- resources/common/mixins.less | 23 ++++++++ resources/common/variables.less | 4 ++ .../components/MainMenu.less | 1 - .../components/PageTitlebar.less | 3 +- .../components/PageTools.less | 48 ++++++++-------- .../skins.vector.styles/layouts/preZebra.less | 8 ++- .../skins.vector.styles/layouts/screen.less | 54 +++--------------- .../layouts/toc/pinned.less | 56 +++++++++---------- .../skins.vector.styles/layouts/zebra.less | 23 ++------ resources/skins.vector.styles/skin.less | 16 +++++- 10 files changed, 111 insertions(+), 125 deletions(-) diff --git a/resources/common/mixins.less b/resources/common/mixins.less index d8571864b..6fcdd7f31 100644 --- a/resources/common/mixins.less +++ b/resources/common/mixins.less @@ -67,3 +67,26 @@ pointer-events: none; // Make the link below the fade clickable } } + +.mixin-page-container() { + max-width: @max-width-page-container; + // Set a min-width to make explicit we do not support anything below this threshold. + // For devices too small, they should be more useable with horizontal scrolling. + // e.g. Portrait on an iPad + min-width: @min-width-supported; + margin: 0 auto; + padding-left: @padding-horizontal-page-container; + padding-right: @padding-horizontal-page-container; + background-color: @background-color-page-container; + box-sizing: border-box; + + @media ( min-width: @min-width-desktop ) { + padding-left: @padding-horizontal-page-container-desktop; + padding-right: @padding-horizontal-page-container-desktop; + } + + @media ( min-width: @min-width-desktop-wide ) { + padding-left: @padding-horizontal-page-container-desktop-wide; + padding-right: @padding-horizontal-page-container-desktop-wide; + } +} diff --git a/resources/common/variables.less b/resources/common/variables.less index 3671e6c42..746784602 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -12,6 +12,10 @@ @max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px @min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px +// Defines the minimum viewport width, at which point the layout will not get any +// smaller and will start horizontal scrolling instead. +@min-width-supported: unit( 500px / @font-size-browser, em ); + // Sizing calculation primitives. @font-size-root: 100%; @font-size-browser: 16; // Assumed browser default of `16px` diff --git a/resources/skins.vector.styles/components/MainMenu.less b/resources/skins.vector.styles/components/MainMenu.less index a111438cf..e26b52228 100644 --- a/resources/skins.vector.styles/components/MainMenu.less +++ b/resources/skins.vector.styles/components/MainMenu.less @@ -1,7 +1,6 @@ @import '../../common/variables.less'; @import '../../common/mixins.less'; @import 'mediawiki.mixins.less'; -@import '../layouts/screen.less'; // Ensure there is only 1 main menu landmark at anytime .vector-feature-main-menu-pinned-enabled .vector-header-start .vector-main-menu-landmark, diff --git a/resources/skins.vector.styles/components/PageTitlebar.less b/resources/skins.vector.styles/components/PageTitlebar.less index af93c8176..43e3bdea1 100644 --- a/resources/skins.vector.styles/components/PageTitlebar.less +++ b/resources/skins.vector.styles/components/PageTitlebar.less @@ -2,7 +2,8 @@ .vector-page-titlebar { display: flex; - + // Enabled bottom border via ::after element for Zebra update. + flex-wrap: wrap; // Ensure language button or indicators are positioned to the right even when the title is hidden justify-content: flex-end; // Use box-shadow instead of border to allow border collapsing between titlebar and toolbar diff --git a/resources/skins.vector.styles/components/PageTools.less b/resources/skins.vector.styles/components/PageTools.less index 62232f8e1..02fb65970 100644 --- a/resources/skins.vector.styles/components/PageTools.less +++ b/resources/skins.vector.styles/components/PageTools.less @@ -19,32 +19,30 @@ } } -.vector-page-tools { - #vector-page-tools-pinned-container & { - width: 140px; - // Match spacing of TOC and main menu - margin-left: @padding-horizontal-dropdown-menu-item; - max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )'; - overflow-y: auto; - box-sizing: border-box; - padding-top: @padding-top-pinned-element; - // Add fade indicator. - .mixin-vector-scroll-indicator(); - } +#vector-page-tools-pinned-container .vector-page-tools { + width: 140px; + // Match spacing of TOC and main menu + margin-left: @padding-horizontal-dropdown-menu-item; + max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )'; + overflow-y: auto; + box-sizing: border-box; + padding-top: @padding-top-pinned-element; + // Add fade indicator. + .mixin-vector-scroll-indicator(); +} - // Ensure collapsible items are visible on lower resolutions - .vector-more-collapsible-item { - display: block; +// Ensure collapsible items are visible on lower resolutions +.vector-page-tools .vector-more-collapsible-item { + display: block; - @media ( min-width: @min-width-tablet ) { - display: none; - } - } - - // Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present) - .vector-has-collapsible-items { - @media ( max-width: @max-width-mobile ) { - display: block; - } + @media ( min-width: @min-width-tablet ) { + display: none; + } +} + +// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present) +.vector-page-tools .vector-has-collapsible-items { + @media ( max-width: @max-width-mobile ) { + display: block; } } diff --git a/resources/skins.vector.styles/layouts/preZebra.less b/resources/skins.vector.styles/layouts/preZebra.less index 5cff31cfc..24e2b45b3 100644 --- a/resources/skins.vector.styles/layouts/preZebra.less +++ b/resources/skins.vector.styles/layouts/preZebra.less @@ -1,9 +1,11 @@ +@import '../../common/mixins.less'; + .vector-header-container { .mixin-page-container(); +} - .vector-feature-limited-width-disabled& { - max-width: none; - } +&.vector-feature-limited-width-disabled .vector-header-container { + max-width: none; } .vector-sticky-header-container { diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 485fdad15..8a508cff4 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -14,12 +14,6 @@ // see T259331. @padding-content: @padding-top-content 0 1.5em; -// Breakpoints - -// Defines the minimum viewport width, at which point the layout will not get any -// smaller and will start horizontal scrolling instead. -@min-width-supported: unit( 500px / @font-size-browser, em ); - html { scroll-padding-top: @scroll-padding-top; } @@ -109,30 +103,6 @@ body { padding: @padding-content; } -.mixin-page-container() { - max-width: @max-width-page-container; - // Set a min-width to make explicit we do not support anything below this threshold. - // For devices too small, they should be more useable with horizontal scrolling. - // e.g. Portrait on an iPad - min-width: @min-width-supported; - margin: 0 auto; - // Use non-zero padding to disable margin collapse. - // Be careful not to use overflow-y: scroll here (see T270146 and T271868) - padding: 0.05px @padding-horizontal-page-container; - background-color: @background-color-page-container; - box-sizing: border-box; - - @media ( min-width: @min-width-desktop ) { - padding-left: @padding-horizontal-page-container-desktop; - padding-right: @padding-horizontal-page-container-desktop; - } - - @media ( min-width: @min-width-desktop-wide ) { - padding-left: @padding-horizontal-page-container-desktop-wide; - padding-right: @padding-horizontal-page-container-desktop-wide; - } -} - // Container logic. .mw-page-container { // Setting position and z-index is important as it allows overlays appended to the body tag @@ -143,15 +113,11 @@ body { // Fill the viewport even if the content height is small. This also helps // mitigate a long sidebar overflowing the page container (T257518). min-height: 100%; + // Use non-zero padding to disable margin collapse. + // Be careful not to use overflow-y: scroll here (see T270146 and T271868) + padding-top: 0.05px; + padding-bottom: 0.05px; .mixin-page-container(); - - .vector-feature-limited-width-disabled & { - max-width: none; - } -} - -.skin--responsive .mw-page-container { - min-width: auto; } .vector-header-container { @@ -163,14 +129,10 @@ body { } } -.vector-feature-zebra-design-disabled { - @import 'preZebra.less'; +.vector-feature-limited-width-disabled .mw-page-container { + max-width: none; } -.vector-feature-zebra-design-enabled { - @import 'zebra.less'; +.skin--responsive .mw-page-container { + min-width: auto; } - -@import 'grid.less'; -@import 'toc/pinned.less'; -@import 'toc/unpinned.less'; diff --git a/resources/skins.vector.styles/layouts/toc/pinned.less b/resources/skins.vector.styles/layouts/toc/pinned.less index 12680e1d5..23592b2c1 100644 --- a/resources/skins.vector.styles/layouts/toc/pinned.less +++ b/resources/skins.vector.styles/layouts/toc/pinned.less @@ -8,43 +8,41 @@ } @media ( min-width: @min-width-desktop ) { - #mw-panel-toc { - .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 - // inside of the panel from being rendered outside of its bounding box, even when they would - // be positioned there using absolute positioning, negative margin, transforms, etc. - // That's why the negative margins have to be applied here, instead of on #vector-toc. - contain: paint; - // Align the left edge of the TOC text with the page container - margin-left: -@spacing-subsection-toggle; - } + .vector-feature-toc-pinned-enabled #mw-panel-toc { + // 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 + // inside of the panel from being rendered outside of its bounding box, even when they would + // be positioned there using absolute positioning, negative margin, transforms, etc. + // That's why the negative margins have to be applied here, instead of on #vector-toc. + contain: paint; + // Align the left edge of the TOC text with the page container + margin-left: -@spacing-subsection-toggle; } #vector-toc-pinned-container { // stylelint-disable-next-line plugin/no-unsupported-browser-features position: sticky; top: 0; + } - .vector-feature-toc-pinned-enabled & { - // Default spacing separating the sidebar TOC from the main menu. - margin-top: 1.5em; - } + .vector-feature-toc-pinned-enabled #vector-toc-pinned-container { + // Default spacing separating the sidebar TOC from the main menu. + margin-top: 1.5em; + } - .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; - } + .vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container { + // Align TOC with bottom of title when main menu is not pinned but the TOC is + margin-top: @margin-top-pinned-toc; + } - // T302076: Add fade scrollable indicator when TOC is in sidebar - // Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header - .vector-toc { - max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )'; - padding-top: @padding-top-pinned-element; - padding-left: @spacing-subsection-toggle; - padding-right: @padding-horizontal-dropdown-menu-item; - .mixin-vector-scroll-indicator(); - } + // T302076: Add fade scrollable indicator when TOC is in sidebar + // Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header + #vector-toc-pinned-container .vector-toc { + max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )'; + padding-top: @padding-top-pinned-element; + padding-left: @spacing-subsection-toggle; + padding-right: @padding-horizontal-dropdown-menu-item; + .mixin-vector-scroll-indicator(); } } diff --git a/resources/skins.vector.styles/layouts/zebra.less b/resources/skins.vector.styles/layouts/zebra.less index c78a998b6..93f819904 100644 --- a/resources/skins.vector.styles/layouts/zebra.less +++ b/resources/skins.vector.styles/layouts/zebra.less @@ -7,26 +7,11 @@ .mw-header, .vector-sticky-header { - max-width: @max-width-page-container; - padding-left: @padding-horizontal-page-container; - padding-right: @padding-horizontal-page-container; - box-sizing: border-box; - - @media ( min-width: @min-width-desktop ) { - padding-left: @padding-horizontal-page-container-desktop; - padding-right: @padding-horizontal-page-container-desktop; - } - - @media ( min-width: @min-width-desktop-wide ) { - padding-left: @padding-horizontal-page-container-desktop-wide; - padding-right: @padding-horizontal-page-container-desktop-wide; - } + .mixin-page-container(); } } -&.vector-feature-limited-width-disabled .vector-header-container { - .mw-header, - .vector-sticky-header { - max-width: none; - } +&.vector-feature-limited-width-disabled .vector-header-container .mw-header, +&.vector-feature-limited-width-disabled .vector-header-container .vector-sticky-header { + max-width: none; } diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index e16e6ef26..21d5b830f 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -3,12 +3,26 @@ * See '../common/common.less' for common screen and print Vector stylesheets. */ -@import '../common/variables.less'; @import 'mediawiki.mixins.less'; +@import '../common/variables.less'; +@import '../common/mixins.less'; + +@media screen { + .vector-feature-zebra-design-disabled { + @import './layouts/preZebra.less'; + } + + .vector-feature-zebra-design-enabled { + @import './layouts/zebra.less'; + } +} @media screen { // Layouts @import './layouts/screen.less'; + @import './layouts/grid.less'; + @import './layouts/toc/pinned.less'; + @import './layouts/toc/unpinned.less'; // Components @import './components/SearchBoxLoader.less';