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

Update user avatar icon 

Updating user avatar icon to overhauled standard WikimediaUI icon.
Also:
- change `line-height` of personal menu to `14px` for better positioning
  and introducing corresponding LESS variables
- slightly increase user avatar icon to be on par with ULS one
- putting avatar icon within link on active user, an awful user experience
  that has long bugged me.

Bug: T123810
Change-Id: Iabde041090a87968b5f82e36fd81419083f80984
This commit is contained in:
Volker E 2018-10-09 12:29:58 -07:00
parent a4b0de18c9
commit 7cbccd37a6
6 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/personalMenu.less
View File

@ -18,24 +18,25 @@
}
li {
line-height: 1.125em;
float: left;
margin-left: 0.75em;
margin-top: 0.5em;
font-size: @menu-personal-font-size;
line-height: @line-height-menu-personal;
white-space: nowrap;
}
}
/* Icon for Usernames */
#pt-userpage,
#pt-userpage a,
#pt-anonuserpage {
// SVG support using a transparent gradient to guarantee cross-browser
// compatibility (browsers able to understand gradient syntax support also SVG)
.background-image-svg( 'images/user-avatar.svg', 'images/user-avatar.png' );
background-position: left top;
background-repeat: no-repeat;
/* SVG support using a transparent gradient to guarantee cross-browser
* compatibility (browsers able to understand gradient syntax support also SVG) */
.background-image-svg('images/user-icon.svg', 'images/user-icon.png');
padding-left: 15px !important; // stylelint-disable-line declaration-no-important
background-size: @line-height-menu-personal @line-height-menu-personal;
padding-left: 16px !important; // stylelint-disable-line declaration-no-important
}
/* Show "Not logged in" text in gray */

BIN
images/user-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

7
images/user-avatar.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="#54595d">
<path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
<circle cx="10" cy="5.5" r="4.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 254 B

BIN
images/user-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 198 B

5
images/user-icon.svg
View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13.836" viewBox="0 0 12 13.836">
<path fill="#72777d" d="M1.938,6.656c-1.32,1.485-1.47,3.15-0.97,4.25c0.323,0.707,0.78,1.127,1.313,1.375 c0.496,0.229,1.074,0.273,1.658,0.282c0.023,0,0.04,0.03,0.062,0.03h4.187c0.61,0,1.225-0.125,1.75-0.405 c0.527-0.28,0.961-0.718,1.188-1.376c0.335-0.964,0.175-2.529-1.094-4.03C9.094,7.954,7.68,8.719,6.065,8.719 c-1.677,0-3.182-0.812-4.125-2.063H1.938z"/>
<path fill="#72777d" d="M6.063,0c-1.89,0-3.595,1.674-3.594,3.563C2.467,5.45,4.173,7.155,6.06,7.155 c1.89,0,3.564-1.705,3.563-3.593C9.625,1.673,7.95,0,6.063,0L6.063,0z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 666 B

2
variables.less
View File

@ -1,6 +1,7 @@
@import 'mediawiki.ui/variables';
@html-font-size: 100%;
@font-size-browser: 16; // Assumed browser default of `16px`
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-sans-serif: sans-serif;
@ -41,3 +42,4 @@
// Personal menu
@menu-personal-font-size: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @menu-personal-font-size; // equals `1.667em`≈`14px`