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

Merge "Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles"

This commit is contained in:
jenkins-bot 2022-10-05 17:06:12 +00:00 committed by Gerrit Code Review
parent 29c97d0134 7c172531c2
commit ca3fe05c5e
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` // Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
@icon-padding-md: 12px; @icon-padding-md: 12px;
@icon-padding-md-next: 5px; @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-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 ); @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-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; @border-start-blockquote: 4px @border-style-base #eaecf0;
@padding-top-content: 0.5em; @padding-top-content: 0.5em;
@padding-horizontal-content: 0.75em;
@padding-blockquote: 8px 32px; @padding-blockquote: 8px 32px;
// T311311 Match VE toolbar styles // T311311 Match VE toolbar styles
@border-bottom-tabs: @border-width-base @border-style-base @colorGray12; @border-bottom-tabs: @border-width-base @border-style-base @colorGray12;
@ -195,11 +196,11 @@
// //
// Layout // Layout
// //
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 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 ); // 60em @ 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: unit( 24px / @font-size-browser, em );
@padding-horizontal-page-container-desktop: unit( 32px / @font-size-browser, em ); @padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em );
@padding-horizontal-page-container-desktop-wide: unit( 40px / @font-size-browser, em ); @padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em );
// Grid // Grid
@grid-row-gap: 24px; @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 { .mw-footer-container {
padding-top: 50px; padding-top: 50px;
padding-bottom: 82px; 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. // A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon; min-height: @height-logo-icon;
padding: 8px 0; 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. // Vertical centering of header elements (IE>=11), requires Flexbox.
.flex-display(); .flex-display();
flex-wrap: nowrap; flex-wrap: nowrap;
@ -53,11 +57,6 @@
} }
@media ( max-width: @max-width-tablet ) { @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. * 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 // T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button. // Align the left edge of main menu with the main menu button.
width: @width-sidebar-px; 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. // Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) { @media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-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; margin-left: 0;
} }
} }

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

@ -6,6 +6,7 @@
.vector-sticky-header { .vector-sticky-header {
width: 100%; width: 100%;
max-width: @max-width-page-container;
height: @height-sticky-header; height: @height-sticky-header;
position: fixed; position: fixed;
top: 0; top: 0;
@ -20,12 +21,20 @@
border-bottom: @border-width-base @border-style-base @colorGray14; border-bottom: @border-width-base @border-style-base @colorGray14;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; 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 ) { @media ( min-width: @min-width-desktop-wide ) {
padding: 6px @padding-horizontal-page-container-desktop-wide; padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-em);
max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); }
.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 // 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 { .sidebar-toc {
max-height: 75vh; max-height: 75vh;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding; 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; display: none;
position: absolute; position: absolute;
top: @height-collapsed-toc-button; // TOC button height 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 margin-top: @padding-top-content-px; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns // FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
@ -125,10 +126,6 @@
// //
.mixin-toc-collapsed-header(); .mixin-toc-collapsed-header();
.sidebar-toc {
.mixin-vector-flush-left-left();
}
// //
// Collapsed to floating button on narrow screens when below page title // 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 // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
// see T259331. // see T259331.
@padding-content: @padding-top-content @padding-horizontal-content 1.5em; @padding-content: @padding-top-content 0 1.5em;
// Breakpoints // Breakpoints
// Defines the minimum viewport width, at which point the layout will not get any // Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead. // smaller and will start horizontal scrolling instead.
@min-width-supported: @min-width-supported: unit( 500px / @font-size-browser, em );
unit( 500px / @font-size-browser, em ) -
( 2 * @padding-horizontal-page-container-desktop-wide );
// 31.25em - 3.75em = 27.5em @ 16
body { body {
background-color: @background-color-secondary--modern; background-color: @background-color-secondary--modern;
@ -38,14 +35,9 @@ body {
} }
.mw-body { .mw-body {
// T315261 Remove horizontal padding, rely on .mw-page-container padding instead
padding: @padding-content; 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 { .firstHeading {
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
overflow: visible; overflow: visible;
@ -111,11 +103,6 @@ body {
padding: @padding-content; padding: @padding-content;
} }
.mw-footer {
border-top: @border-base;
padding: 0.75em;
}
// Container logic. // Container logic.
.mw-page-container { .mw-page-container {
// Setting position and z-index is important as it allows overlays appended to the body tag // Setting position and z-index is important as it allows overlays appended to the body tag
@ -124,6 +111,10 @@ body {
position: relative; position: relative;
z-index: 0; z-index: 0;
max-width: @max-width-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;
// Fill the viewport even if the content height is small. This also helps // Fill the viewport even if the content height is small. This also helps
// mitigate a long sidebar overflowing the page container (T257518). // mitigate a long sidebar overflowing the page container (T257518).
min-height: 100%; min-height: 100%;
@ -133,10 +124,7 @@ body {
// Be careful not to use overflow-y: scroll here (see T270146 and T271868) // Be careful not to use overflow-y: scroll here (see T270146 and T271868)
padding: 0.05px @padding-horizontal-page-container; padding: 0.05px @padding-horizontal-page-container;
background-color: @background-color-page-container; background-color: @background-color-page-container;
// Set a min-width to make explicit we do not support anything below this threshold. box-sizing: border-box;
// For devices too small, they should be more useable with horizontal scrolling.
// e.g. Portrait on an iPad
min-width: @min-width-supported;
@media ( min-width: @min-width-desktop ) { @media ( min-width: @min-width-desktop ) {
padding-left: @padding-horizontal-page-container-desktop; padding-left: @padding-horizontal-page-container-desktop;