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

includes/templates/skin.mustache

@@ -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">

resources/common/variables.less

@@ -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';

resources/mediawiki.less.legacy/mediawiki.skin.variables.less

@@ -4,10 +4,23 @@
  */
 
 @import 'mediawiki.skin.defaults.less';
-@import '../mediawiki.less/mediawiki.skin.variables.less';
 
 // Set pre July 2022 colors for links (T213778).
 @color-link: #0645ad;
 @color-link--visited: #0b0080;
+@color-link--active: #faa700;
 @color-link-new: #ba0000;
 @color-link-new--visited: #a55858;
+
+// Note these colors are different from Vector 2022 for historic reasons:
+@color-link-external: #36b;
+@color-link-external--visited: #636;
+@color-link-external--active: #b63;
+
+// Body content uses the user setting in browser / the system default sans-serif font:
+// Arial on Windows, Roboto on Android.
+// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
+@font-family-sans: sans-serif;
+
+// Matches WikimediaUI Base and Codex, OOUI/wikimedia
+@border-radius-base: 2px;

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

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

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

@@ -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;

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

@@ -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%;

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

@@ -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;

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

@@ -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;
 	}
 }
 

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

@@ -72,7 +72,8 @@ body {
 	z-index: @z-index-indicators;
 }
 
-.mw-body-header {
+.mw-body-header,
+.mw-body-subheader {
 	.mixin-clearfix();
 }
 
@@ -80,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;
@@ -112,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;
 }

resources/skins.vector.styles/skin.less

@@ -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';