Page MenuHomePhabricator

Navbars and hlists don't display or work properly on mobile site
Open, Needs TriagePublic

Description

The padding applied to all list items on mobile messes up hlists a bit because – at least with Helvetica on iOS – the padding to the right for all list items is slightly too large, and so the bullets are misaligned so that the gap to the right of each bullet is slightly too wide. I'm not sure why WMF did this instead of doing more sensible things like changing the line-height and adding padding to the right of lists. The bottom padding also messes with styling where there's supposed to be the same distance between the top and bottom of a table cell.

For most hlists, the bullets don't display; see T169315.

The navbar template is affected by both of these issues, but the padding makes it worse because many of them have square brackets to the left and right, and the padding shows up between the E and the right bracket as well.

Adding the largely-undocumented hlist-separated class (see T169315) does not solve any of these, partly because the bullets don't change colour to match the text, and because the distance separating items from bullets is only added on the left side. The class should control padding on both sides of the bullets, if the distance is to be added.

To top it off, the navbar edit link doesn't work because it's hardcoded to go to the desktop site. (This is also a problem in template documentation, which has [edit] and [purge] links which always go to desktop.) This usually isn't a problem in mobile, because "anyone can edit" doesn't actually matter most templates containing navbars aren't displayed in mobile view anyway, but it does still pop up, particularly in route diagram templates (used in about 10,000 articles on enwiki and on at least 50 other Wikipedias).

Solutions include

  • changing the list item padding in the mobile skin so that bottom padding is replaced by a line-height rule, and right-padding is replaced either by padding on the <ul>/<ol> element or nothing;
  • removing the hlist-separated class from the skin (see the other bug);
  • hiding all navbars from mobile readers because almost every edit from them is vandalism and the mobile editor doesn't even have monospaced text making it harder to read code most templates containing navbars are hidden in mobile anyway;
  • hiding route diagram templates from mobile readers (which would suck, because I spent a lot of time making Module:Routemap display properly).

Event Timeline

Jc86035 created this task.Jun 30 2017, 11:29 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 30 2017, 11:29 AM
Jc86035 added a subscriber: TheDJ.Jun 30 2017, 11:30 AM
Jc86035 updated the task description. (Show Details)Jul 8 2017, 10:25 AM
Jdlrobson moved this task from Needs triage to MinervaNeue on the Mobile board.Jul 25 2017, 5:38 PM
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptMar 18 2020, 4:32 PM

@Jc86035: Is this about the mobile skin (Minerva?), or also about looking at the desktop website on a mobile device?

This is about Minerva.

Jc86035 removed a subscriber: Jc86035.Jul 4 2020, 2:40 PM
Aklapper edited projects, added MinervaNeue; removed Mobile.Jul 4 2020, 3:11 PM