@mattab opened this Issue on September 8th 2014 Owner

The goal of this issue is to implement Responsive tables in Piwik, to better account for the diversity of screen widths when using Piwik. For example the visible columns could automatically increase if there is more screen available.

Reference
Here is a great article that sum up the existing possibility for responsible table:
http://filamentgroup.com/lab/tablesaw.html

Solution 1 - Stack row:
1

Solution 2 - Toggle columns:
2

Solution 3 - Page columns:
3

Tasks

  • Discuss and prototype a good generic solution.
  • Test it:
    • on datatables in reports,
    • on two-column reports,
    • on widgets in dashboard.
  • Check edge cases: truncation, small screens, large screens
  • add screenshot tests testing for more screen widths (such as existing mobile use case screenshot in #5029 )

Notes

  • See also #3513, #5267
  • There are existing jquery plugin, for each solutions. So we can certainly do this in Piwik.
  • The table metrics picker is similar to our Graphs Metrics picker function so maybe these could be simplified.
@tassoman commented on September 8th 2014 Contributor

Well, responsiveness is cool :sunglasses: but is going the opposite direction of accessibility, maybe we could save our souls using WAI-ARIA :angel:

@mattab commented on May 27th 2016 Owner

@tsteur in Piwik 3 hopefully we will add a "scroll" feature to datatables so that our very wide tables with many columns (or a very long labels https://github.com/piwik/piwik/issues/6121) will be visible by scrolling to the right. Moving to 3.0.0 tentatively.

@tsteur commented on May 27th 2016 Owner

I assigned myself to #6121 but not to this one. As it won't be truly responsive :)

@sogen commented on October 23rd 2017

Can this one be closed too? The UI adapts to the available real estate.

@mattab commented on October 23rd 2017 Owner

Agreed it's much better now. Not sure if the issue is fully done though. What do you think @tsteur - should we leave this opened or rather create other tickets for specific issues?

@tassoman commented on October 23rd 2017 Contributor

I'd like to ask Mr @jdeyla about performing #a11y tests on 3.x branch ui

@tsteur commented on October 23rd 2017 Owner

It is better now, although not fully responsive I reckon, and we could close the issue. I presume there is another issue to make row actions work on mobile phones?

@mattab commented on October 24th 2017 Owner

I presume there is another issue to make row actions work on mobile phones?

According to quick testing now, the row actions are usable on Android (it was improved/fixed a few months ago)... or is there still a problem/something can be improved with row actions on mobile? @tsteur

Closing issue as the tables are "responsive enough" and quite usable.

@tassoman @jdeyla any a11y suggestion is welcome, please create a new issue with suggestion

This Issue was closed on October 24th 2017
Powered by GitHub Issue Mirror