Dashboard chapter 2: Let’s redesign the cards together!

As we gradually migrate our design system, the use of design tokens should make this type of theming easier.

I mean, I like squares too. :stuck_out_tongue_winking_eye:

3 Likes

WOW! This is extremely good news! The whole UI needs a bit of rethinking and focus on customizations and flexibility. Honestly, I’m tired of making Lovelace UI look and behave the way I need with dirty hacks and poorly supported 3rd party cards.

3 Likes

Gah, I hate the look of the replacement badges. It looks like I’ll have to remove about 3/4s of them on my dashboard so it doesn’t look like rubbish on the mobile dashboard. FAR TOO WIDE. I liked the circular arrangement, with a single word of metadata on the bottom. I hope that someone can provide a HACS converter to convert my badges back to badges. Until then I guess I’m stuck on 2024.7. Ah well.

3 Likes

so do I!
But Tiles are giving us a hard time… have Tile card containers and buttons follow HA border-radius theme variable · home-assistant/frontend · Discussion #21357 · GitHub

would be magic of we could set just 1 --tile-border-radius variable for that, in stead of having to card-mod each and every Tile type card for its specific feature properties

Split that variable into different variables regarding flexibility/themability and use the default variable as the value of the other ones introduced please.

This would give at least maximum possible flexibility in theming nowadays, although it’s not theming IMO but bit of extra styling/adjusting some CSS-variables.

Are there plans to allow the 8px Gutter parameter to be modified? I experimented with converting my main dashboard over and the gutter padding makes it wider. Thanks.

1 Like

Badges doesn’t appear to follow the theme you have set.

There are some gaps that you can adjust in a theme.yaml

      ha-view-sections-row-gap: "8px"
      ha-view-sections-column-gap: "8px"
      ha-view-sections-column-min-width: "320px"
      ha-view-sections-column-max-width: "500px"
      ha-section-grid-row-gap: "8px"
      ha-section-grid-column-gap: "8px"
2 Likes

I would love to get the Mushroom Title card merged to core. :heart:

  • Possibility to create navigation links into the title is so simple and great
  • Possibility to create some kind of Sub-Sections (I’m personally not a Z-Grid fan).
1 Like

For me with my current layout, Sections went from cool idea but doesn’t really work for me to this is amazing now I know we can easily control the gap!

I would be cool if this could be configured through the GUI however rather than needing to modify CSS.

I’m on the beta (2024.8.0b3) and not seeing this yet. I can only put badges at the very top of the screen, not at the top of each section. Is that still coming?

Fairly sure it was mentioned during the livestream that this is on the roadmap but not available in 24.8

Thanks, I must have missed that.

So you support breaking everyone else home assistant layout on some random tuesday with no notice?

Let me make an analogy, how would you feel if I broke into your house and changed the default language on all of your devices to something you couldn’t read like sanskrit, how exactly would that be helping you?

Intentionally breaking other peoples stuff because you want them to upgrade, is the thing that I really hate about home assistant. The developers here have a flagrant disregard for other peoples setups and have no guilt or remorse when they break other people’s stuff.

I’m trying to understand your reaction and response, I’m curious as to how long you’ve been using Home Assistant and just how integrated the system is with your home that these changes seem so drastic and almost offensive to you.

It’s Wednesday, but anyway… Don’t you think, your statement is a little self drawn? What makes you think, that your experience will be the same for everybody else?

However, no one is breaking things out of enjoyment. But things need to be fixed sometimes. In most cases this can be done without a lot of interference, but sometimes it’s just unavoidable to do things, that need to be addressed by the user.

I’m quite sure, that for you this is a big thing, and it is more than understandable, that you’re pissed! But please keep in mind, others here might not have the same experience as you, and will feel offended by your words. Not talking about the developers, that do a great job (even if right now you don’t think so) in keeping all our homes automated and bring some luxury to our daily lifes! :slight_smile:

BUT, as I said, as this seems to be a huge problem for you, why not concentrate first on what could be done, to make it better for you, or in the best outcome, solve your problem right away?

So, let us know, where your problems are (HA related) and I’m quite sure, some of the nice folks here will be able to help you! :slight_smile:

And then, this would be your lucky day, because you would have updated to the most modern techniques, and your home would still be the best automated home on earth. :+1:

And if I may give some sort of recommendation: downgrade for now to the last version that works for you, and see, how the problems can get solved for the new (.8) version! Would that help? :slight_smile:

C’mon, we all know how hard it is, when an update breaks something, but aren’t we all here because we love home automation? So, give us some hints, and together we’ll get this solved!

9 Likes

These badges won’t work for me.

I mainly use badges as opposed to cards when I need information density. The old style could fit a surprising amount of info and functionality into a small space. These new ones… not so much.

I’d be excited about this if either:

  • The old style remained by default.
  • These pills were added as a new card rather than replacing the existing badge.
  • These pills had the same (or higher) information density than the old badge.
  • There was a different way to keep old-style badges (such as moving the old-style badges to a custom UI element in a separate repo) that required sublinear time in the # of existing badges.
    • This is almost the case. Unfortunately, there does not appear to be any simple way to do mass find-replace in UI config, unlike YAML config.

Unfortunately, none of these appear to be the case…

5 Likes

While in general I agree that any changes that break old behaviour need to be carefully considered, it’s not reasonable to demand that nothing ever changes. And in this particular case, it’s only interface, it’s not going to break some important house functionality (like many previous updates did for some people).

Also, this is not happening without warning. First of all, it was announced in advance, as we were commenting here before the update appeared. Secondly, nobody is updating your insurance secretly to break your home. You have to update yourself, you don’t have to do it right away, you can wait as much as you want, until you are ready to deal with the changes.

2 Likes

in fact this exactly the current state, you can still use the now legacy badges as custom (for the time being)

see 2024.8: Beautiful badges! - #10 by nickrout

simply use:

custom:hui-state-badge-element
entity: your.entity

I would have done it differently as I feel the pain of ‘progress’ breaking something that works for a lot of users… but, somehow the dev team wont be persuaded to do it differently (some of us tried to bring forward these arguments). So there is no other way than adapt.

1 Like

There are many many many many counterexamples to this.

If HA was completely isolated, you would be correct. Unfortunately it interfaces with many external agents we have no control over, and so old versions bitrot.

That being said I personally do tend to delay updates. However, it’s not as simple as “not updating never breaks anything so you shouldn’t be annoyed about updates because you can just delay as long as you want” (apologies for the triple negative). Not updating itself breaks things over time.

You missed the key part: “that required sublinear time in the # of existing badges.”.

What you describe is something that needs to be manually done for each and every existing badge you wish to keep in the prior style.