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
This commit is contained in:
parent
1703243a76
commit
80d734b4d2
|
@ -192,6 +192,7 @@ class SkinVector extends SkinMustache {
|
||||||
$commonSkinData = array_merge( $parentData, [
|
$commonSkinData = array_merge( $parentData, [
|
||||||
'page-isarticle' => (bool)$out->isArticle(),
|
'page-isarticle' => (bool)$out->isArticle(),
|
||||||
|
|
||||||
|
'is-mainpage' => $title->isMainPage(),
|
||||||
// Remember that the string '0' is a valid title.
|
// Remember that the string '0' is a valid title.
|
||||||
// From OutputPage::getPageTitle, via ::setPageTitle().
|
// From OutputPage::getPageTitle, via ::setPageTitle().
|
||||||
'html-title' => $out->getPageTitle(),
|
'html-title' => $out->getPageTitle(),
|
||||||
|
|
|
@ -57,7 +57,9 @@
|
||||||
|
|
||||||
{{#is-language-in-header}}
|
{{#is-language-in-header}}
|
||||||
<header class="mw-body-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}}}>
|
<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>
|
||||||
{{{html-title}}}
|
{{{html-title}}}
|
||||||
</h1>
|
</h1>
|
||||||
|
@ -78,6 +80,13 @@
|
||||||
{{{html-body-content}}}
|
{{{html-body-content}}}
|
||||||
{{{html-categories}}}
|
{{{html-categories}}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{#is-mainpage}}
|
||||||
|
{{#is-language-in-header}}
|
||||||
|
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
||||||
|
{{/is-language-in-header}}
|
||||||
|
{{/is-mainpage}}
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
{{{html-after-content}}}
|
{{{html-after-content}}}
|
||||||
</div> {{! END mw-content-container }}
|
</div> {{! END mw-content-container }}
|
||||||
|
|
|
@ -119,6 +119,9 @@
|
||||||
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
@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`.
|
@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
|
// Z-indices
|
||||||
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
||||||
// @z-index-ui-datepicker-cover: -1;
|
// @z-index-ui-datepicker-cover: -1;
|
||||||
|
|
|
@ -2,9 +2,11 @@
|
||||||
@import '../../common/variables.less';
|
@import '../../common/variables.less';
|
||||||
@import 'mediawiki.mixins.less';
|
@import 'mediawiki.mixins.less';
|
||||||
|
|
||||||
// `.mw-body-header` class can be removed when language button is the default.
|
// TODO: `#p-lang-btn` Can be changed to `.mw-portlet-lang` when languages-in-header is the default.
|
||||||
// e.g. upon removal of SkinVector::isLanguagesInHeader
|
#p-lang-btn {
|
||||||
.mw-body-header .mw-portlet-lang {
|
.box-sizing( border-box );
|
||||||
|
height: @height-lang-button;
|
||||||
|
|
||||||
.mw-ui-icon:before {
|
.mw-ui-icon:before {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
// Put icon on correct standard normal state color.
|
// Put icon on correct standard normal state color.
|
||||||
|
@ -38,11 +40,19 @@
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
border-top-width: 1px;
|
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 {
|
li a {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vector-menu-checkbox:checked ~ .vector-menu-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.after-portlet {
|
.after-portlet {
|
||||||
// ensure there is a visual separation between the language links and additional links.
|
// ensure there is a visual separation between the language links and additional links.
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
@ -51,7 +61,7 @@
|
||||||
|
|
||||||
// Disable border-radius when dropdown menu open
|
// Disable border-radius when dropdown menu open
|
||||||
.client-nojs {
|
.client-nojs {
|
||||||
.mw-portlet-lang:hover .vector-menu-heading,
|
#p-lang-btn:hover .vector-menu-heading,
|
||||||
.vector-menu-checkbox:checked + .vector-menu-heading {
|
.vector-menu-checkbox:checked + .vector-menu-heading {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
@ -59,7 +69,7 @@
|
||||||
|
|
||||||
// mw-body-header class can be removed when language button is the default.
|
// mw-body-header class can be removed when language button is the default.
|
||||||
// e.g. upon removal of SkinVector::isLanguagesInHeader
|
// 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
|
// The `.mw-interlanguage-selector` is toggled off through js if the
|
||||||
// `ext.uls.interface` module is not being loaded.
|
// `ext.uls.interface` module is not being loaded.
|
||||||
.mw-interlanguage-selector {
|
.mw-interlanguage-selector {
|
||||||
|
|
|
@ -199,16 +199,18 @@ body {
|
||||||
.mw-body-header {
|
.mw-body-header {
|
||||||
.mixin-clearfix();
|
.mixin-clearfix();
|
||||||
|
|
||||||
|
// TODO: Can be changed to `.mw-portlet-lang` when langauge-in-header feature is default.
|
||||||
#p-lang-btn {
|
#p-lang-btn {
|
||||||
@height-lang-button: unit( 32 / @font-size-browser, em );
|
// should be vertically aligned with heading.
|
||||||
float: right;
|
|
||||||
.box-sizing( border-box );
|
|
||||||
height: @height-lang-button;
|
|
||||||
// should be vertically aligned.
|
|
||||||
margin-top: ( ( @font-size-heading-1 * @line-height-heading ) - @height-lang-button ) / 2;
|
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 {
|
.mw-body-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: @z-index-base;
|
z-index: @z-index-base;
|
||||||
|
|
Loading…
Reference in New Issue