Page MenuHomePhabricator

Tablet-view for responsive MonoBook
Closed, DeclinedPublic

Assigned To
Authored By
Jun 4 2018, 10:41 AM
Referenced Files
F25210096: image.png
Aug 21 2018, 11:56 PM
F25210000: image.png
Aug 21 2018, 11:56 PM
F25210079: image.png
Aug 21 2018, 11:56 PM
F25210057: image.png
Aug 21 2018, 11:56 PM
F25210022: image.png
Aug 21 2018, 11:56 PM
F18787726: responsive monobook tablet proposal.png
Jun 5 2018, 10:17 AM


From enwiki VPT:

I think a tablet/small-desktop view, which hides the sidebar but still shows labels for the tabs, would be a good idea. I find this works quite well in Timeless. Why give users a phone experience if they're on a mid-to-large sized device or small desktop screen? - Evad37 [talk] 14:43, 1 June 2018 (UTC)

@Evad37: Main reason was because I didn't want to figure out how to make collapsible tabs because vector's implementation scares me and just making the cutoff wider sort of avoided the problem, but since people seem to feel a lot more strongly about this than expected, yeah. This seems definitely in order. -— Isarra ༆ 20:18, 1 June 2018 (UTC)

Event Timeline

There's no way to actually tailor monobook to tablets without either going full mobile (big smacky buttons for smacking) or just giving up entirely and using desktop because desktop/laptops use these resolutions too.

Unless we want to do device sniffing or something. But even then a lot of people probably do want the normal mode if it fits anyway, if they're using this at all.

I don't think "big smacky buttons for smacking" is a big issue for a tablet, especially if there's going to be a proper opt-out per T195625#4254813
Just playing around with the browser inspector, I got the following layout mostly with just CSS changes:

responsive monobook tablet proposal.png (110×733 px, 16 KB)

Here's the code I used:
Search bar (div#p-search)

margin: 0 15%;
width: 70%;

Second row tabs (li#ca-nstab-main-mobile a, etc)

background-image: none;
text-indent: 0;
width: initial;

Navigation and user menu tabs (a#sidebar-toggle and a#p-personal-toggle

background-image: none;
text-indent: 0;
padding: 0.75em 1em;
width: initial;
  • Added text "navigation" and "user tools" (would need to be hidden in mobile view using the text-indent strategy)

It could perhaps do with some fine-tuning, but that's a basic tablet view without too much effort.

Yeah, I'm sold. We should totally do that.

Change 441362 had a related patch set uploaded (by Evad37; owner: Evad37):
[mediawiki/skins/MonoBook@master] Add a tablet view for resposnive MonoBook

Okay, so as it is right now, some comparison pictures:

Current icon mode layout before change (around widest end):

image.png (193×533 px, 16 KB)

New icon mode at previous widest end (broken echo icons)

image.png (193×473 px, 15 KB)

New icon mode a bit bigger (different broken echo icons)

image.png (193×536 px, 16 KB)

New wide end of icon mode (echo icons completely disappear):

image.png (193×698 px, 17 KB)

Around widest end of text/tablet mode (no echo icons):

image.png (193×979 px, 21 KB)

From the latest patchset:


Echo notification counters in responsive monobook (mobile).png (125×719 px, 11 KB)


Echo notification counters in responsive monobook (tablet).png (120×721 px, 12 KB)

Jdlrobson subscribed.

I don't think we should increase the complexity of the skin anymore than currently have done given this skin is in production. We should focus energies on fixing the bugs status quo with the limited people we have.