Page MenuHomePhabricator

User links: treatment at smaller resolutions
Closed, ResolvedPublic3 Estimated Story Points

Description

Open questions

Background

The user links menu T266536: [EPIC] Consolidate user links into a single menu will require a separate treatment at smaller resolutions to ensure that all required links are displayed correctly.

Acceptance criteria

  • For logged-out users, below tablet threshold, the menu will collapse the create account link into the user menu
  • For logged-in users, below tablet threshold, the menu will collapse the user name/link to user page into the user menu
  • The "you have new messages" bar should be hidden at lower resolutions (temporary solution until T284243)
  • At lower resolutions the search input is hidden search and only the submit button is shown. It should behave like a form submit link (e.g. submit the form with no input value). We'll wire this up in a later task T284242

Design

Prototype: https://di-community-round-2.web.app/Gucci_Mane

Logged-out
defaultmenu opennotes
full size
Screen Shot 2021-04-15 at 4.19.07 PM.png (404×2 px, 102 KB)
Screen Shot 2021-04-15 at 4.19.17 PM.png (478×2 px, 161 KB)
-
medium
Screen Shot 2021-06-14 at 1.30.53 PM.png (269×848 px, 51 KB)
Screen Shot 2021-06-14 at 1.31.03 PM.png (281×855 px, 64 KB)
(1) Create account collapses into menu, (2) icon (globe) drops from logo
small
Screen Shot 2021-06-14 at 1.31.45 PM.png (280×497 px, 41 KB)
Screen Shot 2021-06-14 at 1.31.53 PM.png (292×490 px, 51 KB)
Search collapses into a icon button
Logged-in
defaultmenu opennotes
full size
Screen Shot 2021-04-15 at 4.28.09 PM.png (600×2 px, 257 KB)
Screen Shot 2021-04-15 at 4.28.19 PM.png (892×2 px, 710 KB)
-
medium
Screen Shot 2021-04-15 at 4.28.41 PM.png (606×1 px, 200 KB)
Screen Shot 2021-04-15 at 4.28.49 PM.png (1×1 px, 682 KB)
(1) menu icon switches from ... to 👤, (2) [Username] collapses into menu, (3) icon (globe) drops from logo
small
Screen Shot 2021-04-15 at 4.29.03 PM.png (634×994 px, 140 KB)
Screen Shot 2021-04-15 at 4.29.12 PM.png (1×994 px, 446 KB)
Search collapses into a icon button
Interim stage for search button

image (10).png (1×1 px, 204 KB)

QA

Use beta cluster. Resize browser to 500px and verify the header fits into one line.

QA (in prod)

QA Results - Beta

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 698008 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] POC: Collapse header at lower resolutions

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

I took a stab at analyzing this. I think the big challenges are going to be

  1. repeating the links in the dropdown menu and hiding/displaying the right one based on the threshold.
  2. Making sure the search has some kind of function (something appears to be interfering with the default form submit behaviour)
  3. We can't change the min-width for logged in users due to the 3 icons that are shown for logged in users, but we can lower it from 500px to 400px for anonymous users. So not quite at our goal of a responsive design yet. My guess is we should leave the min-width untouched as part of this change.

Two problems I hit that I've descoped are:

  • What will happen to the "You have a new Talk page message" notification at lower resolutions?
  • How does search work at lower resolutions?

For now, for the purpose of this ticket I suggest making the search a link to the search page at lower resolutions and hiding the talk page message.
I'll make new tasks for the above questions.

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

https://patchdemo.wmflabs.org/wikis/759bf35ffc/w/

Jdlrobson removed the point value for this task.

Change 698008 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Collapse header at lower resolutions

Reason:

Proof of concept

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 3.Jun 3 2021, 6:14 PM

We estimated this as a medium. Nothing too risky here since we descoped the user messages and search button behaviour with alex's approval.

@alexhollender, @Jdlrobson - just to confirm the change to the AC: "At lower resolutions the search input is hidden search and only the submit button is shown. It should behave like a form submit link (e.g. submit the form with no input value). We'll wire this up in a later task T284242."

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

@ovasileva no mock but you can test this intermediate state on https://patchdemo.wmflabs.org/wikis/759bf35ffc/wiki/Main_Page?useskinversion=2

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

@ovasileva no mock but you can test this intermediate state on https://patchdemo.wmflabs.org/wikis/759bf35ffc/wiki/Main_Page?useskinversion=2

Got it, thank you!

Change 698008 restored by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Collapse header at lower resolutions

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

Change 701134 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Echo@master] Echo notification oo-ui-popupWidget-anchor should point to icon

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

FYI @Jdlrobson: @RHo, @Volker_E, and myself have been discussing moving the user link to the left of notification bell:

current designproposed design
image.png (66×313 px, 2 KB)
image.png (65×309 px, 2 KB)

The potential benefits of the proposed design are:

  • username, which is arguably the most personal part of the interface, comes first
  • better visual balance
  • (minor) consistency with the order in legacy vector

The potential drawbacks of the proposed design are:

  • might the username look less like a link if it isn't sandwiched between other things that are obviously buttons?

To investigate the concern about the obviousness of the username as a link I will be running a simple user test in the coming days.

Change 701134 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Echo notification oo-ui-popupWidget-anchor should point to icon

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

Change 698008 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Collapse header at lower resolutions

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

This comment was removed by Jdlrobson.
Jdlrobson added a subscriber: Edtadros.

Change 704435 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Fix collapsible item behaviour

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

Change 704435 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix collapsible item behaviour

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

Noticed a bug.
At 945px width, I'm seeing the username collapse, but it doesn't appear in the drop down menu. I believe it should be collapsing at a lower resolution like the other ones e.g. it's correct it's not in the dropdown but incorrect it's not showing to the left of the user icon.

image.png (848×656 px, 75 KB)

Noticed a bug.
At 945px width, I'm seeing the username collapse, but it doesn't appear in the drop down menu. I believe it should be collapsing at a lower resolution like the other ones e.g. it's correct it's not in the dropdown but incorrect it's not showing to the left of the user icon.

image.png (848×656 px, 75 KB)

Tested during standup - this only occurs when the orange bar is displayed, breakpoint then changes to 1000px for username collapsing and user name does not add itself to the menu

to clarify: the username does not need to collapse at 1000px even when the orange bar is present. It is fine to collapse it at 720px in all cases.

Change 708155 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove unnecessary user page breakpoint style

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

bwang removed bwang as the assignee of this task.Jul 26 2021, 7:06 PM

Change 708155 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unnecessary user page breakpoint style

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

Test Result - Beta

Status: ❓Need Clarification
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Use beta cluster. Resize browser to 500px and verify the header fits into one line.

✅ AC1: Logged Out

Screen Shot 2021-07-27 at 9.30.12 AM.png (766×503 px, 135 KB)

✅ AC2: Logged Logged In

Screen Shot 2021-07-27 at 9.29.01 AM.png (764×501 px, 98 KB)

❓ AC3: Logged in with Talk Alert
The description states the alert should be hidden.

Screen Shot 2021-07-27 at 9.33.29 AM.png (763×502 px, 140 KB)

❓AC4: Logged in with a very long username
This is an edge case. Not sure if anyone has a name this long, but I just thought I'd show you how it behaves.

Screen Shot 2021-07-27 at 9.31.18 AM.png (763×502 px, 68 KB)

@ovasileva Tagging you since you were the author to get your thoughts.

AC3 was a temporary solution, is now outdated and can be ignored.

AC4 looks like it needs a new task. @alexhollender @ovasileva how should this behave?

AC3 was a temporary solution, is now outdated and can be ignored.

AC4 looks like it needs a new task. @alexhollender @ovasileva how should this behave?

can you clarify what you are asking? how should what behave?

thanks for clarifying @Jdlrobson — the new task is here: T287522

Edward we can skip AC3 and AC4 when QAing in production but this is looking good. Thanks for flagging.

Thanks for the clarification!

@ovasileva, I'm moving this to Ready for Signoff since it is User Links related.

Resolving, with follow-up on the long user names in T287522: Implement max-width on user menu