From 3cb6e4c505ed0477a34a18cb840e0d571596365d Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Tue, 26 Sep 2023 14:32:38 -0500
Subject: [PATCH] Add columnStart container and update grid styles

Bug: T323141
Change-Id: Id6d8736922077b26fb972b6e743cf02d048e669d
---
 includes/SkinVector22.php                     |  3 ++
 includes/templates/ColumnStart.mustache       | 16 ++++++++++
 includes/templates/skin.mustache              | 15 +---------
 .../components/TableOfContents.less           |  2 +-
 .../layouts/grid.less                         | 29 +++++++++----------
 .../layouts/toc/unpinned.less                 |  2 +-
 6 files changed, 36 insertions(+), 31 deletions(-)
 create mode 100644 includes/templates/ColumnStart.mustache

diff --git a/includes/SkinVector22.php b/includes/SkinVector22.php
index 5627392db..12b9e3024 100644
--- a/includes/SkinVector22.php
+++ b/includes/SkinVector22.php
@@ -526,6 +526,9 @@ class SkinVector22 extends SkinMustache {
 		}
 
 		return array_merge( $parentData, [
+			'is-zebra-enabled' => $featureManager->isFeatureEnabled(
+				Constants::FEATURE_ZEBRA_DESIGN
+			),
 			'is-language-in-content' => $this->isLanguagesInContent(),
 			'has-buttons-in-content-top' => $this->isLanguagesInContentAt( 'top' ) || $hasAddTopicButton,
 			'is-language-in-content-bottom' => $this->isLanguagesInContentAt( 'bottom' ),
diff --git a/includes/templates/ColumnStart.mustache b/includes/templates/ColumnStart.mustache
new file mode 100644
index 000000000..751de721c
--- /dev/null
+++ b/includes/templates/ColumnStart.mustache
@@ -0,0 +1,16 @@
+{{#is-zebra-enabled}}<div class="vector-column-start">{{/is-zebra-enabled}}
+	{{>MainMenuPinned}}
+	{{#data-toc}}
+	<input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox">
+	<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container">
+		{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
+		{{#data-toc-pinnable-container}}
+		{{>PinnableContainer/Pinned/Open}}
+			{{#is-pinned}}
+				{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
+			{{/is-pinned}}
+		{{>PinnableContainer/Close}}
+		{{/data-toc-pinnable-container}}
+	</nav>
+	{{/data-toc}}
+{{#is-zebra-enabled}}</div>{{/is-zebra-enabled}}
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index e1fb363a3..4b576d381 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -34,23 +34,10 @@
 </div>
 <div class="mw-page-container">
 	<div class="mw-page-container-inner">
-		{{>MainMenuPinned}}
 		<div class="vector-sitenotice-container">
 			<div id="siteNotice">{{{html-site-notice}}}</div>
 		</div>
-		{{#data-toc}}
-		<input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox">
-		<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container">
-			{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
-			{{#data-toc-pinnable-container}}
-			{{>PinnableContainer/Pinned/Open}}
-				{{#is-pinned}}
-					{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
-				{{/is-pinned}}
-			{{>PinnableContainer/Close}}
-			{{/data-toc-pinnable-container}}
-		</nav>
-		{{/data-toc}}
+		{{>ColumnStart}}
 		<div class="mw-content-container">
 			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 			<main id="content" class="mw-body" role="main">
diff --git a/resources/skins.vector.zebra.styles/components/TableOfContents.less b/resources/skins.vector.zebra.styles/components/TableOfContents.less
index e130d7007..a17ebd303 100644
--- a/resources/skins.vector.zebra.styles/components/TableOfContents.less
+++ b/resources/skins.vector.zebra.styles/components/TableOfContents.less
@@ -113,7 +113,7 @@
 
 &.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
 &.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
-&.vector-feature-toc-pinned-clientpref-1 .mw-page-container-inner {
+&.vector-feature-toc-pinned-clientpref-1 .vector-column-start {
 	> .vector-toc-landmark {
 		display: block;
 	}
diff --git a/resources/skins.vector.zebra.styles/layouts/grid.less b/resources/skins.vector.zebra.styles/layouts/grid.less
index aaaf991f0..523ea596a 100644
--- a/resources/skins.vector.zebra.styles/layouts/grid.less
+++ b/resources/skins.vector.zebra.styles/layouts/grid.less
@@ -6,12 +6,11 @@
 	.mw-page-container-inner {
 		display: grid;
 		column-gap: @grid-column-gap;
-		grid-template: ~'min-content min-content 1fr min-content / @{grid-template-column-desktop}';
+		grid-template: ~'min-content 1fr min-content / @{grid-template-column-desktop}';
 		// stylelint-disable-next-line stylistic/declaration-colon-space-after
 		grid-template-areas:
 			'siteNotice siteNotice'
-			'mainMenu pageContent'
-			'toc pageContent'
+			'columnStart pageContent'
 			'footer footer';
 	}
 
@@ -19,13 +18,8 @@
 		grid-area: siteNotice;
 	}
 
-	.mw-table-of-contents-container {
-		grid-area: toc;
-		overflow-anchor: none; // T330108
-	}
-
-	.vector-main-menu-container {
-		grid-area: mainMenu;
+	.vector-column-start {
+		grid-area: columnStart;
 		overflow-anchor: none; // T330108
 	}
 
@@ -67,12 +61,17 @@
 	}
 }
 
-// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
-&.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-content-container,
-&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
-&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-content-container {
-	grid-column: mainMenu / pageContent;
+// Single column grid when column start is empty (i.e. no pinned ToC or pinned main menu)
+&.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner,
+&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
+	grid-template-columns: @width-page-content;
+	// stylelint-disable-next-line stylistic/declaration-colon-space-after
+	grid-template-areas:
+		'siteNotice'
+		'pageContent'
+		'footer';
 
+	// Horizontally center content when single column
 	.mw-body {
 		justify-content: center;
 	}
diff --git a/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less b/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
index 3cf63e308..15555def1 100644
--- a/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
+++ b/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
@@ -124,7 +124,7 @@
 				z-index: @z-index-dropdown;
 			}
 
-			@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
+			@{selector-nojs-collapsed-toc-open} ~ .vector-toc-landmark .vector-toc {
 				// Hide the TOC when the button is not checked
 				display: block;
 			}