⚓ T233340 Add sortability to sortable tables for readers of the mobile web site
- ️Thu Sep 19 2019
Event Timeline
There are a very large number of changes, so older changes are hidden. Show Older Changes
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: In no case is there a problem in desktop view. For discussion and more technical details see: 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.
*User:Timeshifter/Sandbox144 - Click the desktop and mobile view links at the bottom of the page.
*Template talk:Static row numbers/styles.css
@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?
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. @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!
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
Thanks to the team for implementing this! Really appreciate it getting done after being supported in the community survey! It works great on the mobile browser interface, though I'm wondering if it will also be included in the next update of the iPhone app?
Thanks to the team for implementing this! Really appreciate it getting done after being supported in the community survey! It works great on the mobile browser interface, though I'm wondering if it will also be included in the next update of the iPhone app? The Android and iPhone apps are independent of mobile web. It seems that for some reason the corresponding iPhone app task was declined: T232046. You may need to ask there to find out why. 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. Also a quick note that this was fixed on enwiki.
One more issue: preload via Skin::getDefaultModules() should be allowed to avoid the separate load request in a fresh environment.
