wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 15:53:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert personal menu to use flexbox alignment.

Browse source 
Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.

Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc
This commit is contained in:
Jan Drewniak 2020-10-29 15:53:56 +01:00
parent 0bba957a37
commit 4ff30a16a0
3 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
resources/skins.vector.styles/Menu.less
View file

@ -1,7 +1,16 @@
@import '../../variables.less';
@import 'mediawiki.mixins.less';
/* Personal */
/* Personal Menu */
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
align-items: baseline;
}
/* Personal Menu */
.mw-portlet {
// Hidden by default, but displayed by certain menus
// e.g. MenuPortal

9
resources/skins.vector.styles/layout-default.less
View file

@ -97,15 +97,6 @@ body {
float: right;
}
#p-personal {
li {
// Some extensions e.g. Echo may change the height of list items
// If that's the case we want to ensure all other elements are vertically aligned consistently.
vertical-align: middle;
display: inline-block;
}
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-left: -@margin-horizontal-sidebar-button-icon;

1
resources/skins.vector.styles/layout-search-header.less
View file

@ -45,7 +45,6 @@
#p-personal {
flex-grow: 1;
text-align: right;
flex-basis: @min-width-personal-tools;
margin-left: @margin-horizontal-search;