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 (1×2 px, 410 KB)
table@2x.png (550×1 px, 84 KB)

Event Timeline

Current raw styling
Screen Shot 2016-12-15 at 10.48.42 AM.png (1×2 px, 372 KB)
Work in progresstable only
Screen Shot 2016-12-15 at 10.50.38 AM.png (1×2 px, 395 KB)
Screen Shot 2016-12-15 at 10.57.43 AM.png (564×938 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 (1×2 px, 365 KB)
Screen Shot 2016-12-15 at 4.11.45 PM.png (704×980 px, 93 KB)
Another example : BEFOREAFTER
Screen Shot 2016-12-15 at 4.20.59 PM@2x.png (1×2 px, 471 KB)
Screen Shot 2016-12-15 at 4.17.51 PM@2x.png (1×2 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 (756×980 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.