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:
bwang
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-start-blockquote: 4px @border-style-base #eaecf0;
|
||||
@padding-top-content: 0.5em;
|
||||
@padding-horizontal-content: 0.5em;
|
||||
@padding-horizontal-content: 0.75em;
|
||||
@padding-blockquote: 8px 32px;
|
||||
@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-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
|
||||
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
|
||||
@padding-horizontal-page-container-wide: unit( 40px / @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-wide: unit( 40px / @font-size-browser, em );
|
||||
|
||||
// Grid
|
||||
@grid-row-gap: 24px;
|
||||
|
|
|
|||
|
|
@ -19,11 +19,6 @@
|
|||
// https://caniuse.com/#search=align-items
|
||||
align-items: center;
|
||||
|
||||
.vector-layout-legacy & {
|
||||
margin: @margin-top-header 0 @margin-bottom-header 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#mw-sidebar-button {
|
||||
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 ) {
|
||||
// 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 {
|
||||
#mw-sidebar-button,
|
||||
.mw-logo,
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@
|
|||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
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 ) {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -73,7 +73,8 @@
|
|||
@{sidebar-toc-selector} {
|
||||
display: none;
|
||||
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
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
}
|
||||
|
|
@ -97,7 +98,7 @@
|
|||
}
|
||||
|
||||
.sidebar-toc {
|
||||
top: @height-collapsed-toc-button; // TOC button height
|
||||
margin: 0;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -107,8 +108,7 @@
|
|||
.mixin-toc-collapsed-unmoved();
|
||||
|
||||
@{sidebar-toc-selector} {
|
||||
top: ~'calc(@{height-collapsed-toc-button} + @{padding-top-content-px})'; // 44px
|
||||
left: -4px;
|
||||
left: -@icon-padding-md;
|
||||
}
|
||||
|
||||
// Collapsed to floating icon on narrow screens when below page
|
||||
|
|
@ -128,11 +128,6 @@
|
|||
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
|
||||
// when sticky header not visible and below page title
|
||||
body:not( .vector-sticky-header-visible ).vector-below-page-title& {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
// Grid layout
|
||||
//
|
||||
|
||||
@width-gutter: 20px;
|
||||
|
||||
// Makes a column span entire page
|
||||
.mixin-column-full-width() {
|
||||
grid-column: sidebar / content;
|
||||
|
|
@ -15,12 +13,6 @@
|
|||
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 {
|
||||
max-width: @max-width-content-container;
|
||||
|
||||
|
|
@ -44,16 +36,13 @@
|
|||
.mw-page-container-inner {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
|
||||
grid-template-areas: 'header header header'
|
||||
'sitenotice sitenotice sitenotice'
|
||||
'sidebar gutter content'
|
||||
'toc gutter content'
|
||||
'footer footer footer';
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
padding-left: 0;
|
||||
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
|
||||
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
|
||||
grid-template-areas: 'header header'
|
||||
'sitenotice sitenotice'
|
||||
'sidebar content'
|
||||
'toc content'
|
||||
'footer footer';
|
||||
}
|
||||
|
||||
// FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week
|
||||
|
|
@ -78,13 +67,6 @@
|
|||
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 {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
|
@ -94,7 +76,7 @@
|
|||
.mw-page-container-inner {
|
||||
/* Use of minmax is important to restrict the maximum grid column width
|
||||
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.
|
||||
@min-width-supported:
|
||||
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
|
||||
|
||||
body {
|
||||
|
|
@ -38,11 +38,14 @@ 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;
|
||||
|
||||
@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;
|
||||
|
|
@ -145,7 +148,7 @@ body {
|
|||
margin-right: 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 / 2 );
|
||||
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.
|
||||
|
|
@ -153,13 +156,13 @@ body {
|
|||
min-width: @min-width-supported;
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
padding-left: @padding-horizontal-page-container;
|
||||
padding-right: @padding-horizontal-page-container;
|
||||
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-wide;
|
||||
padding-right: @padding-horizontal-page-container-wide;
|
||||
padding-left: @padding-horizontal-page-container-desktop-wide;
|
||||
padding-right: @padding-horizontal-page-container-desktop-wide;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue