Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Multi-Column Layouts #319

Open
yordis opened this issue Aug 29, 2021 · 5 comments
Open

Use Multi-Column Layouts #319

yordis opened this issue Aug 29, 2021 · 5 comments
Labels
design Design related changes

Comments

@yordis
Copy link

yordis commented Aug 29, 2021

As of today, the main menu is long enough where it sometimes it doesn't fit horizontally, and with custom pages I suspect it will become a bigger issues.

Proposal

Move to Multi-Column Layouts, I took the name from Tailwind: https://tailwindui.com/components/application-ui/application-shells/multi-column. It looks something like the following:

Screen Shot 2021-08-29 at 5 54 19 PM

It would be something around the lines of (just making it work statically, and ugly):

Screen Shot 2021-08-29 at 5 57 32 PM

Benefits

  1. Vertical scale allows you to keep adding more menu elements without having issue with scrolling since vertical scrolling is easier than horizontal one when you have many items, here is a good reading: https://uxmovement.com/navigation/the-fastest-navigation-layout-for-a-three-level-menu/
  2. More space for the main content in terms of vertical spacing.

Drawbacks

  1. In Mobile layout, it would require adding a hamburger menu, therefore users are required to take two actions.
@josevalim
Copy link
Member

Yes, this is something we want to do, but I think it requires a more throuogh redesign than moving the column around, unfortunately.

One open question for the future is if we are going to have a catalogue for LiveView components and if it should be part of the dashboard. And by this time we will probably redesign it, but no immediate plans for now.

@josevalim josevalim changed the title [UI Request] Use Multi-Column Layouts Use Multi-Column Layouts Aug 29, 2021
@yordis
Copy link
Author

yordis commented Aug 30, 2021

@josevalim got it, also, note on this implementation detail, are you open to use Tailwind? I cut myself replicating the same classes so I dont to repeat in the HTML, so I am generally curious about the topic moving forward

@josevalim
Copy link
Member

josevalim commented Jan 30, 2022

FWIW, we have decided to keep the catalogue separate from the dashboard. There is also a request for night mode on #343. We should probably have a redesign!

@josevalim josevalim added the design Design related changes label Jan 30, 2022
@chrismccord
Copy link
Member

We would love someone to take this work on. To brand a dashboard 1.0, we need a few things:

  1. modernize the component system we have with function components
  2. rewrite layouts with tailwind, consider dark mode, and potential multi column as in this proposal

@yordis if you're interesting in taking this on, please let us know. Thanks!

@yordis
Copy link
Author

yordis commented Nov 4, 2022

@chrismccord. Do you have some design done, or do you prefer to do incremental updates and eventually get to "happy land"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design related changes
Projects
None yet
Development

No branches or pull requests

3 participants