search

mavoweb / mavo

Create web applications entirely by writing HTML and CSS!
https://mavo.io
MIT License
2.84k stars 176 forks source link

When there are too many buttons for available width of the mv-bar, all disappear #655

Open karger opened 3 years ago

karger commented 3 years ago

Mavo lets you add buttons to the mv-bar. But if you have an app on e.g. a phone, not many of those buttons fit on a line. If they extend beyond, all of them vanish. Perhaps a better option would be for them to wrap? https://codepen.io/karger/pen/NWrVoyj?editors=1100

raytran commented 3 years ago

This seems to be intended behavior? https://github.com/mavoweb/mavo/blob/243feed58e3a57743262bd8234e63bf9d05fbe4e/src-css/_bar.scss#L185-L191

Deleting the & > button selector and adding a flex-wrap: wrap to .mv-bar makes the buttons wrap as desired. I'm not sure why normal buttons should be hidden anyway? Perhaps a better option would be a dropdown hamburger menu or something similar.

DmitrySharabin commented 3 years ago

Since all the UI in Mavo is fully customizable via CSS, what if we just let authors decide how they want their apps to be styled? Whether they want the buttons to wrap, be replaced with a hamburger menu, or be styled somehow else. We already provided the default styling, and the rest is on their side. No?

LeaVerou commented 3 years ago

@DmitrySharabin I tend to favor convention over configuration as a design principle in the APIs I design. As famous computer scientist Alan Kay put it “Keep simple things simple, and complex things possible”. How do these principles translate to this issue? Custom styling should be possible, but we should still ship with sensible defaults that can be used out of the box without further configuration.

Currently, on small screens, the buttons become icon buttons. There is a test here (ignore the second line): https://test.mavo.io/bar.html#sizing image

However, I like Raymond's proposal about a hamburger menu. The upside of icon buttons is efficiency, once learned (only one click, since they're all right there), the downside is learnability, for the icons that are non-obvious. The hamburger (or more conventionally for toolbars, a downwards triangle) menu can maintain the text, so is more learnable. It also scales better to toolbars with many buttons, that wouldn't fit even as icons.