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

Fix site notice spacing 

- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing

Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
This commit is contained in:
bwang 2022-08-22 15:23:14 -05:00
parent fe3382ea74
commit 8a5962a2c7
9 changed files with 41 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/templates/skin.mustache
View File

@ -45,7 +45,9 @@
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>
</div>
<div id="siteNotice">{{{html-site-notice}}}</div>
<div class="vector-sitenotice-container">
<div id="siteNotice">{{{html-site-notice}}}</div>
</div>
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{>TableOfContentsContainer}}
<div class="mw-content-container">

3
resources/common/variables.less
View File

@ -137,6 +137,9 @@
// Sidebar
@width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px;
// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// TOC
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';

4
resources/skins.vector.styles/components/Footer.less Normal file
View File

@ -0,0 +1,4 @@
.mw-footer-container {
padding-top: 50px;
padding-bottom: 82px;
}

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

@ -12,6 +12,7 @@
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
padding: 8px 0;
// Vertical centering of header elements (IE>=11), requires Flexbox.
.flex-display();
flex-wrap: nowrap;

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

@ -3,13 +3,6 @@
@import '../layouts/screen.less';
@import './checkboxHack.less';
// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Default spacing separating the sidebar TOC from the main menu or viewport.
@margin-top-sidebar-toc: 1.5em;
// Update styling to account for TOC.
.mw-sidebar,
.sidebar-toc,
.sidebar-toc:after {
@ -28,9 +21,6 @@
.sidebar-toc,
.sidebar-toc:after {
margin-left: -@margin-start-sidebar-content;
// Use margin-top to align TOC rather than grid row gap
// Applies when the TOC sticky and when the main menu is both open and closed.
margin-top: @margin-top-sidebar-toc;
@media ( min-width: @min-width-desktop-wide ) {
margin-left: 0;
@ -44,11 +34,6 @@
background-image: none;
background-color: @background-color-secondary--modern;
@media ( min-width: @min-width-desktop ) {
// Prevent grid row gap from affecting TOC spacing when main menu is open
margin-bottom: -@grid-row-gap;
}
@media ( max-width: @max-width-tablet ) {
// Makes the sidebar full screen at lower resolutions.
width: 100%;

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

@ -9,8 +9,26 @@
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )';
@toc-subsection-toggle-icon-size: 1.834em;
.mw-table-of-contents-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
// Needed for Grid-based layout
align-self: start;
// Needed to align TOC with bottom of title
// 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em
@media ( min-width: @min-width-desktop ) {
body:not(.vector-toc-collapsed) @{selector-main-menu-closed} ~ & {
margin-top: 1.5em;
}
}
}
.sidebar-toc {
max-height: 75vh;
// Default spacing separating the sidebar TOC from the main menu or viewport.
margin-top: 1.5em;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
box-sizing: border-box;
overflow: auto;

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

@ -2,9 +2,7 @@
// Grid layout
//
@height-header: 66px;
@width-gutter: 20px;
@padding-top-footer: 50px;
// Makes a column span entire page
.mixin-column-full-width() {
@ -42,39 +40,26 @@
}
}
.mw-footer-container {
padding-top: @padding-top-footer;
padding-bottom: 82px;
}
@media ( max-width: @max-width-tablet ) {
.mw-header {
// Match header styles applied by grid-template-rows and row-gap
// when grid is disabled on lower resolutions
height: @height-header;
margin-bottom: @grid-row-gap;
}
}
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
width: 100%;
grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
grid-template-areas: 'header header header'
'sitebanner sitebanner sitebanner'
'sitenotice sitenotice sitenotice'
'sidebar gutter content'
'toc gutter content'
'footer footer footer';
row-gap: @grid-row-gap;
}
.mw-body {
padding-left: 0;
}
#siteNotice {
grid-area: sitebanner;
// FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week
.mw-page-container-inner > #siteNotice,
.vector-sitenotice-container {
grid-area: sitenotice;
}
.mw-table-of-contents-container {
@ -102,7 +87,6 @@
.mw-footer-container {
grid-area: footer;
padding-top: @padding-top-footer - @grid-row-gap;
}
}

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

@ -81,6 +81,11 @@ body {
float: right;
}
#siteNotice {
// Override core styles to ensure sufficient spacing between page content and main menu
margin: @grid-row-gap 0 !important; /* stylelint-disable-line declaration-no-important */
}
.vector-body {
position: relative;
z-index: @z-index-base;
@ -113,14 +118,6 @@ body {
}
}
.mw-table-of-contents-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
// Needed for Grid-based layout
align-self: start;
}
.parsoid-body {
padding: @padding-content;
}

1
resources/skins.vector.styles/skin.less
View File

@ -18,6 +18,7 @@
@import './components/LanguageButton.less';
@import './components/UserLinks.less';
@import './components/Header.less';
@import './components/Footer.less';
@import './components/MenuDropdown.less';
@import './components/MenuTabs.less';
@import './components/MenuPortal.less';