thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.05k stars 125 forks source link

FR: Allow to set the order when using grid-layout #219

Open Sennevds opened 1 year ago

Sennevds commented 1 year ago

I'm trying to auto order the elements in a grid-layout. The elements I'm using are decluttering-card's. The problem is I need to set the order element directly on the childs of the grid but when using the custom:mod-card it puts the order css element on the ha-card which is a child of the mod-card element so the ordering is not applied. So maybe its a possibility to add the order element to view_layout config? This is my yaml

- type: "custom:layout-card"
  layout_type: "custom:grid-layout"
  layout:
    margin: 0
    grid-gap: 2vw #var(--custom-layout-card-padding)
    grid-template-columns: repeat(4, 1fr)
    grid-template-rows: fit-content(100%) fit-content(100%)
    mediaquery:
    #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: repeat(2, 1fr)
          grid-template-rows: repeat(5, fit-content(100%))
  view_layout:
    grid-area: persons
  cards:
    - type: "custom:decluttering-card"
      view_layout:
        order: 1
      template: climb_person_button
      variables:
        - name: xxxx
...

I also tried following but didn't worked because the style is set on the child of card-mod element:

- type: "custom:layout-card"
  layout_type: "custom:grid-layout"
  layout:
    margin: 0
    grid-gap: 2vw #var(--custom-layout-card-padding)
    grid-template-columns: repeat(4, 1fr)
    grid-template-rows: fit-content(100%) fit-content(100%)
    mediaquery:
    #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: repeat(2, 1fr)
          grid-template-rows: repeat(5, fit-content(100%))
  view_layout:
    grid-area: persons
  cards:
    - type: custom:mod-card
      card:
        type: "custom:decluttering-card"
        template: climb_person_button
        variables:
          - name: xxxxx
      card_mod:
        style: |
          ha-card {
            order: 1;
          }

...

Update and add support for javascript templates so I can dynamically set the order value 🙂