From f92e40152a525c6d3e7090818a67f97a09f7bd1e Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 7 Jul 2020 13:21:48 -0700
Subject: [PATCH] Print: Add layout print styles on Ctrl+p and ElectronPdf

Bug: T253842
Change-Id: Ia7104a30a37a13cbeb6cfa4bdf1ee50ee677a87a
---
 bundlesize.config.json                        |  2 +-
 .../skins.vector.styles/layout-print.less     | 33 +++++++++++++++++++
 resources/skins.vector.styles/skin.less       |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 resources/skins.vector.styles/layout-print.less

diff --git a/bundlesize.config.json b/bundlesize.config.json
index fcc3f71..e14d7ab 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "8.5 kB"
+		"maxSize": "8.6 kB"
 	},
 	{
 		"resourceModule": "skins.vector.icons",
diff --git a/resources/skins.vector.styles/layout-print.less b/resources/skins.vector.styles/layout-print.less
new file mode 100644
index 0000000..fdb1702
--- /dev/null
+++ b/resources/skins.vector.styles/layout-print.less
@@ -0,0 +1,33 @@
+@import 'mediawiki.mixins.less';
+
+/**
+ * Print styles require Flexbox to be optimized for print.
+ * For browsers without Flexbox, the header will appear at the bottom of
+ * the page which is judged as acceptable.
+ * This deviates a little from the browser compability chart, with the understanding
+ * that printing accounts for a small percentage of our traffic and browsers which don't
+ * support Flexbox are an even smaller fragment.
+ */
+.mw-page-container-inner {
+	.flex-display();
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.mw-page-container-inner > * {
+	width: 100%;
+}
+
+#mw-sidebar-checkbox,
+.mw-header > *:not( .mw-logo ) {
+	display: none;
+}
+
+// Header
+.mw-header {
+	order: 1;
+}
+
+.mw-workspace-container {
+	order: 2;
+}
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index f52ed33..9f865dc 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -34,4 +34,5 @@
 
 @media print {
 	@import 'common/print.less';
+	@import 'layout-print.less';
 }