Tables on several pages, especially admin pages, are too wide for narrow screens. Mobile users have to zoom in to read the columns for administrative tables. This requires horizontal scrolling to read the rest of the row and it becomes difficult to track which row the user is looking at.
This patch implements the "Maggie" approach discussed in #2 - #4. We implemented A Responsive Design Approach for Complex, Multicolumn Data Tables, but chose to simplify the UX with a single link to 'Show all columns' instead of a 'Column' selector widget. The Show all columns toggle is smart enough to show only when there are hidden columns.
There is a new, simple API for callers to
$header can now add an
RWD_ADVISABLE (RWD is a common acronym for Responsive Web Design) class or a
RWD_HELPFUL class. Both of these are hidden for narrow devices; advisable shows up for tablet widths, and helpful columns show up for desktop widths. Columns with no responsive class are assumed to be essential and always shown. See node.admin.inc and others in this patch for a use examples.
- The 'Show row weights' link should be on the same line as the 'Show all columns' toggle link.
4. the regex thing looks ugly, can't we get rid of the
$().hide()it comes from?
We plan to use
drupal-cell-hiddenclass as per #68.
User interface changes
Columns are hidden for narrow devices. Show all columns link shows columns that are hidden.
theme_table() now accepts two new classes on header cells and a
'responsive' => FALSE in
$variables will disable all responsive handling.