Place language button near bottom of Main page.

In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271

includes/SkinVector.php

@@ -192,6 +192,7 @@ class SkinVector extends SkinMustache {
 		$commonSkinData = array_merge( $parentData, [
 			'page-isarticle' => (bool)$out->isArticle(),
 
+			'is-mainpage' => $title->isMainPage(),
 			// Remember that the string '0' is a valid title.
 			// From OutputPage::getPageTitle, via ::setPageTitle().
 			'html-title' => $out->getPageTitle(),

includes/templates/skin.mustache

@@ -57,7 +57,9 @@
 
 	{{#is-language-in-header}}
 	<header class="mw-body-header">
-		{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+		{{^is-mainpage}}
+			{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+		{{/is-mainpage}}
 		<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>
 			{{{html-title}}}
 		</h1>
@@ -78,6 +80,13 @@
 		{{{html-body-content}}}
 		{{{html-categories}}}
 	</div>
+
+	{{#is-mainpage}}
+	{{#is-language-in-header}}
+		{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	{{/is-language-in-header}}
+	{{/is-mainpage}}
+
 </main>
 {{{html-after-content}}}
 	</div> {{! END mw-content-container }}

resources/common/variables.less

@@ -119,6 +119,9 @@
 @width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
 @font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
 
+// language button
+@height-lang-button: unit( 32 / @font-size-browser, em );
+
 // Z-indices
 // See skinStyles/jquery.ui/jquery.ui.datepicker.css.
 // @z-index-ui-datepicker-cover: -1;

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

@@ -2,9 +2,11 @@
 @import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
-// `.mw-body-header` class can be removed when language button is the default.
-// e.g. upon removal of SkinVector::isLanguagesInHeader
-.mw-body-header .mw-portlet-lang {
+// TODO: `#p-lang-btn` Can be changed to `.mw-portlet-lang` when languages-in-header is the default.
+#p-lang-btn {
+	.box-sizing( border-box );
+	height: @height-lang-button;
+
 	.mw-ui-icon:before {
 		margin-right: 8px;
 		// Put icon on correct standard normal state color.
@@ -38,11 +40,19 @@
 		overflow: scroll;
 		border-top-width: 1px;
 
+		// Adds to the show/hide technique in MenuDropdown.less with
+		// display to prevent rendering and long scrolling on Main page
+		display: none;
+
 		li a {
 			font-size: inherit;
 		}
 	}
 
+	.vector-menu-checkbox:checked ~ .vector-menu-content {
+		display: block;
+	}
+
 	.after-portlet {
 		// ensure there is a visual separation between the language links and additional links.
 		margin-top: 10px;
@@ -51,7 +61,7 @@
 
 // Disable border-radius when dropdown menu open
 .client-nojs {
-	.mw-portlet-lang:hover .vector-menu-heading,
+	#p-lang-btn:hover .vector-menu-heading,
 	.vector-menu-checkbox:checked + .vector-menu-heading {
 		border-radius: 0;
 	}
@@ -59,7 +69,7 @@
 
 // mw-body-header class can be removed when language button is the default.
 // e.g. upon removal of SkinVector::isLanguagesInHeader
-.client-js .mw-body-header {
+.client-js #p-lang-btn {
 	// The `.mw-interlanguage-selector` is toggled off through js if the
 	// `ext.uls.interface` module is not being loaded.
 	.mw-interlanguage-selector {

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

@@ -199,16 +199,18 @@ body {
 .mw-body-header {
 	.mixin-clearfix();
 
+	// TODO: Can be changed to `.mw-portlet-lang` when langauge-in-header feature is default.
 	#p-lang-btn {
-		@height-lang-button: unit( 32 / @font-size-browser, em );
-		float: right;
-		.box-sizing( border-box );
-		height: @height-lang-button;
-		// should be vertically aligned.
+		// should be vertically aligned with heading.
 		margin-top: ( ( @font-size-heading-1 * @line-height-heading ) - @height-lang-button ) / 2;
 	}
 }
 
+// TODO: Can be changed to `.mw-body .mw-portlet-lang` when langauge-in-header feature is default.
+.mw-body #p-lang-btn {
+	float: right;
+}
+
 .mw-body-content {
 	position: relative;
 	z-index: @z-index-base;