Page MenuHomePhabricator

[ToC] Render main menu above the ToC
Closed, ResolvedPublic5 Estimated Story Points

Description

Description

In T298900 we decided that the main menu will open above the ToC, pushing the ToC down the page. The open/closed state of the main menu will remain persistent between pages.

Link to prototype

Notes

We are continuing to explore longer-term solutions in T300673.

QA Results - Beta

ACStatusDetails
1T300875#7759071
2T300875#7759071 this is a pass per T300875#7760651

QA Results - Prod

ACStatusDetails
1T300875#7776362
2T300875#7776362

Event Timeline

@ovasileva given this change I'm curious where we're at regarding collapsing the main menu by default for logged-out people, and making the open/closed state of the main menu not persistent (so if they open it, then go to a new page, it should be closed when they get to the new page)?

if we're okay with that I can add it to the acceptance criteria here

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

[mediawiki/skins/Vector@master] POC: Render sidebar above the TOC

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

Change 761034 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Render sidebar above the TOC

Reason:

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

Looks relatively straightfoward to do with some CSS rearranging, see the POC patch above.

Just to note, this does require the sidebar menu to be moved in the DOM to be directly above the TOC. This will affect the alignment of the sidebar menu, moving it to be below the article toolbar as opposed to what it looks like now.

Just to note, this does require the sidebar menu to be moved in the DOM to be directly above the TOC. This will affect the alignment of the sidebar menu, moving it to be below the article toolbar as opposed to what it looks like now.

So presumably this will have issues with cached HTML?

bwang removed bwang as the assignee of this task.Feb 9 2022, 5:38 PM
bwang added a subscriber: bwang.

@alexhollender_WMF Presumably this task also involves updating the menu styles to match the video as well right?

And how should the menu look on smaller screen sizes? Presumably it should continue to expand to full width like so: https://phabricator.wikimedia.org/F34961258?

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

[mediawiki/skins/Vector@master] Render sidebar menu above TOC

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

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

[mediawiki/skins/Vector@master] Switch order of sidebar menu and article toolbar in DOM

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

bwang removed bwang as the assignee of this task.Feb 22 2022, 7:27 PM

@alexhollender_WMF Presumably this task also involves updating the menu styles to match the video as well right?

yes, good call out. Should I make a separate task for that? cc @ovasileva

And how should the menu look on smaller screen sizes? Presumably it should continue to expand to full width like so: https://phabricator.wikimedia.org/F34961258?

good question, I will get back to you about this

Change 764450 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Switch order of sidebar menu and article toolbar in DOM

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

The first patch involving HTML changes has been merged (thanks @Jdlrobson!), and the earliest the second patch can be merged in March 1. The second patch is ready for code review now though

Change 764451 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Render sidebar menu above TOC

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

bwang moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.
bwang added a subscriber: nray.
Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: The main menu will open above the ToC, pushing the ToC down the page.
❌ AC2: The open/closed state of the main menu will remain persistent between pages.
The closed state of the main menu is not persistent.

Screen Recording 2022-03-07 at 7.01.10 PM.mov.gif (1×1 px, 3 MB)

@Edtadros I'm able to replicate the persistence issue, but I'm also seeing it in prod. It looks like the first redirect doesn't have the correct sidebar state, while the subsequent redirects do.
This definitely seems like an issue, but I don't think it was introduced by this task so I'm not sure if this should be a fail

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: The main menu will open above the ToC, pushing the ToC down the page.

Screen Recording 2022-03-14 at 6.12.16 PM.mov.gif (1×1 px, 782 KB)

✅ AC2: The open/closed state of the main menu will remain persistent between pages.

Screen Recording 2022-03-14 at 6.12.32 PM.mov.gif (1×1 px, 2 MB)