Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.46k stars 41 forks source link

Pop up card in picture element card does not disappear #355

Open Flowdihow opened 6 months ago

Flowdihow commented 6 months ago

Describe the bug I'd like to add a bubble card to my picture element card. In general, this works as expected, however, the pop is not disappearing. I revised the CSS classes root.open-pop-up and root.close-pop-up

If the pop up is open: transform: translateY(-120%);

I think, this is what I would expect.

image

If the pop up is closed: transform: translateY(-20%);

Here, the pop us is not disappearing. image

I think the problem here is with the picture element card, where relative 0,0 origin might be different from the normal dashboard.

My code:

views:
  - path: default_view
    title: Home
    type: panel
    badges: []
    cards:
      - type: picture-elements
        elements:
          - type: custom:bubble-card
            card_type: horizontal-buttons-stack
            1_link: '#jalousie'
            1_name: Jalousien
            1_icon: mdi:blinds-horizontal-closed
            style:
              color: transparent
              top: 20%
              left: 40%
          - type: state-badge
            entity: sensor.gw2000a_yyy
            title: ''
            style:
              color: transparent
              top: 60%
              left: 50%
          - type: state-badge
            entity: sensor.gw2000a_xxx
            style:
              color: transparent
              top: 80%
              left: 20%
          - type: custom:hui-element
            card_type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#jalousie'
                name: Jalousien
                icon: mdi:blinds-horizontal-closed
                entity: light.indirekte_beleuchtung
                state: sensor.gw2000a_v2_2_4_indoor_humidity
              - type: custom:bubble-card
                card_type: cover
                entity: cover.rolladenkuche
              - type: custom:bubble-card
                card_type: button
                entity: light.indirekte_beleuchtung
                button_type: slider
            style:
              top: 50%
              left: 50%
        image: /local/Wohnung.png

Desktop (please complete the following information): Edge Fully Kiosk Browser

Additional context Add any other context about the problem here.

Thank you! 🍻

Clooos commented 3 weeks ago

Hi, do you still have this issue with the latest release?