[UX] Layouts: Use icons within drop buttons on small/mobile screens

[klonos]

This came up in #1935 (comment)

@olafgrabienski

... The motivation of my suggestion was the not so nice look of the User Login block title and it's Configure link in two rows, but I ain't got no better idea yet ...

@jenlampton

Yeah, I've scowled at that block several times too. We could certainly override the sidebar width for a few of these layouts to make the most-common ones look better, but it would be ideal to find a solution that works for all of them. Would you please open a new issue about this problem so don't forget to come up with better ideas? :)

[olafgrabienski]

As the original discussion is spread across the mentioned thread, here a short summary:

• Regarding a layout with a Content and a Sidebar region with a 25/75% split on the front-end, I proposed to display the Sidebar a little wider on the the place-blocks page.
• The motivation was the not so nice look of the User Login block title and it's Configure link in two rows.
• @jenlampton wondered if my proposal would get confusing with more complicated layouts. And while we could override the sidebar width for most common layouts, a solution that works for all layouts would be better.
• Under the tacit assumption regarding the more complicated layouts, my idea changed: In narrow contexts (viewport, narrow blocks), don't provide more space to some regions but save space. To get an idea how to do that, I made some suggestions like changing floats and chopping text.
• @klonos mentioned better ways to chop text and suggested to use icon-fonts.

[klonos]

Yeah, having width proportions that do not match the actual layout does not seem right to me. I believe that most users would want/expect a WYSIWYG approach - not a WYSIAWYG one.

So, I think that replacing text with icons is a more suitable solution. The same buttons would include icon+text in a region where there is enough horizontal space but only icons when there's not enough space. Here's how it could look for block/region dropbuttons:

[klonos]

...but it seems kinda silly to have icons in dropbuttons. We could instead make them split-buttons and spare the users the extra clicks. Like so:

[olafgrabienski]

Wow, nice, especially the split-buttons!

The icons look very (too?) detailed, which font is it?

[klonos]

It's http://fontawesome.io/icons/ ...we already have a contrib module if you want to use it on any current project of yours: https://backdropcms.org/project/font_awesome ...and if you like Google fonts, there's also https://backdropcms.org/project/google_fonts (although it's font - not a font icons)

[quicksketch]

This suggestion looks great! Those split buttons could get tricky though... we'd need some CSS wizardry or possibly a JS behavior to add/remove classes. And of course we still have some icon indecision (see #364). In concept I love it. Now we just have to figure out implementation. 😄

Let's add the design audience here and make this a feature request.

[klonos]

...and make this a feature request.

😉

[klonos]

And of course we still have some icon indecision (see #364).

Seems that we don't have to wait for that, as we have been adding icons by converting font-awesome to .png (#1841). We can switch to font icons at a later point when #364 is implemented.

[klonos]

There's progress in #364, which might unblock this 😉