Page MenuHomePhabricator

Watchlist items are narrow and hard to read on mobile devices
Open, Needs TriagePublic

Description

Event Timeline

TheDJ created this task.Nov 24 2017, 9:01 AM
TheDJ updated the task description. (Show Details)
Jhernandez moved this task from Needs triage to Triaged on the Mobile board.Nov 24 2017, 11:17 AM

This is exactly why we introduced the MobileWatchlist in MobileFrontend. The whole HTML markup of core is mobile unfriendly and it's a huge endeavor to make that behave well on a mobile screen :-(

To be honest, I like even this better than the alternative MobileWatchlist is providing. Compared to a collapsible watchlist, it has a incredibly low information density and isn't usable by users with more than a few items on their watchlists at all.

Change 428284 had a related patch set uploaded (by Evad37; owner: Evad37):
[mediawiki/skins/Timeless@master] Add explicit padding and margins for all ul elements

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

Change 428284 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Add explicit padding and margins for all ul elements

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

Isarra added a subscriber: Isarra.May 1 2018, 2:23 PM

Honestly this seems like a core problem - that the watchlist as-is does not translate well across resolutions, and as such needs to be fixed in core to be responsive.

Normally I'd just say that if we have an existing solution (the MF approach), that should be incorporated into the core feature, but from the sound of it I'm gathering the MF approach may not actually be better in practice?

Isarra added a comment.May 1 2018, 2:23 PM

I'll look into stylings timeless-side in the meantime.

Evad37 added a subscriber: Evad37.

The above patch reduced the overly-large left margin on watchlist items, but when the new filters for edit review are enabled the large margin returns. And this whole task is also relevant to responsive MonoBook.

Restricted Application added a project: Growth-Team. · View Herald TranscriptJul 28 2018, 7:54 AM

Screenshots:

TimelessWith filtersWithout filters
Watchlist

Same situation with Recent changes, and with Responsive MonoBook.

The extra width is used to show the other coloured dots when multiple filters are highlighted, which is fine on a wider screen, but on small screens it makes the changes themselves narrower than is necessary, and harder to read.

Since on such narrow screens items are always going to take up multiple lines, the dots should be able to be shown in two or three rows, taking up less of the limited horizontal space. Or if possible, only take up the space required to show the number of coloured dots which are actually present.

Isarra added a comment.Aug 2 2018, 4:31 PM

So there's more than one dot at times?

Isarra added a comment.Aug 2 2018, 4:59 PM

Okay, yeah, that is not a design that translates well to mobile, especially with the grouped version.

Step one would probably be to figure out a better grouped recent changes layout for mobile, and then based on whatever THAT turns out to be, use a highlight approach that works with that for that or not that.

Isarra added a comment.Aug 2 2018, 5:00 PM

Basically I'm assuming we've currently got a desktop layout that works, we probably just need another one entirely for mobile. >.>

Evad37 moved this task from Backlog to Responsive MonoBook on the MonoBook board.Aug 21 2018, 7:30 AM
kostajh added a subscriber: kostajh.

The Growth team discussed this today in our triage meeting. Going back to what Jon said above:

This is exactly why we introduced the MobileWatchlist in MobileFrontend. The whole HTML markup of core is mobile unfriendly and it's a huge endeavor to make that behave well on a mobile screen

Our team doesn't have the capacity to take on that kind of project in the short-to-medium term, but we'll leave this task open as people are using it to discuss patches to MonoBook, Timeless, etc.