Page MenuHomePhabricator

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

Description

BA1AA2FA-1F09-4747-AF3B-9CBD3C0B6381.png (1×750 px, 154 KB)

Event Timeline

TheDJ updated the task description. (Show Details)

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

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?

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

Evad37 subscribed.

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.

Screenshots:

TimelessWith filtersWithout filters
Watchlist
watchlist with new filters Timeless.png (570×322 px, 41 KB)
watchlist without new filters Timeless.png (570×322 px, 46 KB)

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.

So there's more than one dot at times?

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.

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

kostajh subscribed.

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.

We should copy the Minerva skinStyles that we applied to the Advanced mode across to core to fix this.