Add layout option

[hjbotha]

This PR adds a "column" boolean config option to the entity row definition. When enabled, entities in that row will be shown in a column rather than a row.

To enable this I had to make a few supporting changes:

• Wrapped the entities in a parent div
• Change to using flex css "gap" instead of margins because entity:last-of-type { margin-right: 0; } is not a viable solution when things may be arranged in a column.

I tested a couple of different cards with different settings and these changes didn't affect the layout of those at all, but given the flexibility of this card there may well be some combinations that will be affected.

Also, the "gap" property is super new, so bear that in mind.

[hjbotha]

My initial approach was to just add the wrapper without adding an option to this card itself, so that the column styling could be done with card-mod, but it started to feel a bit kludgey, particularly when I ran into the margin issue.

Progress on that is here: https://github.com/hjbotha/lovelace-multiple-entity-row/tree/add-entities-wrapper-div

If you prefer that approach, let me know and I'll polish up that branch and submit a new PR.

[benct]

Hmm, interesting suggestion. Do you have a screenshot of how this looks? Does it not take up a lot of vertical space?

I do not see a problem with adding this to the card as long as the row-version still behaves the same :) I'll try to merge it in when I get the time to bump a new version.

[hjbotha]

Here you go:

Code for (the first 2 rows of) that card:

      - type: entities
        style: |
          div.card-content > div:nth-child(even) {
            background: rgba(255,255,255,0.15);
          }
          div.card-content > div {
            margin: 0px !important;
            padding: 4px;
          }
          div.card-content > div:first-child {
            margin: 0px !important;
          }
        entities:
          - type: 'custom:multiple-entity-row'
            name: Living Room
            entity: sensor.livingroom_climatesensor_1_updatetime
            secondary_info: last-changed
            show_state: false
            style: >
              div.entities {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: space-evenly;
              }
              div.entity {
                margin: 0px;
              }
            entities:
              - entity: sensor.livingroom_climatesensor_1_temperature
                name: false
              - entity: sensor.livingroom_climatesensor_1_humidity
                name: false
          - type: 'custom:multiple-entity-row'
            name: Hallway
            entity: sensor.hallway_climatesensor_1_updatetime
            secondary_info: last-changed
            show_state: false
            style: >
              div.entities {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: space-evenly;
              }
              div.entity {
                margin: 0px;
              }

It definitely gets a bit crowded with more than 2, but I think it works if you colour alternating rows and/or have secondary-info. I did this for compactness on a smallish tablet dashboard.

More work would be needed to make labels make sense. They should probably be shown to the left of the states if someone wanted them shown at all in this layout.

I'm actually running the other branch at the moment and it works great, so if you don't want to make this a feature of the card just having the entities wrapped would allow for a fair bit of customisation without you having to test a whole bunch of new layouts.

[benct]

Merged your changes, with a few adjustments. Kept the old margins because the gap style is too new, and fixed so that the headers are displayed on the left in column mode. Try upgrading to v3.3.0 and let me know if something is not looking as it should.

And thanks for your contribution :)

[hjbotha]

Pure elegance. I love it. Thank you!