Page MenuHomePhabricator

Improve tabular data styling
Closed, ResolvedPublic


We should make the new tabular data feature consistent with Wikimedia UI and UX guidelines.

Initial style:

Full pageTable only

Event Timeline

JGirault created this task.Dec 12 2016, 7:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 12 2016, 7:34 PM
JGirault moved this task from Backlog to In progress on the Maps-Sprint board.Dec 12 2016, 7:35 PM
JGirault updated the task description. (Show Details)Dec 12 2016, 7:39 PM
JGirault added a comment.EditedDec 15 2016, 6:51 PM
Current raw styling
Work in progresstable only
JGirault added subscribers: Nirzar, Volker_E.
Yurik added a subscriber: Yurik.EditedDec 15 2016, 9:41 PM

Something else to consider: There may be a number of unusual usage cases that we should also consider for the design. For example, the table may be ultra wide, and have very few rows, or no rows at all. Usage example - I'm building a template, and need a translation table - "id" -> { "en":..., "fr":..., ... } -- for that I can simply use an empty table with localized headers. Or another use case - configuration values - a one row system, each column being another setting. Lots of options here :)

For these cases, I think we should do a vertical layout instead of horizontal. Ideally, it should switch dynamically, just like WDQS does with its results - if its too wide.

I'd like to emphasize that – when speaking about guidelines – we not only need to look at the presentational layer, but also the structural/semantical one in order to include elements for best-possibly serve assistive technology or bots.
And for the presentational layer responsiveness were a major win. Pau and I had some rudimentary conversations about this several months ago.

Change 327671 had a related patch set uploaded (by JGirault):
Improve tabular data styling and bring consistency with M82

JGirault added a comment.EditedDec 16 2016, 12:13 AM

Thanks to great collaboration with @Nirzar, this is where we're at:

Full pagetable only
Another example : BEFOREAFTER

Change 327671 merged by jenkins-bot:
Improve tabular data styling and bring consistency with M82

I like the progress!
One thing that I'd consider as optional flag/class for a table for desktop/mouse users, especially on large data tables is a lightweight :hover effect on the table row/column to find their way through the data.

Yurik moved this task from Needs review to Done on the Maps-Sprint board.Jan 3 2017, 11:10 PM
JGirault closed this task as Resolved.Apr 17 2017, 8:07 PM

This is how it looks now, I'm gonna mark the ticket as resolved. I think it's gotten much better, it's consistent with the new color palette, and there hasn't been any activity for a while.


/cc @Volker_E

@JGirault I think it's good to change it to resolved. One last comment though, I'd remove italics in descriptions to respect CJK languages.