Page MenuHomePhabricator

Improve tabular data styling
Closed, ResolvedPublic

Description

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

Initial style:

Full pageTable only
initial@2x.png (2,560×1,308 px, 410 KB)
table@2x.png (1,008×550 px, 84 KB)

Event Timeline

Current raw styling
Screen Shot 2016-12-15 at 10.48.42 AM.png (2,532×1,406 px, 372 KB)
Work in progresstable only
Screen Shot 2016-12-15 at 10.50.38 AM.png (2,538×1,402 px, 395 KB)
Screen Shot 2016-12-15 at 10.57.43 AM.png (938×564 px, 80 KB)

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

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

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

Full pagetable only
Screen Shot 2016-12-15 at 4.11.28 PM.png (2,530×1,406 px, 365 KB)
Screen Shot 2016-12-15 at 4.11.45 PM.png (980×704 px, 93 KB)
Another example : BEFOREAFTER
Screen Shot 2016-12-15 at 4.20.59 PM@2x.png (2,530×1,408 px, 471 KB)
Screen Shot 2016-12-15 at 4.17.51 PM@2x.png (2,530×1,404 px, 430 KB)

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

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

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.

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.

Screenshot:

Screen Shot 2017-04-17 at 1.04.03 PM.png (980×756 px, 105 KB)

/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.