Merge "Revert "Remove grid row gap in favor of margins""

includes/templates/skin.mustache

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

resources/common/variables.less

@@ -137,9 +137,6 @@
 // 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';

resources/skins.vector.styles/components/Footer.less

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

resources/skins.vector.styles/components/Header.less

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

resources/skins.vector.styles/components/Sidebar.less

@@ -3,6 +3,13 @@
 @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 {
@@ -21,6 +28,9 @@
 .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;
@@ -34,6 +44,11 @@
 	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%;

resources/skins.vector.styles/components/TableOfContents.less

@@ -9,26 +9,8 @@
 @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;

resources/skins.vector.styles/layouts/grid.less

@@ -2,7 +2,9 @@
 // Grid layout
 //
 
+@height-header: 66px;
 @width-gutter: 20px;
+@padding-top-footer: 50px;
 
 // Makes a column span entire page
 .mixin-column-full-width() {
@@ -40,16 +42,31 @@
 	}
 }
 
+.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: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
+		grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
 		grid-template-areas: 'header header header'
 			'sitebanner sitebanner sitebanner'
 			'sidebar gutter content'
 			'toc gutter content'
 			'footer footer footer';
+		row-gap: @grid-row-gap;
 	}
 
 	.mw-body {
@@ -85,6 +102,7 @@
 
 	.mw-footer-container {
 		grid-area: footer;
+		padding-top: @padding-top-footer - @grid-row-gap;
 	}
 }
 

resources/skins.vector.styles/layouts/screen.less

@@ -80,11 +80,6 @@ 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;
@@ -119,6 +114,14 @@ 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;
 }

resources/skins.vector.styles/skin.less

@@ -18,7 +18,6 @@
 	@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';