Page MenuHomePhabricator

Sortable table arrows overlap header text in Special:MessageGroupStats
Closed, ResolvedPublic

Description

  1. Go to https://translatewiki.net/wiki/Special:MessageGroupStats?group=wiki-betawiki&suppressempty=1&x=D
  2. See arrows overlapping text

image.png (583×1 px, 87 KB)

This started happening in 8cdfcc5fd4ba36b7c91ac8097390220de230f8ae. This is because the table on that page does not have the sortable class (used in the new style rule) but has jquery-tablesorter (used in the old rule).

Event Timeline

@Jdlrobson @Niedzielski @matmarex Please advise whether this should be fixed in Translate (how?) or will be fixed in jquery-tablesorter.

I can look at this today.

First reaction is that ideally we shouldnt have 2 classes that are used for the same thing but not knowing the history I'm not sure how plausible that is.

What's the history of the jquery-tablesorter class and how widely used is it? Could Translate wiki switch to the sortable class?

Clarification: Translate extension, not translatewiki.net. This will affect meta/mediawiki.org/etc too when the train runs this week (unless fixed before that).

The jquery.tablesorter module adds the 'jquery-tablesorter' class to all tables that have been made sortable. The 'sortable' class is actually not used by jquery.tablesorter at all; it is only used by mediawiki.page.ready to run tablesorter on such tables.

Therefore if you manually run tablesorter from your own code (e.g. Translate extension does that to put the sort order into the URL), the 'sortable' class is never added.

There are two ways we could easily fix this:

  • Make the CSS apply to both .sortable and .jquery-tablesorter
  • Also add the 'sortable' class when adding the 'jquery-tablesorter' class

I would prefer the second option, that would be consistent with jquery.makeCollapsible (compare to the 'mw-collapsible' and 'mw-made-collapsible' classes there).

Change 431643 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] jquery-tablesorter and sortable classes always added together

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

2nd option makes the most sense to me too. Ideally, in a follow up the Translate extension can add the sortable class within the HTML - to avoid reflows/repaints.

Change 431643 merged by jenkins-bot:
[mediawiki/core@master] jquery-tablesorter and sortable classes always added together

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

matmarex assigned this task to Jdlrobson.
matmarex removed a project: Patch-For-Review.
Vvjjkkii renamed this task from Sortable table arrows overlap header text in Special:MessageGroupStats to 6gdaaaaaaa.Jul 1 2018, 1:11 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Jdlrobson as the assignee of this task.
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from 6gdaaaaaaa to Sortable table arrows overlap header text in Special:MessageGroupStats.Jul 2 2018, 4:22 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to Jdlrobson.
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.