From 664b6c5cc5e940bfdc71927bb0c60b774035036e Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Thu, 2 Jun 2022 15:09:28 -0700
Subject: [PATCH] [Grid] Vector 2022 layout uses CSS grid

It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
---
 bundlesize.config.json                        |  2 +-
 includes/templates/skin.mustache              |  2 +-
 .../skins.vector.styles/layouts/gradeC.less   | 17 +++++
 .../skins.vector.styles/layouts/grid.less     | 63 +++++++++++++++++++
 .../skins.vector.styles/layouts/screen.less   |  2 +
 resources/skins.vector.styles/skin.less       |  2 +
 6 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 resources/skins.vector.styles/layouts/gradeC.less
 create mode 100644 resources/skins.vector.styles/layouts/grid.less

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 80a489c2..f34ee558 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "10.7 kB"
+		"maxSize": "11.0 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 6d5d9f36..dba0515f 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -43,7 +43,7 @@
 
 {{>Header}}
 
-<div class="mw-workspace-container">
+<div class="mw-workspace-container vector-sidebar-container">
 	<div id="mw-navigation">
 		{{^is-title-above-tabs}}
 			{{>ArticleToolbar}}
diff --git a/resources/skins.vector.styles/layouts/gradeC.less b/resources/skins.vector.styles/layouts/gradeC.less
new file mode 100644
index 00000000..87b53db4
--- /dev/null
+++ b/resources/skins.vector.styles/layouts/gradeC.less
@@ -0,0 +1,17 @@
+//
+// No grid support behaviour
+//
+
+// If there is no display grid support we remove the table of contents
+// On IE11 this leaves a clean single column grid.
+// To be revisited when table of contents is collapsible in which situation we should be able to
+// force it as sticky.
+.vector-layout-grid .mw-table-of-contents-container {
+	display: none;
+}
+
+@supports ( display: grid ) {
+	.vector-layout-grid .mw-table-of-contents-container {
+		display: block;
+	}
+}
diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less
new file mode 100644
index 00000000..837b0ebc
--- /dev/null
+++ b/resources/skins.vector.styles/layouts/grid.less
@@ -0,0 +1,63 @@
+//
+// Grid layout
+//
+
+.vector-layout-grid {
+	@media ( max-width: @width-breakpoint-tablet ) {
+		.mw-header {
+			// Should match grid-template-rows definition below.
+			height: 66px;
+			// Should match row-gap below.
+			margin-bottom: 24px;
+		}
+	}
+
+	@media ( min-width: @width-breakpoint-tablet ) {
+		.mw-page-container-inner {
+			display: grid;
+			width: 100%;
+			grid-template: ~'66px auto 1fr / 232px 20px minmax(0, 1fr)';
+			grid-template-areas: 'header header header'
+				'sidebar gutter content'
+				'sidebar gutter footer';
+			row-gap: 24px;
+		}
+
+		.mw-body {
+			padding-left: 0;
+		}
+
+		.mw-header {
+			grid-area: header;
+		}
+
+		.vector-sidebar-container {
+			grid-area: sidebar;
+		}
+
+		.mw-content-container {
+			grid-area: content;
+		}
+
+		.mw-footer-container {
+			grid-area: footer;
+		}
+	}
+
+	@media ( min-width: @width-breakpoint-desktop ) {
+		.mw-page-container-inner {
+			grid-template-columns: ~'284px 20px 1fr';
+		}
+	}
+
+	/* Special handling for sidebar when table of contents is visible */
+	@media ( max-width: @width-breakpoint-desktop ) {
+		@{selector-workspace-container-sidebar-closed} {
+			display: none;
+
+			& + .mw-content-container {
+				grid-column: sidebar / content;
+			}
+		}
+	}
+}
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index 36f5a85f..ddd0d428 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -415,3 +415,5 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
 		}
 	}
 }
+
+@import 'grid.less';
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index d0511636..f92d0e77 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -30,3 +30,5 @@
 @media print {
 	@import './layouts/print.less';
 }
+
+@import './layouts/gradeC.less';