jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
bwang 2022-09-15 13:53:18 -05:00
parent 98068d9598
commit 7c172531c2
8 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/common/variables.less
View File

@ -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;

5
resources/skins.vector.styles/components/Footer.less
View File

@ -1,3 +1,8 @@
.mw-footer {
border-top: @border-base;
padding: 0.75em 0;
}
.mw-footer-container {
padding-top: 50px;
padding-bottom: 82px;

9
resources/skins.vector.styles/components/Header.less
View File

@ -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.
*/

14
resources/skins.vector.styles/components/Sidebar.less
View File

@ -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;
}
}

17
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -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

21
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -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;

5
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -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
//

28
resources/skins.vector.styles/layouts/screen.less
View File

@ -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;