golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Set responsive max-width on username in header 

Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.

Additional changes:

* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.

* Use core's text-overflow mixin for both the username and the usermenu
items

* Change the user menu's max-width to use relative units

Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
This commit is contained in:
Nicholas Ray 2021-08-31 16:58:44 -06:00
parent 3ff5e1b6a4
commit 5ca9d00d55
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/skins.vector.styles/components/UserLinks.less
View File

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@padding-horizontal-user-links: 12px;
@ -46,6 +47,20 @@
display: flex;
align-items: center;
}
#pt-userpage-2 {
max-width: unit( 155 / @font-size-browser / @font-size-base, em );
span {
.text-overflow( @visible: false );
}
// T287522#7295558: Increase the max-width of the username when viewport
// allows for it.
@media ( min-width: @width-breakpoint-desktop-wide ) {
max-width: unit( 200 / @font-size-browser / @font-size-base, em );
}
}
}
// Overrides personal menu styles for consolidated user links.
@ -74,7 +89,7 @@
.vector-menu-content {
min-width: 200px;
max-width: 350px;
max-width: unit( 350px / @font-size-browser, em );
top: 100%;
left: unset;
right: 0;
@ -118,8 +133,7 @@
span {
font-size: @font-size-user-links;
text-overflow: ellipsis;
overflow: hidden;
.text-overflow( @visible: false );
// Overrides .mw-ui-icon's `line-height: 0` property so that the text is
// visible when not overflowing.
line-height: initial;

6
resources/skins.vector.styles/layouts/screen.less
View File

@ -141,7 +141,7 @@ body {
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
flex-wrap: wrap;
flex-wrap: nowrap;
// https://caniuse.com/#search=align-items
align-items: center;
// allow z-index to apply so search results overlay article
@ -399,10 +399,6 @@ body {
}
@media ( min-width: @width-breakpoint-desktop ) {
.mw-header {
flex-wrap: wrap;
}
#p-search {
margin: 0 @margin-end-search 0 @margin-horizontal-search;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.