Giters

phoenixframework / phoenix_live_dashboard

Realtime dashboard with metrics, request logging, plus storage, OS and VM insights

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use Multi-Column Layouts

yordis opened this issue · comments

commented

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.
commented

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.

commented

@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

commented

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!

commented

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!

commented

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