search

iantrich / restriction-card

🔒 Apply restrictions to Lovelace cards
MIT License
275 stars 23 forks source link

Restriction Card does not fill row #117

Open gthbusrr opened 1 month ago

gthbusrr commented 1 month ago

Checklist:

Release with the issue: 1.2.9 Last working release (if known): New Install Browser and Operating System: Firefox / MacOS Firefox / Android Companion App / Android

Description of problem: w/ Restriction Card ^ w/ Restriction Card w/o Restriction Card

^ w/o Restriction Card

Config:

  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.motion_detected_lights
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Motion Sensor - Living Room
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
    card_mod:
      style: |
        ha-card {
          height: 100%
        }

Javascript errors shown in the web inspector (if applicable):

Additional information:

ildar170975 commented 1 month ago

Retest w/o card-mod which is a separate plugin and not discussed here. Also, layout_options is not an option of the restriction-card.

gthbusrr commented 1 month ago

Retest w/o card-mod which is a separate plugin and not discussed here. Also, layout_options is not an option of the restriction-card.

@ildar170975 Removed, same result. image

ildar170975 commented 1 month ago

@gthbusrr I see. I am far from a PC, will test it in 10 days.

ildar170975 commented 1 month ago

@gthbusrr Please provide a detailed description of the issue. What row are you talking about? Is it a section, grid, .. ?

If this is about a grid with square cells:

type: grid
square: true
cards:
  - type: custom:restriction-card
    card:
      type: entity
      entity: sun.sun
  - type: entity
    entity: sun.sun
  - type: history-graph
    entities:
      - sun.sun
  - type: custom:restriction-card
    card:
      type: entity
      entity: sun.sun
columns: 2

then I agree - there is an issue, a card does not fill a whole cell: image

Can be fixed by card-mod:

type: custom:mod-card
card_mod:
  style:
    hui-grid-card $:
      hui-card:
        restriction-card $: |
          :first-child, div#card {
            height: 100%;
          }
        .: |
          restriction-card {
            height: 100%;
          }
card:
  type: grid
  square: true
  cards:
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
    - type: entity
      entity: sun.sun
    - type: history-graph
      entities:
        - sun.sun
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
  columns: 2

image

gthbusrr commented 1 month ago

@ildar170975

Hi it's a section:

Yaml of the section

type: grid
cards:
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.leave_home
      vertical: true
      hide_state: true
      show_entity_picture: false
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
      name: Leave Home
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.arrived_home
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Arrive Home
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.door_opened
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Door Opened
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.front_door_lock_notification
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Door Lock Notification
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.camera_motion_detected
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Camera Motion Detection
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: full
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: custom:card-templater
      card:
        type: tile
        entity: input_boolean.enable_home_security
        hide_state: true
        vertical: true
        show_entity_picture: false
        tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.enable_home_security
        icon_tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.enable_home_security
        name_template: >-
          Home Security {% if is_state('input_boolean.enable_home_security',
          'on') %} Enabled {% else %} Disabled {% endif %}
        card_mod:
          style: |
            ha-tile-icon {
              {% if is_state('input_boolean.enable_home_security', 'on') %}
              --tile-color: orange !important;
              {% else %}
              --tile-color: grey !important;
              {% endif %}
            }
      entities:
        - input_boolean.enable_home_security
    layout_options:
      grid_columns: full
      grid_rows: 2
title: Home Security

This is what it looks like now (w/ the yaml above) image

Expected result: image Achieved by:

type: grid
cards:
  - type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    name: Leave Home
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Arrive Home
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Opened
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Lock Notification
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.camera_motion_detected
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Camera Motion Detection
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: full
      grid_rows: 2
  - type: custom:card-templater
    card:
      type: tile
      entity: input_boolean.enable_home_security
      hide_state: true
      vertical: true
      show_entity_picture: false
      tap_action:
        action: call-service
        service: input_boolean.toggle
        target:
          entity_id: input_boolean.enable_home_security
      icon_tap_action:
        action: call-service
        service: input_boolean.toggle
        target:
          entity_id: input_boolean.enable_home_security
      name_template: >-
        Home Security {% if is_state('input_boolean.enable_home_security', 'on')
        %} Enabled {% else %} Disabled {% endif %}
      card_mod:
        style: |
          ha-tile-icon {
            {% if is_state('input_boolean.enable_home_security', 'on') %}
            --tile-color: orange !important;
            {% else %}
            --tile-color: grey !important;
            {% endif %}
          }
    entities:
      - input_boolean.enable_home_security
    layout_options:
      grid_columns: full
      grid_rows: 2
title: Home Security
ildar170975 commented 1 month ago

You have plenty of custom cards/plugins unrelated to the restriction-card. Suggest you to prepare a SHORT minimal working example.

gthbusrr commented 1 month ago

@ildar170975 Here's an example with only restriction-card & built in tile card: image

type: grid
cards:
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.leave_home
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.arrived_home
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.door_opened
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.front_door_lock_notification
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
title: Home Security

Expected result: image

type: grid
cards:
  - type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
title: Home Security
ildar170975 commented 1 month ago
  1. The layout_options part does not belong neither to a tile card, nor to restriction-card. It should not be there.
  2. The 1st example you posted is about placing restriction-card into a Grid card. It is similar to what I posted here (only difference is that you pasted a tile card). But you claimed that the issue is about "sections", not a Grid card. The "sections" is an experimental type of a view; are you sure that that you understand the "section" term properly?
gthbusrr commented 1 month ago

@ildar170975

  1. The layout_options is part of the section. See https://www.home-assistant.io/blog/2024/09/04/release-20249/#sections-go-big
  2. "Sections" is the dashboard view type, in the dashboard, there are individual "Sections". When you edit the individual "section", the header shows Edit section. See terminology used in Home Assistant Documentation for Sections: https://www.home-assistant.io/dashboards/sections/#deleting-a-section a. I tried your yaml but it either makes it extra large: image 
    type: custom:mod-card
card_mod:
style:
hui-grid-card $:
  hui-card:
    restriction-card $: |
      :first-child, div#card {
        height: 100%;
      }
    .: |
      restriction-card {
        height: 100%;
      }
card:
type: grid
columns: 2
cards:
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    name: Leave Home
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Arrive Home
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Opened
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Lock Notification
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
title: Home Security

    or extra tiny: image

    type: custom:mod-card
card_mod:
style:
hui-grid-card $:
  hui-card:
    restriction-card $: |
      :first-child, div#card {
        height: 100%;
      }
    .: |
      restriction-card {
        height: 100%;
      }
card:
type: grid
columns: 2
square: false
cards:
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    name: Leave Home
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Arrive Home
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Opened
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
- type: custom:restriction-card
  card:
    type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Lock Notification
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
  layout_options:
    grid_columns: 2
    grid_rows: 2
title: Home Security
ildar170975 commented 1 month ago

The layout_options is part of the section

~Yet you define this option for a card.~ I see, got your point.

"Sections" is the dashboard view type

As I told you - this is not about sections, it is about Grid which you are using inside your sections.

I tried your yaml but it either makes it extra large:

This is EXPECTED behaviour - the 1st Grid is with square cells (height=width for squares), the 2nd with not square cells (height is normal, not tiny).

ildar170975 commented 1 month ago

Conclusion: workaround is provided here: https://github.com/iantrich/restriction-card/issues/117#issuecomment-2384618648 You may provide a PR to fix it inside the card to avoid using card-mod.