LemmyNet
Get rid of button groups and selects in favor of dropdowns with icons
Requirements
- [x] This is a feature request and not a bug report. Otherwise, please create a new bug report instead.
- [x] Please check to see if this request (or a similar one) already exists.
- [x] It's a single feature. Please don't request multiple features in one issue.
Describe the feature you'd like
In lemmy-ui, we have a few cases of bootstrap button groups, which don't look good on mobile due to wrapping, and take up too much space.
One example is the new instances type filter, but there are others on home and community:
This should be done like jerboa, using dropdown menus, probably with an icon instea of text:
Button groups make sense for commonly used actions like switching between Subscribed/Local/All feeds because they require less clicks. For less frequently used actions it makes sense to switch to dropdown.
Its also worth noting that the wrapping and spacing problem only exists on mobile, on large screens it works fine. So what we could do is change radio-button-group.tsx to render as button group on medium and large screens, while rendering as dropdown on small screens.
To add some more context here: I'd also like to get rid of most selects (except maybe the searchable / input ones), in favor of these dropdowns with icons.
Examples:
| android menu | bootstrap dropdown | bootstrap select |
|---|---|---|
With dropdowns, you can use icons (or text if you want), for not just the main button, but also for each option. And once a selection is chosen, the input box can stay small.
With selects, you can't use icons, and it expands to the width of the selection text.
More on android menus (their dropdowns) here.
The radio groups are even worse than all these, not being mobile friendly
Its also worth noting that the wrapping and spacing problem only exists on mobile, on large screens it works fine. So what we could do is change radio-button-group.tsx to render as button group on medium and large screens, while rendering as dropdown on small screens
I'd rather not make special cases just for large screens when it comes to these components, especially since the dropdowns work fine on every screen size, whereas the wide radio button selections only look good on large devices. That's a lot more work and duplicated handlers for no benefit.
Its pry fine to use radio buttons if they're icon only, and only limited to 1 or 2 items, but with anything more (especially with text), they're going to look terrible on mobile, as shown in the top comment.
Again all these arguments make sense for mobile, but not for large screens. Its good to improve the UX for mobile but that shouldnt negatively affect desktop UX.
So when you implement this make sure to use radio-button-group.tsx or a similar component for all these. Then it will be easy to render as dropdown on mobile or if there are more than 3 options. If its large screen and 3 or less options it can render as button group.
I promise that using dropdown menus won't negatively affect large screens. We're already using them in a lot of places where there are simply too many options to try to squeeze into limited horizontal space, and vertical dropdown menus work better even for small numbers of options. Maintaining both wide radio button groups, and the more responsive dropdowns would just be unecessary work.