Meta Issue:#1870944: [Meta] Mobile friendly admin pages
This is a follow up issue to #1276908: Administrative tables are too wide for smaller screens

Problem/Motivation

Admin pages with multiple columns that need usability review on NARROW screens
Admin URL:

  1. admin/config/content/formats - 3 column
  2. admin/config/people/accounts/fields - 7 column
  3. admin/config/people/accounts/display - 5 column
  4. admin/config/regional/date-time - 4 column
  5. admin/config/user-interface/shortcut/% - 3 column
  6. admin/people/permissions - 4 column
  7. admin/people/roles - 3 column
  8. admin/reports/updates/update - 3 column
  9. admin/reports/views-plugins - 4 column
  10. admin/structure/block - 4 column
  11. admin/structure/block/list/bartik, admin/structure/block/list/seven, admin/structure/block/list/stark - 4 column
  12. filter/tips = 4 column

Proposed resolution

Retain first & last column, hide other columns by default on narrow screens for:

  1. admin/config/content/formats - 3 column
  2. admin/config/regional/date-time - 4 column

To be determined for other pages

Remaining tasks

To be determined

Comments

Snugug’s picture

This is a terrible idea. There is no such thing as "not mobile content". If you want to hide this from small viewports, ask the following question: do we really need it for the large viewports. If we need it for large viewports, we should not hide it just because someone is on a smaller viewports. There are a plethora of responsive table solutions, we should implement one of them (or come up with our own) before we start willy-nilly hiding columns for small viewports.

shyamala’s picture

Title: Text formats admin page: Role column to be hidden in NARROW Screens » Handling admin pages with tables
shyamala’s picture

Issue summary: View changes

Added admin/config/people/accounts/fields & admin/config/people/accounts/display

shyamala’s picture

Issue summary: View changes

removed additional li

shyamala’s picture

Issue summary: View changes

added admin/config/regional/date-time

shyamala’s picture

Issue summary: View changes

added admin/config/user-interface/%

shyamala’s picture

Issue summary: View changes

Added admin/content and admin/content/comment

shyamala’s picture

Issue summary: View changes

Added admin/people/permissions

lewisnyman’s picture

This is the direction that has already been implemented in core. See the patch commited #1276908: Administrative tables are too wide for smaller screens

lewisnyman’s picture

Issue summary: View changes

Added admin/people/roles

shyamala’s picture

@lewisnyman updated issue as a follow to the patch implemented at #1276908: Administrative tables are too wide for smaller screens

shyamala’s picture

shyamala’s picture

Issue summary: View changes

Added admin/reports/updates/update, admin/reports/views-plugins,admin/structure/block, admin/structure/block/list/bartik, admin/structure/block/list/seven, admin/structure/block/list/stark

andypost’s picture

andypost’s picture

Issue summary: View changes

Edited no of columns

shyamala’s picture

StatusFileSize
new26.28 KB

Suggested resolution for admin/config/content/formats the text formats configuration page:

This page is a 4 column layout with the weights option.

In this page the Role column(2nd column) and the show weights option can be hidden by default in Narrow Screens. In Narrow screens the user will then be able to view the list of text formats and act on them. User will also be able to Toggle to "Show all columns".

Text Formats

shyamala’s picture

Issue summary: View changes

added filter/tips = 4 column

shyamala’s picture

Issue summary: View changes

removed admin/content as this works fine.

shyamala’s picture

An approach similar to the resolution detailed above needs to be adopted for admin/config/regional/date-time to retain retain first & last column in narrow screens.

shyamala’s picture

Issue summary: View changes

Removed admin/content/comment - works fine

shyamala’s picture

An Approach for pages:

admin/config/people/accounts/fields - 7 column
admin/config/people/accounts/display - 5 column
admin/people/permissions - 4 column
admin/structure/block - 4 column

For many of the Admin pages, we may not be able to selectively hide the columns, especially the field configuration pages, the user permissions page. For such pages we could adopt a solution similar to #1490402: Redesign tabs and the content header suggested by @LewisNyman

jwilson3’s picture

We can try to hide extra data in the existing tables that Drupal core produces in the Admin UI, but let's not forget that Drupal is built to be extensible.

If a site builder creates a table View for administrators, to replace or augment an existing admin page like /admin/content/content, and the Seven theme's layout completely *breaks* on this page, is it the sitebuilder's fault? IMHO, it's the theme's responsibility to support the fundamental issue of too much data in a row (or header) to fit into a narrow screen.

The obvious solution for this scenario is to add a wrapper around the view table, that denotes that the view is a table layout (this currently doesn't exist), and use overflow-y: scroll; on that wrapper. Then you come to the problem of keeping sticky headers in sync as you scroll horizontally. -- for me the solution here is also easy: simply don't allow sticky headers when the table header width is wider than the viewport width.

Thoughts?

jwilson3’s picture

Answering my own question, it looks like views already supports Responsive Tables #1796230: Support responsive tables based on the Filament Group's solution.

So with that in mind, where does this issue now stand?

lewisnyman’s picture

Let's work with the assumption that not every admin table will become a view. Let's finish implementing what we started in #1276908: Administrative tables are too wide for smaller screens

The obvious solution for this scenario is to add a wrapper around the view table, that denotes that the view is a table layout (this currently doesn't exist), and use overflow-y: scroll; on that wrapper.

Sadly that is not an adequate solution either, testing showed that it's incredibly difficult to keep track of which row is the one you want when scrolling horizontally.

lewisnyman’s picture

StatusFileSize
new1.42 KB

Ok I've applied the table solution to

admin/config/content/formats
admin/config/regional/date-time

I was going to do the others but I'm really struggling to find out where these are kept. Can someone drop me a hint with admin/config/people/accounts/field?

c4rl’s picture

andypost’s picture

We need to solve common trouble with tables in core #1876718: Allow modules to inject columns into tables more easily
So making columns and easy alterable

echoz’s picture

echoz’s picture

Issue summary: View changes

Retain first & last column, hide other columns by default on narrow screens for: admin/config/content/formats & admin/config/regional/date-time

lewisnyman’s picture

Issue summary: View changes
Status: Active » Closed (duplicate)

It feels like this was succeeded by #2280035: Add another responsive tables solution that doesn't hide content. Feel free to reopen though.