[User links] Design fixes
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Jun 29 2021, 5:49 PM

Description

This task is for the various design fixes we need to make to the user links & menu before we deploy.

These notes are based on what I'm seeing on beta on June 29th.

The CSS below is what needs to be changed and/or added:

General fixes

// Username & Create account buttons
(this should be identical to an OOUI quiet, frameless button)
font-size: 14px;
font-weight: 700;
padding: 6px 12px;
margin: 0;
border-radius: 2px
:hover: background-color: rgba(0,24,73,0.02745098);

// Menu items
font-size: 14px;
padding: 6px 12px; // Note this is equivalent to a menu item with a 32px height (20px icon + 6px top padding + 6px bottom padding )
:hover: background-color: #EAECF0;
:last-child: border-top: 1px solid #c8ccd1;

// Menu
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 25%);

Logged-out

all of the above changes should be applied (Create account button should be styled identically to Username above)
remove the 12px of padding on the left of the user menu button
remove icons from Talk & Contributions menu items (reminder: logged-out only)
Pages for logged out editors (learn more):
- font-size: 14px; color: #54595D; padding: 8px 12px 6px 12px
- remove the margin on the inner <p>
- remove : from the end of the string

Logged in

There should be padding between the notification icon and the username

Responsive / wrapping elements

Currently the username, bell icon, and inbox icon are wrapping at smaller screen widths. This should not be happening. See T285786#7212904.

Notes

check logged-out
check logged-in
checked logged-in w/ 'you have a new talk page message' notice

Details

Other Assignee: • nray

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	User menu design tweaks	mediawiki/skins/Vector	master	+130 -61

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T266536 [EPIC] Consolidate user links into a single menu
Resolved	ovasileva	T285786 [User links] Design fixes
Resolved	ovasileva	T287523 Remove extra padding above & below "learn more" in user menu

Event Timeline

• alexhollender_WMF created this task.Jun 29 2021, 5:49 PM

• alexhollender_WMF updated the task description. (Show Details)Jun 29 2021, 8:06 PM

• alexhollender_WMF updated the task description. (Show Details)Jun 29 2021, 8:12 PM

• alexhollender_WMF updated the task description. (Show Details)

This all looks very straightforward as minor style tweaks. Unless I'm missing something, we should be able to knock these fixes out without much ado.

cjming moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jun 29 2021, 9:06 PM

Jdlrobson awarded a token.Jun 29 2021, 10:03 PM

ovasileva triaged this task as High priority.Jun 30 2021, 10:52 AM

LGoto set the point value for this task to 3.Jun 30 2021, 4:51 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.

• alexhollender_WMF mentioned this in T285728: User Links: Move username link.Jun 30 2021, 7:49 PM

• alexhollender_WMF updated the task description. (Show Details)

• alexhollender_WMF added a project: RW-Feature-DI-User-Menu.Jun 30 2021, 7:53 PM

Jdrewniak claimed this task.Jul 1 2021, 9:29 AM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.

FYI @Jdrewniak there's a fair bit of overlap between this task and T285960, T285960 that will result in changes to CSS and HTML so it might be worth holding off on your changes or rebasing on top of that one to reduce back and forth.

Change 702696 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [WIP] User menu design tweaks

https://gerrit.wikimedia.org/r/702696

gerritbot added a project: Patch-For-Review.Jul 1 2021, 4:36 PM

@Jdlrobson , there's overlap with T284243 here too, but I'll eventually rebase my patch on top of those changes, since this task is meant as a general design overview of the menu.

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/b87df0f2cc/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/b87df0f2cc/w/~~

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/83b17206e1/w/

@Jdrewniak just noticing that the username, notification icon, and inbox icon are wrapping when the screen width gets smaller — this shouldn't be happening:

• alexhollender_WMF updated the task description. (Show Details)Jul 14 2021, 4:53 PM

• alexhollender_WMF mentioned this in T284242: Search: treatment at smaller resolutions.Jul 14 2021, 5:14 PM

In T285786#7212904, @alexhollender wrote:

@Jdrewniak just noticing that the username, notification icon, and inbox icon are wrapping when the screen width gets smaller — this shouldn't be happening:

This was noted in our code review and standup. @bwang is looking into this.

@alexhollender - not sure if this is already a part of this task, but I'm also noticing overlaps when user has alerts/notices

Screen Shot 2021-07-15 at 9.19.48 AM.png (334×1 px, 38 KB)

In T285786#7215079, @ovasileva wrote:

@alexhollender - not sure if this is already a part of this task, but I'm also noticing overlaps when user has alerts/notices

That's T285259

LGoto reassigned this task from Jdrewniak to • nray.Jul 19 2021, 5:25 PM

LGoto added a subscriber: Jdrewniak.

@Jdlrobson @nray @ovasileva @Volker_E responsive state stuff (just putting it here here for now)

This is based on the three main desktop breakpoints: (1) above 1000px, (2) 999px–721px, (3) below 700px.
This is an ideal situation where we independently manage the elements based on logged-in/logged-out, and whether or not the language switcher is in the site header (e.g. Wikidata, Commons):

	Wikipedia (logged-in)	Wikipedia (logged-out)	Wikidata (logged-in)	Changes for all
above 1000px
1300px
999-721px
950px			*search collapses	drop logo icon, username/create account collapses into menu
721px				no change
below 720px
500px	*search collapses	*search collapses	*search and languages button drop labels	reduce page padding

@Jdlrobson you mentioned limiting complexity here by having a consistent approach across projects & states. In that case we'd default to the needs of Wikidata (logged-in) as that's has the most elements in the header. However the downside of that would be that for a logged-out person on Wikipedia (the large majority), at 1000px or lower they would see:

basically we're taking away functionality due to space constraints on Wikidata, even though in the specific context of logged out on Wikipedia we still have the space for it.

In T285786#7222574, @alexhollender wrote:

@Jdlrobson @nray @ovasileva @Volker_E responsive state stuff (just putting it here here for now)

This is based on the three main desktop breakpoints: (1) above 1000px, (2) 999px–721px, (3) below 700px.
This is an ideal situation where we independently manage the elements based on logged-in/logged-out, and whether or not the language switcher is in the site header (e.g. Wikidata, Commons):

Wikipedia (logged-in) Wikipedia (logged-out) Wikidata (logged-in) Changes for all

above 1000px

1300px

999-721px

950px
*search collapses drop logo icon, username/create account collapses into menu

721px
no change

below 720px

500px
*search collapses
*search collapses
*search and languages button drop labels reduce page padding

@Jdlrobson you mentioned limiting complexity here by having a consistent approach across projects & states. In that case we'd default to the needs of Wikidata (logged-in) as that's has the most elements in the header. However the downside of that would be that for a logged-out person on Wikipedia (the large majority), at 1000px or lower they would see:

basically we're taking away functionality due to space constraints on Wikidata, even though in the specific context of logged out on Wikipedia we still have the space for it.

Discussed this with @alexhollender and this will not be a blocker for deployment. Next steps:

monitor if any search decreases are observed based on the search collapsing at lower resolutions
set up a spike to further discuss and identify behavior at lower resolutions

• alexhollender_WMF mentioned this in T285259: User links: Echo icons should match mediawiki.ui.icons in the header.Jul 22 2021, 7:45 PM

@alexhollender Can you please check https://patchdemo.wmflabs.org/wikis/608ecb4afa/wiki/Main_Page, and let me know what revisions I need to make. Please note that I am aware of deviations from the spec on the following items and wasn't sure how important they were to you:

The spec mentions that the "Create account" and username should have 6px of vertical padding. It is currently at 5px of vertical padding which comes directly from the .mw-ui-button class in mediawiki ui. Please let me know if that's a problem.

The border separating the menu items is the color: #a2a9b1 instead of the desired #c8ccd1 because it uses the @border-color-base variable from mediawiki ui. Again, please let me know if this is a problem.

Thank you

• nray reassigned this task from • nray to • alexhollender_WMF.Jul 22 2021, 9:45 PM

• nray moved this task from Doing to Design Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.

• nray subscribed.

@nray wow, looking great! few notes:

(for widths above 720px) remove 12px of margin on the left of ⋯ button (seems like it's necessary again once the Create account button collapses into the menu at 720px)

remove padding around (learn more) link

when create account is in the menu it should be the top item in the menu

the ⋯ icon button is not the correct size, but maybe that's being fixed in T285259 / T191021. The padding looks right but the icon itself is not the standard 20x20px (total size with padding should be 44x44px)

• nray moved this task from Needs More Work to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jul 22 2021, 11:30 PM

Jdlrobson updated the task description. (Show Details)Jul 23 2021, 3:33 PM

Test wiki created on Patch Demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/a424a33410/w/

Test wiki on Patch Demo by NRay (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/a424a33410/w/~~

Test wiki created on Patch Demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/e097002f78/w/

@alexhollender Revisions done. Please check latest at https://patchdemo.wmflabs.org/wikis/e097002f78/w/

If everything is okay, please put ticket back in doing column so I can do some final code cleanup.

Thank you!

• nray reassigned this task from • nray to • alexhollender_WMF.Jul 23 2021, 8:58 PM

• nray moved this task from Doing to Design Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.

@nray all issues are fixed. only thing I see is we lost the blue link color on "learn more"

Screen Shot 2021-07-24 at 10.27.21 AM.png (446×620 px, 40 KB)

• nray removed • nray as the assignee of this task.Jul 26 2021, 8:34 PM

• nray moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.

Jdlrobson claimed this task.Jul 26 2021, 11:55 PM

Jdlrobson updated Other Assignee, added: • nray.

• nray updated the task description. (Show Details)Jul 27 2021, 8:09 PM

Back to you Alex for another design review.. this time on the beta cluster: https://en.wikipedia.beta.wmflabs.org/

Please move to needs more work or sign off depending on the outcome.

Change 702696 merged by jenkins-bot:

[mediawiki/skins/Vector@master] User menu design tweaks

https://gerrit.wikimedia.org/r/702696

Maintenance_bot removed a project: Patch-For-Review.Jul 27 2021, 9:10 PM

@nray it looks sooooo go💜💙💖💞💓💘💝💚💛❤️🌸💙🌞❤️🧡oood ❣️❣️

	logged-out	logged-in

wide (over 1000px)
menu closed
menu open

medium (1000–720px)
menu closed
menu open

narrow (below 720px)
menu closed
menu open

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.17; 2021-08-02).Jul 27 2021, 10:00 PM

• nray mentioned this in T287523: Remove extra padding above & below "learn more" in user menu.Jul 27 2021, 10:46 PM

And...done! Thanks @nray and @alexhollender!

ovasileva closed subtask T287523: Remove extra padding above & below "learn more" in user menu as Resolved.Aug 4 2021, 4:07 PM

Edtadros mentioned this in T286732: User links: QA entire feature.Aug 4 2021, 11:52 PM

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/83b17206e1/w/~~

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/e097002f78/w/~~

	F34567298: narrow closed.png
	Jul 27 2021, 9:51 PM

	F34567292: medium open.png
	Jul 27 2021, 9:51 PM

	F34567286: medium closed.png
	Jul 27 2021, 9:51 PM

	F34567294: medium open out.png
	Jul 27 2021, 9:51 PM

[User links] Design fixesClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

General fixes

Logged-out

Logged in

Responsive / wrapping elements

Notes

Details

Related ObjectsSearch...

Event Timeline

[User links] Design fixes
Closed, ResolvedPublic3 Estimated Story Points
Actions

Related Objects
Search...