Layout-card noch sinnvoll?

Dashboard/Cards/Frontend
22

Ich verwende die Karte gerne, um das Layout zwischen PC, Tablet und iPhone zu gestalten und wiederzuverwenden

- type: custom:state-switch
  entity: mediaquery
  states:
    "(min-width: 500px)":
      type: vertical-stack
      cards:
        - type: energy-date-selection
        - type: custom:layout-card
          layout_type: custom:grid-layout
          layout_options:
            grid-template-columns: 5% 70% 24% 1%
            grid-template-rows: auto
          cards: !include ui_views/energie.yaml
    all:
      type: vertical-stack
      cards:
        - type: energy-date-selection
        - type: custom:layout-card
          layout_type: custom:masonry-layout
          layout_options:
            grid-template-columns: 5% 70% 24% 1%
            grid-template-rows: auto
          cards: !include ui_views/energie.yaml
23

Ich nutze auch die Layout Card und finde die Möglichkeiten sehr genial damit. Auch das anpassen für unterschiedlich Endgeräte ist sehr genial (PC, Tablet, Handy etc.)

views:
  - type: custom:grid-layout
    title: Home
    layout:
      #default
      margin: 0  
      grid-gap: var(--custom-layout-card-padding )
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .           .       ."
        "sidebar  esszimmer   wohnzimmer  aussen  ."
        "sidebar  media       heizung     familie ."
        "sidebar  footer      footer      footer  ."
      mediaquery:
        '(max-width: 800px)':
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .            ."
            ".  sidebar     sidebar      ."
            ".  esszimmer   wohnzimmer   ."
            ".  aussen      heizung      ."
            ".  media       familie      ."
            ".  footer      footer       ."
            ".  .           .            ."
        '(max-width: 1200px)':
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: repeat(3, 1fr) 0
          grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .           .           ."
            "sidebar  esszimmer   wohnzimmer  ."
            "sidebar  aussen      heizung     ."
            "sidebar  media       familie     ."
            "sidebar  footer      footer      ."
            "sidebar  .           .           ."```
24

Deine Karten für Netzbezug/Solar sind sehr schön. Welche sind das? Könntest du den Code teilen? Danke.

25

Danke für die :bouquet:

Guck mal hier: Template Sensor für PV Eigenverbrauch - #23 von WunderJahr

Bei Fragen kannst Du Dich gerne melden…

26

Danke, wirklich tolle Vorlage.
Bin schon fleissig am basteln. :slight_smile:

27

Das Resultat würde ich gerne sehen… :+1:t4:

28

Werde ich dann zeigen :slight_smile: Kämpfe noch ein wenig mit meinem Smartmeter.
Der Wert für die Einspeisung passt noch nicht genau, weil der Zähler gleichzeitig einen Verbauch ausgibt.

Der Wert für Einspeisung/Verbrauch (16.7.0) wäre der richtige, aber da müßte ich die negativen/postiven Werte ausgrenzen.

29

Alex

Bin eben wieder zurück zu “width %”. Das passt immer wie ich es haben möchte. Wenn der Zonenname zu lang ist, wird er mit … angezeigt.

Mit der “layout” Variante, verhält es sich anders, die passt sich dynamisch in der Breite an und das sieht bei meinem Dashboard “doof” aus. :crazy_face: Habe ich gestern erst gemerkt…

Daher wieder zurück zu “%” und “layout” dann, wenn ich mal etwas in"quer" mache fürs Tablet, oder so!

30

Hallo ich beschäftige mich momentan auch mit den Layout card

Möchte damit ein Dashboard für Handy bauen.
Also keins das sich umschaltet zwischen PC und Handy.

Nun zur Frage:

Muss ich 5 Spalten definieren und die erste und letzte leer lassen um auf die Breite der Karten für eine Handy zu kommen. Oder kann ich die Breite definieren die das Dashboard komplett haben soll?

DANKE