[META] [UX] The Configuration page (/admin/config) needs some love.

[klonos]

This can evolve to be a meta issue if it turns that there's a lot of tasks and we need to keep them separate. So far I see these issues that need to be addressed:

• [UX] Provide an instant search filter for the Configuration page (/admin/config). #978 The page could use an instant search filter (like on the modules page)
• [UX] Add back the hide/show descriptions toggle in the Configuration page (/admin/config). #979 Add a "Hide/Show descriptions" link like in D7/D8:
• TBD The categories and their containing entries should be in parity with whatever grouping we decide for [UX] Re-organize modules into more useful groupings on the modules page #494. If we want to "automate" this, we should look at implementing something like Is it posible to build the configuration page by grabbing modules that have a "configure" operation from the modules list? #508.
• [UX] Config page: Add icons to the config sections. #1178 Add icons to the config sections for better scanability
• [UX] Fix the sort order on the admin/config page #2828 The categories seem to be in random order. They should be in alphabetical order (unless somebody has another suggestion). and ...
• [UX] Fix the sort order on the admin/config page #2828 (see [UX] Fix the sort order on the admin/config page #2828)| The items under each category seem to be randomly placed as well. They should be listed alphabetically (unless somebody has another suggestion).
• [UX] Fix the sort order on the admin/config page #2828 We use a two-column layout that is not responsive and by default makes the page unnecessarily long on wide screens. Perhaps we should consider using a responsive grid or an accordion or some other solution that wraps the categories under each other in small screens.

[klonos]

...makes the page unnecessarily long on wide screens.

This is what I mean:

[klonos]

A quick and dirty solution for 1.0.0 could be to go with the alphabetical ordering for both the categories themselves as well as the items within each one of them. Is this page generated statically?

I don't know how easy it'll be to implement the search filter. I guess we could reuse the code from the modules list, but if we cannot make it happen in 1.0.0 we'll have a chance at some 1.0.x ...but it would be a win to see it in 1.0.0. It's those tiny details that'll make people like Backdrop over Drupal.

The responsive part can wait for a 1.x I guess, but again, the soonest we can demonstrate responsiveness in the admin UI, the better.

Anyways, my point is lets improve as we go.

[klonos]

...and here's how ugly the page looks in narrow screens:

...and as the screen gets narrower, the page becomes uglier:

...and uglier (text starts bleeding outside its containers):

[docwilmot]

Single column alphabetical is a quick fix:

But two column alphabetical responsive would take some work, and maybe javascript - you'd have to ensure its alphabetical down the left column then down the right so it makes sense when the breakpoint happens, then you'd need to calculate the combined heights of the boxes in each column. Or maybe just count the number of links in total and divide by two, but it would never be evenly divided left and right.

The 'admin/structure' page is similar design but single column, so that may not be altogether unacceptable.

[klonos]

Single column alphabetical is a quick fix: ... But two column alphabetical responsive would take some work

As I said, lets move one step at a time. This is better than what we (as well as D7/D8) currently have in place. So I say lets get it in and improve later.

[klonos]

...github does not have issue summary versioning, so letting you know I've added another task:

• Add a "remove descriptions" link like in D8.

[quicksketch]

We use a two-column layout that is not responsive and by default makes the page unnecessarily long on wide screens. Perhaps we should consider using a responsive grid or an accordion or some other solution that wraps the categories under each other in small screens.

I'd like to see this converted to be a responsive layout, that keeps its two-column appearance until two columns become two narrow, then convert to one. The PR at backdrop/backdrop#610 just converts it to a single column listing for all layouts, which I don't think is a complete solution.

Add a "remove descriptions" link like in D8.

We actually removed the show/hide descriptions link specifically to reduce UI elements (#129). We can reconsider, but let's weigh the advantages of having vs. excluding.

The page could use an instant search filter (like the one we have in the modules page): #503

Some other pages need instant search more than others, this one doesn't need it as much as

[klonos]

I'd like to see this converted to be a responsive layout, that keeps its two-column appearance until two columns become two narrow, then convert to one. The PR at backdrop/backdrop#610 just converts it to a single column listing for all layouts, which I don't think is a complete solution.

True, but since we are going to have 1.0.x versions shipped soon(ish), how about we consider going with an interim quick fix so that this page looks decent in small screens in 1.0.0 (It will be another UX issue that Backdrop 1.0.0 fixed compared to D8) and then work towards finding a solution for 2 columns that apparently requires more time. In the meantime we can focus our energy on the rest of the pending issues that stop 1.0.0 getting out the door.

We actually removed the show/hide descriptions link specifically to reduce UI elements (#129). We can reconsider, but let's weigh the advantages of having vs. excluding.

Sorry, I missed that issue. IMO before removing things (modules, features, UI elements etc) we should have metrics to back the decision. Just doing things and expecting people to complain about missing them is not a good practice because people might not be bothered to actually take action (file an issue or make a comment). Having a lot of such trivial complains build up might result in losing user base and we cannot afford it at the moment.

Having said all that, I think it is a good idea that descriptions should be set to be hidden by default in small screens so that this page works more like a small usable menu list rather than a very long config options index. In large screens on the other hand we have space to "waste", so we could default to showing the descriptions. Now because all these are assumptions and you could easily have people in large screens that are Drupal old-timers and already know what these links do, so they'd most likely choose to hide the descriptions in order to unclutter the page. Similarly, you could possibly get new-comers that are testing things on mobile devices and could use the guidance. With no show/hide element available, you deprive both user groups the choice and reduce UX quality. Especially in the case of people that know their way around this page, you choose to remove the element in order to unclutter the UI, but you end up leaving them with what they consider clutter and no option to get it out of their way. This totally defeats the purpose the way I see it.

As for the search filter, if we do end up implementing something like #508 in order to automate things and as people add more modules to their site, the more chances are you'd have additional contrib entries in this page. Eventually, you'll end up having the same issues in this page that lead us implementing the filter in the modules page in the first place.

[klonos]

...if we choose to adopt something generic (NIH) instead of "cooking" our own, then http://designinstruct.com/web-design/responsive-css-grid/ seems to have a pretty good collection/comparison of open source, free CSS responsive grid systems. My favorites are the Responsive Grid System and the Simple Grid

[docwilmot]

For the short term though, removing the left and right CSS from Seven (we cant add responsive CSS to Seven because the user may not use Seven as his admin theme) and adding this to system.admin.css does the trick nicely:

/**
 * Responsive columns.
 */
@media screen and (max-width:450px) {
  div.admin {
    margin: 0; /* LTR */
    padding-right: 4px;
    padding-left: 4px;
  }
  div.admin .left {
    float: left; /* LTR */
    width: 100%;
  }
  [dir="rtl"] div.admin .left {
    float: left;
  }
  div.admin .right {
    float: left; /* LTR */
    width: 100%;
  }
  [dir="rtl"] div.admin .right {
    float: left;
  }
  div.admin-panel .description {
    display: none;
  }
}
@media screen and (max-width:780px) {
  div.admin {
    padding-right: 4px;
    padding-left: 4px;
    margin: 0; /* LTR */
  }
  div.admin .left {
    float: left; /* LTR */
    width: 100%;
  }
  [dir="rtl"] div.admin .left {
    float: left;
  }
  div.admin .right {
    float: left; /* LTR */
    width: 100%;
  }
  [dir="rtl"] div.admin .right {
    float: left;
  }
}

What do you think?

[docwilmot]

Narrow screens (hide descriptions with CSS)

Medium screen size (iPad landscape for eg)

Wide screen

[klonos]

I think this is a fine interim solution that fixes the original issue I reported. Lets ship 1.0.0 with this simple solution and improve as we go.