Page MenuHomePhabricator

Tablet-view for responsive MonoBook
Open, Needs TriagePublic

Description

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

Evad37 created this task.Jun 4 2018, 10:41 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2018, 10:41 AM
Isarra added a subscriber: Isarra.Jun 5 2018, 5:44 AM

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:


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.

Isarra added a comment.Jun 7 2018, 9:39 AM

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

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

Vvjjkkii renamed this task from Tablet-view for responsive MonoBook to 7obaaaaaaa.Jul 1 2018, 1:05 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from 7obaaaaaaa to Tablet-view for responsive MonoBook.Jul 1 2018, 10:41 PM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.
Evad37 moved this task from Backlog to Responsive MonoBook on the MonoBook board.Aug 21 2018, 7:29 AM

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

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

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

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

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

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

From the latest patchset:

Mobile:

Tablet: