Align header icon buttons and main content
Technical changes: - Increase @padding-horizontal-content to align content - Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively - Replace "gutter" grid area with column-gap - Clean up TOC styles Visual changes: - Below 1000px the header icons spacing is updated - Above 1000px the page titlebar and articlebar right space is updated Bug: T315261 Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
This commit is contained in:
parent
b0b58915d4
commit
d949621eb2
|
@ -80,7 +80,7 @@
|
||||||
@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.5em;
|
@padding-horizontal-content: 0.75em;
|
||||||
@padding-blockquote: 8px 32px;
|
@padding-blockquote: 8px 32px;
|
||||||
@border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
|
@border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
|
||||||
|
|
||||||
|
@ -201,8 +201,9 @@
|
||||||
//
|
//
|
||||||
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
|
@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-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
|
||||||
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
|
@padding-horizontal-page-container: unit( 24px / @font-size-browser, em );
|
||||||
@padding-horizontal-page-container-wide: unit( 40px / @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 );
|
||||||
|
|
||||||
// Grid
|
// Grid
|
||||||
@grid-row-gap: 24px;
|
@grid-row-gap: 24px;
|
||||||
|
|
|
@ -19,11 +19,6 @@
|
||||||
// https://caniuse.com/#search=align-items
|
// https://caniuse.com/#search=align-items
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.vector-layout-legacy & {
|
|
||||||
margin: @margin-top-header 0 @margin-bottom-header 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mw-sidebar-button {
|
#mw-sidebar-button {
|
||||||
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
||||||
}
|
}
|
||||||
|
@ -56,10 +51,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggles the visibility of the search box at lower resolutions.
|
|
||||||
*/
|
|
||||||
@media ( max-width: @max-width-tablet ) {
|
@media ( max-width: @max-width-tablet ) {
|
||||||
|
// T315261 Align header icon buttons with main content
|
||||||
|
margin: 0 -@icon-padding-md 0 -@icon-padding-md;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the visibility of the search box at lower resolutions.
|
||||||
|
*/
|
||||||
&.vector-header-search-toggled {
|
&.vector-header-search-toggled {
|
||||||
#mw-sidebar-button,
|
#mw-sidebar-button,
|
||||||
.mw-logo,
|
.mw-logo,
|
||||||
|
|
|
@ -25,12 +25,12 @@
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop ) {
|
@media ( min-width: @min-width-desktop ) {
|
||||||
padding: 6px 25px;
|
padding: 6px 25px;
|
||||||
max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
|
max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop * 2 );
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop-wide ) {
|
@media ( min-width: @min-width-desktop-wide ) {
|
||||||
padding: 6px 25px;
|
padding: 6px 25px;
|
||||||
max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
|
max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide sticky header and it's children until visible class is applied to the body
|
// Hide sticky header and it's children until visible class is applied to the body
|
||||||
|
|
|
@ -73,7 +73,8 @@
|
||||||
@{sidebar-toc-selector} {
|
@{sidebar-toc-selector} {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
top: @height-collapsed-toc-button; // TOC button height
|
||||||
|
margin: @padding-top-content-px 0 0 0; // 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;
|
||||||
}
|
}
|
||||||
|
@ -97,7 +98,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toc {
|
.sidebar-toc {
|
||||||
top: @height-collapsed-toc-button; // TOC button height
|
margin: 0;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -107,8 +108,7 @@
|
||||||
.mixin-toc-collapsed-unmoved();
|
.mixin-toc-collapsed-unmoved();
|
||||||
|
|
||||||
@{sidebar-toc-selector} {
|
@{sidebar-toc-selector} {
|
||||||
top: ~'calc(@{height-collapsed-toc-button} + @{padding-top-content-px})'; // 44px
|
left: -@icon-padding-md;
|
||||||
left: -4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Collapsed to floating icon on narrow screens when below page
|
// Collapsed to floating icon on narrow screens when below page
|
||||||
|
@ -128,11 +128,6 @@
|
||||||
grid-area: content;
|
grid-area: content;
|
||||||
}
|
}
|
||||||
|
|
||||||
@{sidebar-toc-selector} {
|
|
||||||
top: ~'calc(@{height-collapsed-toc-button} + @{padding-top-content-px})'; // 44px
|
|
||||||
left: -@icon-padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Collapsed to floating icon
|
// Collapsed to floating icon
|
||||||
// when sticky header not visible and below page title
|
// when sticky header not visible and below page title
|
||||||
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
|
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
|
||||||
|
|
|
@ -2,8 +2,6 @@
|
||||||
// Grid layout
|
// Grid layout
|
||||||
//
|
//
|
||||||
|
|
||||||
@width-gutter: 20px;
|
|
||||||
|
|
||||||
// Makes a column span entire page
|
// Makes a column span entire page
|
||||||
.mixin-column-full-width() {
|
.mixin-column-full-width() {
|
||||||
grid-column: sidebar / content;
|
grid-column: sidebar / content;
|
||||||
|
@ -15,12 +13,6 @@
|
||||||
max-width: @max-width-content-container;
|
max-width: @max-width-content-container;
|
||||||
}
|
}
|
||||||
|
|
||||||
// aligns left side of column with hamburger icon.
|
|
||||||
.mixin-column-align-width-hamburger-icon() {
|
|
||||||
// Align the content with the hamburger icon
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mw-content-container {
|
.mw-content-container {
|
||||||
max-width: @max-width-content-container;
|
max-width: @max-width-content-container;
|
||||||
|
|
||||||
|
@ -44,16 +36,13 @@
|
||||||
.mw-page-container-inner {
|
.mw-page-container-inner {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
|
||||||
grid-template-areas: 'header header header'
|
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
|
||||||
'sitenotice sitenotice sitenotice'
|
grid-template-areas: 'header header'
|
||||||
'sidebar gutter content'
|
'sitenotice sitenotice'
|
||||||
'toc gutter content'
|
'sidebar content'
|
||||||
'footer footer footer';
|
'toc content'
|
||||||
}
|
'footer footer';
|
||||||
|
|
||||||
.mw-body {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week
|
// FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week
|
||||||
|
@ -78,13 +67,6 @@
|
||||||
grid-area: content;
|
grid-area: content;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Remove padding in favor of updating the header icons itself and making mw-body spacing consistent
|
|
||||||
// This padding complicates the collapsed TOC menu styles and contributes to inconsistent spacing
|
|
||||||
// with sidebar closed, when no table of contents, align with hamburger menu
|
|
||||||
@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
|
|
||||||
.mixin-column-align-width-hamburger-icon();
|
|
||||||
}
|
|
||||||
|
|
||||||
.mw-footer-container {
|
.mw-footer-container {
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
}
|
}
|
||||||
|
@ -94,7 +76,7 @@
|
||||||
.mw-page-container-inner {
|
.mw-page-container-inner {
|
||||||
/* Use of minmax is important to restrict the maximum grid column width
|
/* Use of minmax is important to restrict the maximum grid column width
|
||||||
more information: T314756 */
|
more information: T314756 */
|
||||||
grid-template-columns: ~'284px @{width-gutter} minmax(0, 1fr)';
|
grid-template-columns: ~'284px minmax(0, 1fr)';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
// 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-wide );
|
( 2 * @padding-horizontal-page-container-desktop-wide );
|
||||||
// 31.25em - 3.75em = 27.5em @ 16
|
// 31.25em - 3.75em = 27.5em @ 16
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -38,11 +38,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body {
|
.mw-body {
|
||||||
border-top: @border-width-base @border-style-base transparent;
|
|
||||||
/* Merge the border with tabs' one (in their background image) */
|
|
||||||
margin-top: -@border-width-base;
|
|
||||||
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;
|
||||||
|
@ -145,7 +148,7 @@ body {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
// Use non-zero padding to disable margin collapse.
|
// Use non-zero padding to disable margin collapse.
|
||||||
// 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 / 2 );
|
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.
|
// 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.
|
// For devices too small, they should be more useable with horizontal scrolling.
|
||||||
|
@ -153,13 +156,13 @@ body {
|
||||||
min-width: @min-width-supported;
|
min-width: @min-width-supported;
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop ) {
|
@media ( min-width: @min-width-desktop ) {
|
||||||
padding-left: @padding-horizontal-page-container;
|
padding-left: @padding-horizontal-page-container-desktop;
|
||||||
padding-right: @padding-horizontal-page-container;
|
padding-right: @padding-horizontal-page-container-desktop;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop-wide ) {
|
@media ( min-width: @min-width-desktop-wide ) {
|
||||||
padding-left: @padding-horizontal-page-container-wide;
|
padding-left: @padding-horizontal-page-container-desktop-wide;
|
||||||
padding-right: @padding-horizontal-page-container-wide;
|
padding-right: @padding-horizontal-page-container-desktop-wide;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue