Page MenuHomePhabricator

AMC Navigation - make main menu scrollable
Closed, ResolvedPublic3 Estimated 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
full.png (1×750 px, 138 KB)
iOS.jpeg (1×750 px, 234 KB)
Screenshot_20190221-123258.png (2×1 px, 228 KB)

QA instructions

  • should test Special:MobileMenu as well

Event Timeline

ovasileva created this task.
ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-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 subscribed.

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 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.

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 Web-Team-Backlog board.

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 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)

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

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