In addition, these things should re-flow smartly on mobile.
In the current state, stacks nested inside a grid is one of the best ways to get a decent, consistent layout with even row heights. But if I set a grid 3 columns wide, it should automatically be one-column wide on mobile, not three insanely tiny columns.
Here’s a link to the repo in case anyone is interested in checking it out:
Last time I tried (6+ months ago) it worked well enough, though with a few quirks on mobile. I see some activity in the issues indicating that it might be broken with newer versions of HA, though.
I’m still a little surprised that this hasn’t been given a higher priority. Especially given that this year’s theme is “streamlining experiences”, and I would assume for the typical user, the thing they would be interacting with most would be their dashboard. The current up and down arrow method is archaic and really unintuitive. When I first started using HA this was the thing I was most shocked at.
This is a problem with the positioning of cards, which I describe in the topic related to the availability of HomeAssistant (compliance with WCAG guidelines). Cards move in columns (up / down), not in rows (left / right). It makes sense on the smartphone screen. We have one card in a row. There is chaos on the computer screen. We read from left to right, scan the image from left to right, and in HomeAssistant we place cards from top to bottom, column by column. Weak. Example:
In the view, add a “button” tab with which you want to turn on the light.
Duplicate the added button 5 times.
We now have 6 buttons in the view (2 rows of 3 buttons, 3 columns of 2 buttons).
Now navigate to the buttons with the tab key.
We will review the buttons in the order (vertical letters, horizontal numbers) a1, b1, a2, b2, a3, b3. There should be a1, a2, a3, b1, b2, b3. The focus should move across the buttons (using tabs) from left to right, line by line. Now it goes from top to bottom, column by column. Cards should move in rows (left / right) not in columns (up / down).
For an even better picture of the problem. We have 12 cards on the page (4 rows of 3 cards, 3 columns of 4 cards). We want to move the card a2 to the position a1 (letters vertical, numbers horizontal). We want the middle card on the first row, set as the left card on the first row.) Tap on the “Move up” button. The card should move to the left to position a1. Currently, however, it disappears from the screen and goes to position d1 (it becomes the left card in the last row). As you can read in this thread, there is a big problem with that. I assume you are people who use eyesight. Bouncing cards from the top of one column to the bottom of the other create an uncomfortable situation. You have to scroll the screen to check what happened. You can take a look and see, “Oh shit, the card is here now!” I am blind, I cannot see, I cannot glance. I am using a screen reader. Your eyesight is getting lost, I get lost 3 times more with my screen reader. For this reason, I am asking you to improve this functionality.
The solution with buttons “Shift left”, “Shift right”, “Move up”, “Move down” is a good idea. It is a good idea because it is a more logical and convenient solution. Additionally, you can enter the “Cards layout” mode. When this mode is turned on, each card has an edit field that defines its position (a1, a2, a3, b1, b2, b3 …). We set the position of the cards (e.g. we swap the position of cards a1 with b3 and b2 with b1). We save the changes. Done. The cards go to the correct positions.
More on this subject from the point of view of accessibility at the link below (voting, compliance with WCAG, as you can see, helps everyone:
lets face it, what users (not admins) of HA see, is the dashboard - and that looks crap and already old. and is even worse to build with.
do something about it HA team… things like this are often the first sign of something going wrong
As I wrote in your issue on github, they’re busy with it because of this WTH topic. So just wait and give them time. This is not something they can implement in 1 month. They have to face everything with the drag/drop device wise. Zack is now working inside the HA team, so guess he is more busy inside the core, then on his own github.
yes thank you.
but it’s simply not possible to use it the way it should.
there are lots of spaces, because arranging one item to the top, arranges another one down without making sense… no option for resizing etc … horrible … feels like 2010
Yeah it’s not the best UX and indeed feels like 2010. They’re busy though.
Maybe you should give the lovelace-layout-card a try from Thomas Loven? You can set a page on your dashboard on the ‘vertical-layout’ for example. This causes the page to render all cards in a vertical line. If you then place a ‘layout-break’ card in between them. The vertical layout will continue in the next row. I’m using that right now so I’ve control on where my cards will go.