Collapse ToC into page title at narrow view ports with CSS/template changes only

Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5

i18n/en.json

@@ -43,6 +43,7 @@
 	"vector-anon-user-menu-pages-learn": "learn more",
 	"vector-anon-user-menu-pages-label": "Learn more about editing",
 	"vector-main-menu-tooltip": "Main menu",
+	"vector-toc-menu-tooltip": "Table of Contents",
 	"vector-article-tools-nav-label": "Tools",
 	"vector-site-nav-label": "Site",
 	"vector-2022-prefs-talkpage": "[[mw:Talk:Reading/Web/Desktop_Improvements|Discussion]]",

i18n/qqq.json

@@ -58,6 +58,7 @@
 	"vector-anon-user-menu-pages-learn": "Lowercase text of link that goes to Help:Introduction and helps the user learn more about editing",
 	"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",
 	"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
+	"vector-toc-menu-tooltip": "Used as title attribute for table of contents icon on hover.",
 	"vector-article-tools-nav-label": "Accessible label for the article tools nav landmark",
 	"vector-site-nav-label": "Accessible label for site (main menu) nav landmark",
 	"vector-2022-prefs-talkpage": "Link to the desktop improvements project talk page which is shown before the preview link in skin preferences. See T307113 for more information.",

includes/templates/ContentHeader.mustache

@@ -13,5 +13,18 @@
         {{>Indicators}}
     {{/is-language-in-content-top}}
 
+	{{#data-toc}}
+	<label
+		id="vector-toc-collapsed-button"
+		class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet mw-checkbox-hack-button"
+		for="vector-toc-collapsed-checkbox"
+		role="button"
+		aria-controls="toc-toggle-list"
+		data-event-name="vector.toc-toggle-list"
+		tabindex="0"
+		title="{{msg-vector-toc-menu-tooltip}}"
+		style="display: none">
+	</label>
+	{{/data-toc}}
     {{{html-title-heading}}}
-</header>
+</header>

includes/templates/TableOfContentsContainer.mustache

@@ -1,3 +1,9 @@
+{{#data-toc}}
+<input
+	type="checkbox"
+	id="vector-toc-collapsed-checkbox"
+	class="mw-checkbox-hack-checkbox">
+{{/data-toc}}
 <div class="mw-table-of-contents-container mw-sticky-header-element">
 	{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
 </div>

resources/common/variables.less

@@ -115,6 +115,7 @@
 @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
 
 // Sidebar
+@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
 @width-sidebar-px: 220;
 @width-sidebar-px-wide: 244;
 @margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );

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

@@ -140,7 +140,6 @@
 
 		// T289817 Override other sticky element offsets to ensure that other
 		// sticky elements (i.e. table headers) appear below the sticky header.
-		.mw-sticky-header-element,
 		.charts-stickyhead th {
 			/* stylelint-disable-next-line declaration-no-important */
 			top: @height-sticky-header !important;

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

@@ -0,0 +1,76 @@
+@import '../../common/variables.less';
+
+#vector-toc-collapsed-button {
+	display: none;
+}
+
+@media ( max-width: @width-breakpoint-desktop ) {
+	#vector-toc-collapsed-button,
+	.sidebar-toc {
+		z-index: @z-index-menu;
+	}
+
+	#vector-toc-collapsed-button {
+		// Temporary !important needed while style attribute is present in HTML.
+		// This is because new HTML can be loaded with old CSS.
+		/* stylelint-disable-next-line declaration-no-important */
+		display: block !important;
+		float: left;
+		// Reduce padding to fit with page title
+		padding: 7px 10px 7px 10px;
+
+		// Override background color for when the TOC is overlaps content
+		// as a sticky element when the page is scrolled down.
+		background-color: @background-color-base;
+
+		&:hover,
+		&:active {
+			background-color: @colorGray15;
+		}
+	}
+
+	.mw-table-of-contents-container {
+		top: 0;
+	}
+
+	.sidebar-toc {
+		position: absolute;
+		top: 44px;
+		left: 8px;
+		// !important needed to override rules in Sidebar.less
+		/* stylelint-disable-next-line declaration-no-important */
+		margin-top: 0 !important;
+
+		// Dropdown styles
+		background-color: @color-base--inverted;
+		border: @border-width-base @border-style-base @border-color-base;
+
+		// Remove TOC fade
+		&:after {
+			display: none;
+		}
+	}
+
+	#vector-toc-collapsed-checkbox:checked ~ .mw-table-of-contents-container {
+		position: relative;
+		clear: none;
+
+		.sidebar-toc {
+			display: block;
+		}
+	}
+
+	@{selector-checkbox-hack} {
+		.sidebar-toc {
+			left: 32px;
+		}
+	}
+}
+
+@media ( max-width: @width-breakpoint-tablet ) {
+	@{selector-checkbox-hack} {
+		.sidebar-toc {
+			left: 8px;
+		}
+	}
+}

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

@@ -203,6 +203,14 @@ body {
 	}
 }
 
+@media ( min-width: @width-breakpoint-tablet ) {
+	// T289817 Override other sticky element offsets to ensure that other
+	// sticky elements (i.e. table headers) appear below the sticky header.
+	.mw-table-of-contents-container {
+		top: @height-sticky-header;
+	}
+}
+
 .parsoid-body {
 	padding: @padding-content;
 }

resources/skins.vector.styles/skin.less

@@ -21,6 +21,7 @@
 	@import './components/MenuTabs.less';
 	@import './components/StickyHeader.less';
 	@import './components/TableOfContents.less';
+	@import './components/TableOfContentsCollapsed.less';
 }
 
 @media all {

skin.json

@@ -285,7 +285,8 @@
 				"logOut",
 				"imageGallery",
 				"userGroup",
-				"expand"
+				"expand",
+				"listBullet"
 			]
 		},
 		"skins.vector.es6": {