Page MenuHomePhabricator

mw-datatable/TablePager tables need to be visually updated and aligned to wikitable
Open, NormalPublic

Description

Coming from T214128, we should also visually update and align TablePager tables to wikitable appearance.
There's no valid reason to have table headers in this distinct color, which is not part of the Wikimedia Design Style Guide color palette, putting interface over content.

It's currently in use at

  • Special:AllMessages
  • Special:BlockList
  • Special:ListFiles
  • Special:ProtectedPages
  • Replace th color
  • Unify padding with wikitable
    • Unify TablePager tables padding (and remove as soon as mw-datatable receives same padding)
  • Cleanup CSS naming scheme
    • Remove TablePager class altogether and only rely on mw-datatable
    • Replace all TablePager derived classes

TablePager class usage:

  • Extension AbuseFilter
  • Extension CloseWikis
  • Extension SecurePoll
  • Extension PageAssesments
  • Extension Theme
  • Extension Linter
  • Skin Daddio
  • Skin Truglass
  • Skin WPTouch
BeforeAfter

Event Timeline

Volker_E created this task.Jan 18 2019, 9:47 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptJan 18 2019, 9:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E updated the task description. (Show Details)Jan 18 2019, 10:08 PM

We should not only do this for TablePager, but for .mw-datatable as a whole.

@alexhollender It might be advantageous to leave a slight touch of purple in the table headers in order to not fall for only grey and blue in those data tables. #eaeeff seems like a good choice to me.
Example of current mw-datatable usage (enwiki): https://en.wikipedia.org/wiki/Special:Tags
Example of current mw-datatable TablePager usage (enwiki): https://en.wikipedia.org/wiki/Special:AllMessages

Would be good to have a second design opinion here…

Izno updated the task description. (Show Details)Jan 18 2019, 11:59 PM

Also, let's state clear that .mw-datatable changes should probably go into a feedback process with community, but we can use .TablePager as testbed for possible changes.

Change 485349 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Datatable: Unify padding with .wikitable

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

Change 485350 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] TablePager: Unify padding with .wikitable

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

Volker_E renamed this task from TablePager tables need to be visually updated and aligned to wikitable to mw-datatables/TablePager tables need to be visually updated and aligned to wikitable.Jan 19 2019, 1:05 AM
Volker_E updated the task description. (Show Details)

Change 485350 merged by jenkins-bot:
[mediawiki/core@master] TablePager: Unify padding with .wikitable

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

@Krinkle I'd preferably get rid of the whole .TablePager class and just overwrite .mw-datatable in TablePager.less if it were loaded in the right order in RL. It's such schematic mess and after staring at all code applied I see 0 to maximal minimal (!) use cases for it.

Volker_E renamed this task from mw-datatables/TablePager tables need to be visually updated and aligned to wikitable to mw-datatable/TablePager tables need to be visually updated and aligned to wikitable.Jan 19 2019, 1:44 AM
Krinkle added a comment.EditedJan 19 2019, 1:46 AM

I can't say about load order offhand, but I definitely support removing the TablePager CSS class in favour of re-using mw-datatable.

They appear identical to me. Any overrides needed based on unique requirements from a specific special page could indeed be local overrides instead.

Volker_E updated the task description. (Show Details)Jan 20 2019, 6:51 PM

Change 485349 merged by jenkins-bot:
[mediawiki/core@master] Datatable: Unify padding with .wikitable

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

@Volker_E looks good to me. Just to confirm, with #eaeeff I'm seeing:

Volker_E updated the task description. (Show Details)Jan 24 2019, 12:07 AM
Volker_E triaged this task as Normal priority.Feb 5 2019, 5:35 AM
Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.
Volker_E updated the task description. (Show Details)Mar 13 2019, 7:01 AM
Iniquity added a subscriber: Iniquity.EditedMar 13 2019, 12:11 PM

Maybe we can use a different color for <th>? For example: #eaf3ff. You can see some information here T167186.

Hey @Iniquity, sorry, I haven't seen this.
Thanks for connecting the tasks. I hesitate a bit with using Accent90 as accent colors are meant to signalize interactive elements/feedback on user interaction.
The table headers for mw-datatables are a special element that should probably receive special visual treatment. Without further arguments, I propose to use #eaeeff as agreed upon with Audiences Reading design counterpart @alexhollender above.

Change 502048 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update table header color of .mw-datatable

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

Change 502048 merged by jenkins-bot:
[mediawiki/core@master] Update table header color of .mw-datatable

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

Iniquity added a comment.EditedApr 8 2019, 8:15 PM

This color is too purple for me, and purple is not used since monobook. And you have never seen it in StyleGuide :) For example, we completely removed old purple colors from navboxes and other tables in Russian Wikipedia.