DBuit / Homekit-panel-card

Homekit panel card for home assistant
MIT License
304 stars 54 forks source link

Masonry spacing issues #116

Open ryantrip opened 3 years ago

ryantrip commented 3 years ago

Hello,

I'm running into spacing issues with the masonry feature. This issue comes in two parts:

  1. Spacing between tiles with masonry: enabled is smaller than spacing with masonry: disabled
  2. Tiles wider than "1" push the next cards too far away. Example: Configured for tileOnRow: 3 with two tiles. The first tile has a widerSize: 2. Second tile has a no set size (normal). The second tile is being pushed to the next row when it should be on the first row next to the first tile. If I set the tiles per row to 4, the 2nd tile shows up in the first row, but with large spacing in-between.

Masonry tile spacing: image Normal tile spacing: Screen Shot 2021-05-19 at 11 16 55 PM "Wider" masonry issue (tileOnRow: 5 instead of "4" to show the 2nd spacing issue I mentioned): image

Config:

- enableColumns: true
  rows:
    - columns:
        - column: 1
          entities:
            - entities:
                - card: picture-glance
                  cardOptions:
                    title: Front Door
                    entities:
                      - binary_sensor.doorbell_motion
                      - input_boolean.picture_glance_card_fix
                    camera_image: camera.doorbell
                    camera_view: live
                  cardStyle: |
                    :host {
                      display: flex !important;
                      height: 100% !important;
                    }
                    ha-card {
                      box-shadow: none !important;
                      width: 100% !important;
                    }
                    .box {
                      background-color: #FFF !important;
                      color: #000 !important;
                    }
                    .row:nth-of-type(3){
                      display: none !important;
                    }  
                    ha-icon-button.state-on {
                      color: #f7d958 !important;
                    }
                  noPadding: true
                  wider: true
                  widerSize: 3
                  higher: true
                  higherSize: 2
                - entity: lock.front_door_lock
                  offStates:
                    - locked
                  tap_action:
                    action: toggle
                    entity: lock.front_door_lock
                - entity: lock.garage_entry_door_lock
                  offStates:
                    - locked
                  tap_action:
                    action: toggle
                    entity: lock.garage_entry_door_lock
                - entity: cover.garage_door
                  offStates:
                    - closed
              title: Doors
          tileOnRow: 5
  masonry: true
  statePositionTop: true
  tileHoldAnimation: false
  type: 'custom:homekit-card'