A Home-Approved Dashboard chapter 1: Drag-and-drop, Sections view, and a new grid system design!

tbh, I was wondering that too, I am used to other graphs (mini-graph) and have colorful graphs there. For this I decided to stay core cards only, and this is what happens…
might be my primary-color they’re using, I need t investigate that, because it isnt very insightful to my eyes.

I do believe the original example in the Sections PR to the Frontend shows colored graphs, but they might be mushroom…

I agree with all of these problems /areas for improvement. I have also noticed that conditional cards take up quite a bit of space when hidden (condition not met) leaving big gaps between sections for example

2 Likes

This is awesome!!!

Next step, drag and drop to new pages and create pages by dragging and dropping onto the tab bar.

1 Like

Ohhhh , really like what I’m seeing there …

Really like the sections. It fix a problem with Google Nest Hubs as well which has problem calculating where to put the cards using masonry layout. I see one problem though which I’m not sure how to handle. The grid-section-min-width is set to 320px for the responsive design which mean only two columns will be used for Google Nest hub (1024x600). Is it any possibility to override the value? Using Chrome I can try to override it and it works perfectly with 290px for instance but I’m not sure how to do it in CSS

1 Like

It would be great with an alternative layout where sections are filled vertically instead of horizontally. It would make it easier to control when cards are different heights.

Built my first Dashboard using the drag and drop and I love it. Of course there are limitations right now but worked well for my initial dashboard. What I would like to see is the ability to set the number of columns in the section layout as well as each individual section. To get around the sections all being the same size I used a empty grid with a title to create the feel of a new section. You may be able to do this as I have not dug in too far on it but ability to css each section would be cool. Other than that I am very happy with it.

4 Likes

I’ve got the same issue with one of my to-do lists. Did you find the cause or a solution?

image

The new Sections Layout is already really nice, except being just a beta. One seemingly old and by now less used function of dashboards are badges. Other card frameworks, like Mushroom, include an alternative to that, in the form of chips.

To achieve the goal of a more modern and streamlined design, it would be nice to either
a) redesign badges to be more modern and useful, like the mushroom chips are, or
b) allow any card to be an optional header-row card of the section view, which is separate from the sections.

With option b), users could place their own badge-variant, like mushroom chips, onto the header of the layout, and not just the header of for instance the first section.

5 Likes

Pretty nice :clap:
For the current week & roborock Q5 cards: are you using a standard sensor graph card for that? How did you change the color of the of the graph?

I’d love to see a minimum width for sections.

When resizing the browser window, there’s a point where the amount of sections horizontally switches from 3 to 4. At that point, when 4 sections just fit the window, the (tile) cards are very small. They can barely hold the entity name. Being able to configure a minimum-width for sections (possibly on a per-view basis) would allow me to make sure it only switches when there’s enough space to properly display the sections/cards.

3 Likes

Sections are very interresting to play with.

For the time beeing I see some features that, if available, would allow me to fully use sections in my main dashboard:

The main one for me: to be able to assign to any card a “grid size” inside the section. When using markdown or custom cards for example, If I was able to assign a grid size to cards (for example 2"grid unit" wide, and 2"grid unit" height) instead of having cards taking the full 4"grid unit" wide and rely on the card itself to fit the way I want.

Another one would be to allow a top header, taking the full width of the screen, before the section part. Allowing a kind of “top header”, with the option to have it “always on” like a menu for example, and only below, the reconfigurable section part depending on the screen size.

Another feature would be to have a way to customise the section width. Currently sections are 4"grid units" wide only. It could be profitable for some user to define sections that could be 2 “grid units” or 6 “grid units” wide…

4 Likes

I was just about to come and add this comment. Love the sections, but there is no way to add a buttons / nav element at the top of a page, without the Z-grid system leaving a massive amount of wasted space on the left hand side. Either an optional ‘top row’ or the ability to configure a section to span multiple grid columns would be ideal.

1 Like

Sections seem like the right way forward!

Would be great to be able to control the width/height of a section, or total sections per row. I might want a wider section in the middle with two thinner ones on the left and right for example, or one single large section on the first row and then multiple smaller ones.

Edit:

Customizable tile size would be great too! I want the climate tile to use an entire row of the section instead of just half of it

1 Like

I love the new dashboard cards!! So much more modern. However, the only issue I have is when the groups for 4+ go to the next line and its the bottom of your longest card, so there can be a TON of blank space in your dashboard… I wish card 4 would go up to the bottom of the card 1, no matter how long it is.

OR, if we can have the ability to set each section whereever we want. i.e. I only have 2 cards, but want to space them out under each other, or all the way right and all the way left, leaving the space in th4e middle, or even If I wanted to place it 4 grid spaces down, then drag and drop where I want the grid… and expand so a grid is wider based on screen info? seems like much more can be done, but this is an excellent first stab at my biggest issue with Home Assistant!!! I havent made any real dashbboards in years because it never works right or looks right!!! Now I actually can!!! ThANK YOU!!

1 Like

I love it.
What if we can use the section title to link to a subview? Or something kind of with an option to accomplish this.

4 Likes

Is it planned long term to enable drag and drop also for other layouts? I can fully understand why z grid had been chosen as a beginning, but for my tablet in the kitchen a more compact layout would be better. In this case I prefer having everything on one view rather than everything structured. Making the layout type finally user selectable would be nice.

Good idea, one of the very last reasons I am using mushroom title card.

1 Like

I do love the way we can keep the cards in a specific order. Drag and drop sections and cards in sections works great. Good job team!

I think our current cards are taking up a lot of space and also if we use a section header a lot of white space on the right. Please consider using the space next to the section header for data display.
To maximise space usage I combine the custom ‘room-card’ and tils to get a nice overview. The lights are only shown when one on the room is on.

2 Likes

look really nice, please share your code , if you don’t mind.
TY