Page MenuHomePhabricator

AMC Navigation - make main menu scrollable
Closed, ResolvedPublic3 Story Points

Description

Precursor: T216152 (once resolved this task will be unstalled)

Acceptance criteria

  • If the device size is smaller than the total length of the menu, the menu will scroll
    • some indication that the menu is scrollable will be present (see design notes for more detail)
  • The main page will not be scroll-able when the menu is open
  • note - this change is for all users

Design notes

  • The menu should be scrollable but the page itself should not scroll
  • Scrolling indicator — it would be great to communicate to the user that there are more menu items offscreen/blow. When the menu is first opened the scrollbar should appear then quickly fade out, indicating the additional contents below (it seems like sometimes browsers do this by default - need to investigate further)
  • It might make sense to do this in conjunction with T206354

Designs

fulliOSAndroid

QA instructions

  • should test Special:MobileMenu as well

Event Timeline

ovasileva triaged this task as High priority.Mar 13 2019, 1:48 PM
ovasileva created this task.
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson changed the task status from Open to Stalled.Mar 15 2019, 9:58 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

There's little point in doing analysis on this task until T216152 is done. I've added a sign off step to mark this as open on that task.

Jdlrobson assigned this task to pmiazga.May 16 2019, 3:15 PM
Jdlrobson added a subscriber: pmiazga.

@pmiazga leaving this one with you to determine if more work needed.

@Jdlrobson there is no connection between T216152: AMC Navigation - add new links to main menu with click tracking and this task. The T216152 task is only backend work that allows MainMenu to be easily modified/extended, this task is clearly a frontend work, that adds scrolling (js/css/html).
Also T216152 is mostly done, in Ready For Signoff now.

It's ready to work on

pmiazga changed the task status from Stalled to Open.Jun 11 2019, 3:50 PM
pmiazga removed pmiazga as the assignee of this task.
pmiazga moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
phuedx added a subscriber: phuedx.Jun 11 2019, 4:48 PM

I think this could be as simple as adding the following rules:

.navigation-enabled {
  overflow-y: hidden;
}

#mw-mf-page-left {
  overflow-y: scroll;
  height: 100%
}

and removing the following rules:

.navigation-enabled #mw-mf-viewport {
  height: auto !important;
}

#mw-mf-page-left {
  min-height: 100%;
}
ovasileva updated the task description. (Show Details)Jun 18 2019, 4:13 PM
ovasileva set the point value for this task to 3.Jun 18 2019, 4:19 PM
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
Jdlrobson lowered the priority of this task from High to Normal.Jul 30 2019, 8:09 PM

I think this could be as simple as adding the following rules:

I like this task and hope we do it and that it's simple. If it's not simple, it may not be worthwhile since the main menu doesn't have many items in it.

Change 526732 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] [UI] [main menu] make menu scrollable

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

Scrolling indicator — it would be great to communicate to the user that there are more menu items offscreen/blow. When the menu is first opened the scrollbar should appear then quickly fade out, indicating the additional contents below (it seems like sometimes browsers do this by default - need to investigate further)

I've submitted a simple patch that adds a scrollbar as needed but more work is needed for fancy fade in / out scrollbars. This remaining work is available if someone wants it. @Jdrewniak, are these practical to do in CSS or is JS necessary?

Change 526732 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] [UI] [main menu] make menu scrollable

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

alexhollender added a subscriber: Edtadros.

Looks great. Checked the following combinations (with the phone turned to landscape mode) to ensure that the menu scrolls:

logged-outlogged-inlogged-in + AMC
iOS
Android
ovasileva closed this task as Resolved.Aug 7 2019, 11:11 AM

Looks good!