Page MenuHomePhabricator

Add sortability to sortable tables for readers of the mobile web site
Closed, ResolvedPublic3 Estimated Story Points

Description

Per User:Nick_Moyes and @TheDJ at https://www.mediawiki.org/wiki/Topic:V6nknm0p8uc8mtao people who read Wikipedia articles on their mobile devices are unable to sort tables, even when the tables are marked as sortable in the wikitext.

See also:
T181452: Add sortability to tables with "sortable" class in the Android app
T232046: As a reader using the iOS app I would like to be able to sort tables

Background

Here's the feature in action on desktop:
https://en.wikipedia.org/wiki/List_of_COVID-19_deaths_in_South_Africa

Enabling it on mobile is trivial (mw.loader.load('jquery.tablesorter'); $('.sortable').tablesorter();' ) and I'm surprised a gadget hasn't done it out of frustration of this ticket being open so long.

tablesort.gif (450×1 px, 277 KB)

On mobile the code is functional, however looks a bit odd. We likely want to tweak the CSS to fully fix this issue (a small amount of work)

mobiletablesort.gif (568×446 px, 431 KB)

Related Objects

Event Timeline

Jdlrobson added a subscriber: Jdlrobson.

The mw-collapsible code and the sortable code are currently tightly coupled - so enabling sortable requires enabling the other as well. We could modify core to make it possible to do one without the other.

ovasileva triaged this task as Medium priority.Sep 20 2019, 9:30 AM
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.

Updated permalink with my second on the request for mobile sortability: https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1004345968#Sortable_tables_on_mobile
May I change the priority to high? This is very disappointing that mobile users are *still* unable to make use of what article authors want readers to be able to do.

The glorious implementation of Template:Static row numbers has finally allowed the easy addition of fixed, static row numbers as an integrated column on any table.

The only problem is that the lack of sortable tables in the mobile view causes a slight problem in mobile view only. Without some weird CSS magic in the template CSS the number "1" starts in the header cell. Instead of the topmost data cell where it should start.

This only occurs in mobile view when class=sortable is used on the table. It doesn't occur in mobile if the class is not used.

For example tables, links, and explanatory notes see:
*User:Timeshifter/Sandbox144 - Click the desktop and mobile view links at the bottom of the page.

In no case is there a problem in desktop view. For discussion and more technical details see:
*Template talk:Static row numbers/styles.css

With my very limited understanding of CSS I gather that the knowledge of this CSS tweaking, and the need for it, may help in fixing the problems in adding sortability in mobile view.

@Timeshifter: Hi, local templates on a wiki are maintained by that wiki community. Please bring up any problems with local templates on that wiki.
This task is about code in software repositories instead. Thanks a lot!

On mobile the code is functional, however looks a bit odd. We likely want to tweak the CSS to fully fix this issue

This (a fullscreen/rotate button for tables) may be relevant to that: https://phabricator.wikimedia.org/T66577#6335259 The gif nicely shows how the table is not well displayed/browsable on mobile. Other than that, clicking on a table header to sort could have a visual feedback: making the header cell shortly flash in blue (like the hovered rows).

Thanks for the ping. Above you noted

The mw-collapsible code and the sortable code are currently tightly coupled - so enabling sortable requires enabling the other as well. We could modify core to make it possible to do one without the other.

Is this still true as far as you're aware?

We've fixed that since as part of desktop improvements where we needed to override search (T250851).

Remaining work is:

  • Adding some CSS for lower resolutions. I think probably these sortable indicators should appear below the text on mobile given the limited screen real estate. Also for usability they need a larger touch area. (screenshot from List_of_European_Cup_and_UEFA_Champions_League_finals?useskin=minerva)

Screen Shot 2022-06-06 at 7.35.12 AM.png (682×1 px, 95 KB)
Screen Shot 2022-06-06 at 7.36.48 AM.png (6×2 px, 1 KB)

Change 804454 had a related patch set uploaded (by Aklapper; author: EllenR):

[mediawiki/skins/MinervaNeue@master] Add sortability to sortable tables for mobile web

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

Testing the WIP patch via Patch Demo (on desktop and my mobile device) and it seems pretty functional to me - the arrow placement looks better than in the gif in the task description (I assume some related CSS/JS changes happened since?) and because the entire cell is interactable I didn't have any problems sorting the table. It doesn't accidentally trigger while scrolling either.

Screenshot 2022-06-16 at 13.01.56.png (543×337 px, 69 KB)

@Jdlrobson in Gerrit you mentioned "They are not big enough for my large thumbs so this doesn't look great from an accessibility standpoint (it's very easy to scroll down the page and accidentally sort the tables)". Could you elaborate on the issue you're seeing?

I'm playing around with this on https://patchdemo.wmflabs.org/wikis/6e0742c69c/wiki/New_York_Yankees

It definitely looks better than I remember it.

If we're going to enable it for every user I would feel more comfortable if a designer took a look at this and signed off on it. (this is a jquery plugin built for desktop which never had any kind of design review.)

While testing the patch on a mobile device (iPhone SE 2nd gen) I could see that the whole table header cell is a touch area, which definitely improves the ergonomics for people with "large thumbs". I could also see that if a person tries to specifically tap on the small caret icon, there's a pressed state feedback (darker background color), that can help convey that the whole cell is tappable. +1 from a design standpoint!

This all sounds good to me then! I don't think you need any web team assistance to complete this work then. Feel free to ping me directly or tag Readers-Web-Backlog (Kanbanana-FY-2021-22) if you need anything else from us.

Change 804454 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add sortability to sortable tables for mobile web

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

Thanks all! It would be great to get this in the next Tech News, summary below:

Users can now sort sortable tables in the mobile skin

This is now live.

Per https://meta.wikimedia.org/wiki/Talk:Community_Wishlist_Survey_2022/Mobile_and_apps/Table_sorting_on_mobile there may be some issues with static row numbers on enwiki, but I suspect this is a local CSS issue rather than something that needs fixing by us. Waiting for someone more knowledgeable to confirm.