From 7c172531c2bbb1572dc064e62ccfa2d47ac90f4e Mon Sep 17 00:00:00 2001 From: bwang Date: Thu, 15 Sep 2022 13:53:18 -0500 Subject: [PATCH] Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles Visual changes: - Footer text and border is aligned with header icons - Main page content has no padding, slightly wider on certain pages/viewports Bug: T317573 Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca --- resources/common/variables.less | 11 ++++---- .../components/Footer.less | 5 ++++ .../components/Header.less | 9 +++--- .../components/Sidebar.less | 14 +--------- .../components/StickyHeader.less | 17 ++++++++--- .../components/TableOfContents.less | 21 ++++++++++++++ .../components/TableOfContentsCollapsed.less | 5 +--- .../skins.vector.styles/layouts/screen.less | 28 ++++++------------- 8 files changed, 59 insertions(+), 51 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index 03181c7cb..ee34f71c4 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -67,6 +67,8 @@ // Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button` @icon-padding-md: 12px; @icon-padding-md-next: 5px; +@icon-padding-md-em: unit( @icon-padding-md / @font-size-browser, em ); +@icon-padding-md-next-em: unit( @icon-padding-md-next / @font-size-browser, em ); @background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em ); @background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em ); @@ -81,7 +83,6 @@ @border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 ); @border-start-blockquote: 4px @border-style-base #eaecf0; @padding-top-content: 0.5em; -@padding-horizontal-content: 0.75em; @padding-blockquote: 8px 32px; // T311311 Match VE toolbar styles @border-bottom-tabs: @border-width-base @border-style-base @colorGray12; @@ -195,11 +196,11 @@ // // Layout // -@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16 -@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16 +@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16 +@max-width-content-container: unit( 960px / @font-size-browser, em ); // T305069 - 60em @ 16 @padding-horizontal-page-container: unit( 24px / @font-size-browser, em ); -@padding-horizontal-page-container-desktop: unit( 32px / @font-size-browser, em ); -@padding-horizontal-page-container-desktop-wide: unit( 40px / @font-size-browser, em ); +@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em ); +@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em ); // Grid @grid-row-gap: 24px; diff --git a/resources/skins.vector.styles/components/Footer.less b/resources/skins.vector.styles/components/Footer.less index 254e28f53..83b1566e3 100644 --- a/resources/skins.vector.styles/components/Footer.less +++ b/resources/skins.vector.styles/components/Footer.less @@ -1,3 +1,8 @@ +.mw-footer { + border-top: @border-base; + padding: 0.75em 0; +} + .mw-footer-container { padding-top: 50px; padding-bottom: 82px; diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 573c5e9f2..07f534330 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -14,6 +14,10 @@ // A min-height is set to account for projects where no icon is set. min-height: @height-logo-icon; padding: 8px 0; + // T315261 Align header icon buttons with main content + margin: 0; + .mixin-vector-flush-left-margin-left(); + .mixin-vector-flush-right-margin-right(); // Vertical centering of header elements (IE>=11), requires Flexbox. .flex-display(); flex-wrap: nowrap; @@ -53,11 +57,6 @@ } @media ( max-width: @max-width-tablet ) { - // T315261 Align header icon buttons with main content - margin: 0; - .mixin-vector-flush-left-margin-left(); - .mixin-vector-flush-right-margin-right(); - /** * Toggles the visibility of the search box at lower resolutions. */ diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index 970c2bd71..05d67c845 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -13,23 +13,11 @@ // T305069 Layout adjustments of sidebar elements // Align the left edge of main menu with the main menu button. width: @width-sidebar-px; - margin-left: 0; + .mixin-vector-flush-left-margin-left(); // Align the left edge of main menu with the main menu button icon. @media ( min-width: @min-width-desktop-wide ) { width: @width-sidebar-px-wide; - .mixin-vector-flush-right-margin-left(); - } -} - -.sidebar-toc, -.sidebar-toc:after { - // T312156 Update TOC spacing after removing background color - // Align the left edge of the TOC text with the main menu button icon. - .mixin-vector-flush-left-margin-left(); - - @media ( min-width: @min-width-desktop-wide ) { - // Align the TOC subsection toggle button icon with the main menu button icon. margin-left: 0; } } diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index d8e521837..7f9b1fba5 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -6,6 +6,7 @@ .vector-sticky-header { width: 100%; + max-width: @max-width-page-container; height: @height-sticky-header; position: fixed; top: 0; @@ -20,12 +21,20 @@ border-bottom: @border-width-base @border-style-base @colorGray14; justify-content: space-between; box-sizing: border-box; - padding: 6px @padding-horizontal-page-container-desktop; - max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop * 2 ); + + // T317573 Account for icon padding, align with header icons + padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-em); @media ( min-width: @min-width-desktop-wide ) { - padding: 6px @padding-horizontal-page-container-desktop-wide; - max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); + padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-em); + } + + .vector-feature-visual-enhancement-next-enabled & { + padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-next-em); + + @media ( min-width: @min-width-desktop-wide ) { + padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-next-em); + } } // Hide sticky header until visible class is applied to the body diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 6b0b9c8f7..ec052f1c6 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -35,6 +35,27 @@ } } +.sidebar-toc, +.sidebar-toc:after { + // T312156 Update TOC spacing after removing background color + // Align the left edge of the TOC text with the main menu button icon. + margin-left: -@sidebar-toc-left-padding; + + @media ( min-width: @min-width-desktop-wide ) { + // Align the TOC subsection toggle button icon with the main menu button icon. + margin-left: -@icon-padding-md; + } + + .vector-feature-visual-enhancement-next-enabled & { + margin-left: -@sidebar-toc-left-padding-next; + + @media ( min-width: @min-width-desktop-wide ) { + // Align the TOC subsection toggle button icon with the main menu button icon. + margin-left: -@icon-padding-md-next; + } + } +} + .sidebar-toc { max-height: 75vh; padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding; diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index d867a0fe0..af34bebf6 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -92,6 +92,7 @@ display: none; position: absolute; top: @height-collapsed-toc-button; // TOC button height + .mixin-vector-flush-left-left(); margin-top: @padding-top-content-px; // 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; @@ -125,10 +126,6 @@ // .mixin-toc-collapsed-header(); - .sidebar-toc { - .mixin-vector-flush-left-left(); - } - // // Collapsed to floating button on narrow screens when below page title // diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 856728a35..99270f021 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -14,16 +14,13 @@ // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them // see T259331. -@padding-content: @padding-top-content @padding-horizontal-content 1.5em; +@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 ) - - ( 2 * @padding-horizontal-page-container-desktop-wide ); -// 31.25em - 3.75em = 27.5em @ 16 +@min-width-supported: unit( 500px / @font-size-browser, em ); body { background-color: @background-color-secondary--modern; @@ -38,14 +35,9 @@ body { } .mw-body { + // T315261 Remove horizontal padding, rely on .mw-page-container padding instead padding: @padding-content; - @media ( max-width: @max-width-tablet ) { - // T315261 Remove horizontal padding, rely on .mw-page-container padding instead - padding-left: 0; - padding-right: 0; - } - .firstHeading { /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ overflow: visible; @@ -111,11 +103,6 @@ body { padding: @padding-content; } -.mw-footer { - border-top: @border-base; - padding: 0.75em; -} - // Container logic. .mw-page-container { // Setting position and z-index is important as it allows overlays appended to the body tag @@ -124,6 +111,10 @@ body { position: relative; z-index: 0; 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; // 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%; @@ -133,10 +124,7 @@ body { // 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; - // 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; + box-sizing: border-box; @media ( min-width: @min-width-desktop ) { padding-left: @padding-horizontal-page-container-desktop;