Merge "Ensure language button works for no js users,"

This commit is contained in:
jenkins-bot 2023-06-22 21:42:00 +00:00 committed by Gerrit Code Review
commit ad5cd567bd
6 changed files with 21 additions and 17 deletions

View file

@ -55,6 +55,7 @@
position: absolute;
top: 0;
left: 0;
right: auto;
z-index: @z-index-stacking-1;
opacity: 0;
width: 100%;

View file

@ -99,3 +99,9 @@
padding-right: @padding-horizontal-page-container-desktop-wide;
}
}
.mixin-vector-dropdown-content-flip() {
// Flip dropdown horizontal alignment
left: auto;
right: 0;
}

View file

@ -13,10 +13,10 @@
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
// the button altogether.
.mw-portlet-lang-heading-0 {
.client-nojs & {
display: none;
}
.client-nojs & .mw-portlet-lang-heading-0 {
// FIXME: remove !important after VectorZebra is the default
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
.vector-menu-heading {
@ -60,17 +60,11 @@
// The `vector-menu-content` class is present twice in current implementation of language switcher
// (see FIXME in Dropdown/Open.mustache) so it is important we target the direct child.
> .vector-menu-content {
top: auto;
left: -@border-width-base;
right: -@border-width-base;
// align borders of open menu align with button
box-sizing: border-box;
max-height: 65vh;
overflow: auto;
// Adds to the show/hide technique in Dropdown.less with
// display to prevent rendering and long scrolling on Main page
display: none;
.mixin-vector-dropdown-content-flip();
li a {
font-size: inherit;
@ -88,8 +82,6 @@
// styles for less prominent Language button (without label) to be used for non-content pages (see T316559)
.mw-portlet-lang-heading-empty + .vector-menu-content {
left: auto;
right: 0;
min-width: 300px;
.mw-portlet-empty-language-selector-body {

View file

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
@ -51,7 +52,6 @@
// Any dropdowns inside the right navigation in modern Vector (e.g. "more" menu).
// should be right-aligned to prevent horizontal scrolling.
.vector-menu-content {
left: auto;
right: -@border-width-base;
.mixin-vector-dropdown-content-flip();
}
}

View file

@ -26,8 +26,7 @@
*/
.vector-user-menu {
.vector-menu-content {
left: auto;
right: 0;
.mixin-vector-dropdown-content-flip();
}
// Used to hide collapsible items inside the dropdown menu

View file

@ -115,3 +115,9 @@
pointer-events: none; // Make the link below the fade clickable
}
}
.mixin-vector-dropdown-content-flip() {
// Flip dropdown horizontal alignment
left: auto;
right: 0;
}