Update card to comply with new "design grid system"

[ThomDietrich]

https://www.home-assistant.io/blog/2024/07/26/dashboard-chapter-2/#design-framework-what-will-our-card-designs-be-based-upon

This ticket is open for grabs. PRs welcome!

[PhilippeP62]

I have no test environment setup but should just add this to HorizonCard.ts be enough?

public getLayoutOptions() {
    let grid_rows = 4 // Smallest possible card (only graph) is 4 rows

    const fieldConfig = this.expandedFieldConfig()

    // Each element of card (title, header, content, footer) adds 1 row
    if (this.config.title && this.config.title.length > 0) {
      grid_rows += 1
    }

    if (fieldConfig.sunrise || fieldConfig.sunset) {
      grid_rows += 1
    }

    if (fieldConfig.dawn || fieldConfig.noon || fieldConfig.dusk) {
      grid_rows += 1
    }

    if (fieldConfig.sun_azimuth || fieldConfig.moon_azimuth || fieldConfig.sun_elevation || fieldConfig.moon_elevation) {
      grid_rows += 1
    }

    if (fieldConfig.moonrise || fieldConfig.moon_phase || fieldConfig.moonset) {
      grid_rows += 1
    }

  return {
    grid_rows,
    grid_columns: 4,
    grid_min_columns: 4,
    grid_min_rows: 4,
  };
}

[ThomDietrich]

Hey @PhilippeP62, thanks, this is much appreciated! If it's not too much to ask it would be amazing if you could set the environment up and test. If it works let's move into a PR.

Bonus points for documenting the dev environment in the README :)

[PhilippeP62]

Never worked with github , looked at the info , seems not the easiest thing but will try ....

[ThomDietrich]

Sounds like the perfect opportunity to learn something new! ✨ No seriously, we honestly appreciate your efforts!

[PhilippeP62]

Well sorry but no , I don't have the slightest idea of what I'm doing so I'll pass

[scinos]

I'll give it a go.