backdrop
[UX] Layouts: Use icons within drop buttons on small/mobile screens
This came up in https://github.com/backdrop/backdrop-issues/issues/1935#issuecomment-225313699
@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? :)
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.
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:
...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:
Wow, nice, especially the split-buttons!
The icons look very (too?) detailed, which font is it?
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)
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. :smile:
Let's add the design audience here and make this a feature request.
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.