Page MenuHomePhabricator

Enable collapsible templates (including infoboxes) on mobile
Open, MediumPublic

Assigned To
None
Authored By
Thnidu
Sep 4 2015, 8:39 PM
Referenced Files
F23285304: expandable-template-mobile.png
Jul 3 2018, 8:58 PM
F8549770: Screen Shot 2017-06-28 at 4.06.29 PM.png
Jun 28 2017, 11:07 PM
F8517080: collapse-table.png
Jun 23 2017, 10:45 PM
F8517084: image.png
Jun 23 2017, 10:45 PM
F8516927: Screen Shot 2017-06-23 at 2.33.49 PM.png
Jun 23 2017, 9:43 PM
F8516928: Screen Shot 2017-06-23 at 2.33.55 PM.png
Jun 23 2017, 9:43 PM
F4596023: Screen Shot 2016-10-12 at 1.47.36 PM.png
Jun 23 2017, 9:29 PM
Tokens
"Piece of Eight" token, awarded by whym.

Description

NOTE: The code that provides collapsible content currently resides in mediawiki.page.ready which also provides functionality for sortable tables which is captured in the sister task T233340

Problem

On the desktop, Same-sex marriage in Kentucky (and other US states) looks fine. Template:Same-sex unions runs down the right-hand side of the page, taking only about one-third of the width available for text (on my laptop at a size comfortable for my old eyes), and only its first section, Marriage, is expanded; the other three, Civil unions and registered partnerships, Unregistered cohabitation, and See also, are initially collapsed, with a "[Show]" button.

On my smartphone,* though, the template comes up fully expanded at almost the very top of the page, with only the title and the lead graphic above it. I have to scroll five full screens to reach the first line of text. Need I say how awkward this is? especially with the risk of tapping a link as I tap-scroll down.


* Samsung Verizon Android Galaxy S-3, model SCH-I535, OS v4.4.2

Infoboxes

On desktop, if an article has multiple infoboxes, we collapse each subsequent infobox after the first:

Screen Shot 2016-10-12 at 1.47.36 PM.png (569×1 px, 147 KB)

We don't do this on mobile and it takes up a lot of space
https://en.m.wikipedia.org/wiki/California

Plan

MinervaNeue should

  • Load mediawiki.page.ready /Users/jrobson/git/core/resources/src/mediawiki/page/ready.js
  • Provide styling (see Design) for collapsing as a skinStyle for the jquery.makeCollapsible module

Design

expandable-template-mobile.png (667×375 px, 114 KB)

  • bg color remains the same #f8f9fa
  • icon is a small version of mw-ui-icon-mf-arrow (same as toggle) but in blue color. (see related T198770)
  • "Show more" button is 14px, blue, normal weight. Note, that the text of the button comes from editors so don't worry about the copy text here. We cannot change it.

Acceptance criteria

  • Update SkinMinerva::getDefaultModules to include jquery.makeCollapsible when requested - see https://gerrit.wikimedia.org/r/431662 POC: Enable collapsible elements on Minerva is a proof of concept.)
  • Add new styles for Minerva, ensuring they do not cause FOUC when loaded and collapsed elements begin collapsed.
  • This is used in various ways by editors (see T199924: Hidden images in vector arwiki display in Minerva) some community outreach/testing as part of deployment would be advisable.
  • Enable the config option inside the PageReady hook

Developer notes

https://gerrit.wikimedia.org/r/431662 POC: Enable collapsible elements on Minerva is a proof of concept.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson lowered the priority of this task from Medium to Low.Apr 9 2019, 4:14 PM

Reflecting reality

Jdlrobson raised the priority of this task from Low to Medium.Aug 14 2019, 8:37 PM

Bumped as I think this will be important for desktop refresh and AMC.

Jdlrobson renamed this task from Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) to [EPIC] Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables).Jan 17 2020, 10:31 PM

How close are we to letting jquery.makeCollapsible work on Minerva? This is currently blocking some simplification logic in core (merging mediawiki.page.startup and mediawiki.page.ready). This is up for review at https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/574133/, where the combined entity will be part of modules[core][] instead of modules[content][]`.

In its current state it would effectively bypass the code in Minerva that is currently dequeuing this module (source).

There are a few challenges with getting these features working. IF that's the goal it's a little trickier. If the goal is simply to get the module loaded in the page that's a different story...

Could we enable this module but disable the code from running on Minerva by using packageFiles and a function that returns whether the feature is enabled or not? That way product work would not block your work and I think we could check a quick solution.

If we need to get the feature working it's mostly an issue of reading web priorities. I advise you make a formal request via the performance team to Olga if this needs to happen. Table sorting on mobile has some serious UX problems on mobile they we've been unable to find solutions for yet (T233340) and I don't see any quick fix.
Solving makeCollapsible is much clearer and I could do that given the time (which due to desktop refresh is currently lacking).

Jdlrobson renamed this task from [EPIC] Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables) to Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables).Mar 17 2020, 4:29 PM

Possibly might be helpful in fixing T247701: Make sure COVID19 page to be readable on all form factors.

Jdlrobson removed the point value for this task.Mar 17 2020, 6:20 PM

(Also resetting estimation as this is essentially 2 subtasks now and the collapsing is one of those (sortable tables is the other)

Jdlrobson renamed this task from Enable mediawiki.page.ready on Minerva (collapsible templates (including infoboxes) and sortable tables) to Enable collapsible templates (including infoboxes) on mobile.Mar 18 2020, 12:07 AM
Jdlrobson updated the task description. (Show Details)

Why don't we use summary tag to make collapsable element?. It's HTML5 built-in feature, and supported by all browsers. And the good thing about it that this tag doesn't need Javascript to work.

Why don't we use summary tag to make collapsable element?. It's HTML5 built-in feature, and supported by all browsers.

When it comes to IE/Edge, I think only Edge from this year (version 79–) supports the summary-tag, and according to the included link, it doesn't work with screen readers. So, it doesn't really seem to be a viable option.

@ASammour it's a really good idea but since infoboxes are defined in templates such an idea would have to happen inside a template. The summary tag can be used in older browsers and will render fine in IE11 - it just won't be collapsible which IMO is acceptable.

However it looks like the parser doesn't support summary and details elements. We'd need to add that first by requesting it at MediaWiki-Parser

https://caniuse.com/#search=summary

However it looks like the parser doesn't support summary and details elements. We'd need to add that first by requesting it at MediaWiki-Parser

T31118: Add HTML 5 semantic elements 'details' and 'summary' to Sanitizer whitelist

I fixed this in Bawl (for the whole page) and the same code is part of EditNoticesOnMobile (T312299) for edit notices. Just search the source for "T111565". It's really nothing spectacular.

It works and I haven't heard any complaints yet.

Aklapper removed subscribers: pmiazga, Tfinc, Nirzar.

Removing task assignee due to inactivity as this open task has been assigned for more than two years. See the email sent to the task assignee on August 22nd, 2022.
Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome!
If this task has been resolved in the meantime, or should not be worked on ("declined"), please update its task status via "Add Action… 🡒 Change Status".
Also see https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator. Thanks!

Change 859605 had a related patch set uploaded (by Jdlrobson; author: Bartosz Dziewoński):

[mediawiki/skins/MinervaNeue@master] Allow collapsible content in Minerva

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

Change 859605 abandoned by Bartosz Dziewoński:

[mediawiki/skins/MinervaNeue@master] Allow collapsible content in Minerva

Reason:

I will submit a specific patch for T323639 (collapsible mobile talk page banners), since everyone else wants a more complex solution for T111565 (collapsible content on mobile in general).

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