search

Clooos / Bubble-Card

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

Separator - Line length and spacing #614

Open Shasdo opened 3 months ago

Shasdo commented 3 months ago

Describe the bug
The separator line doesn't end with the right spacing when sub buttons are added. The space gets longer with each sub-buttons added The two purple line are the same length and are there to illustrate the uneven spacing. image

Also the space after the text and before the subbutton is a bit longer to my taste, is there a styling option to change it ?

Subsidiary question: (can make another issue) why "normal" card layout doesn't reduce the height of the cell used by each bubble card ? Is it a fixed minimal height linked to the LoveLace frontend ? If there is a another card type above the separaror, it results in an unven vertical spacing. Could the Bubble Card be vertically centered in each cell (with styling ?) ?

image

Thank you for your great work !

Expected behavior
The divider should be closer to the sub-buttons

YAML
If applicable, add any relevant YAML code.

  - type: sections
    max_columns: 2
    sections:
      - type: grid
        cards:
          - type: custom:bubble-card
            card_type: separator
            name: Test 1
            sub_button:
              - icon: mdi:numeric-1
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }
          - type: custom:bubble-card
            card_type: separator
            name: Test 2
            sub_button:
              - icon: mdi:numeric-1
              - icon: mdi:numeric-2
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }
          - type: custom:bubble-card
            card_type: separator
            name: Test 3
            sub_button:
              - icon: mdi:numeric-1
              - icon: mdi:numeric-2
              - icon: mdi:numeric-3
            styles: |2-
                .bubble-line {
                  background: red ;
                  opacity: 1;
                }
                .bubble-sub-button-1 {
                  background-color: grey !important;
                }
                .bubble-sub-button-2 {
                  background-color: grey !important;
                }
                .bubble-sub-button-3 {
                  background-color: grey !important;
                }

Informations (please complete the following information):

arthanoss commented 3 months ago

As for the second question, the section layout in HA defines a fixed row height for cards inside it to keep everything even in a grid.

There's a section optimized layout available for separators (and buttons too) in Bubble Card and it does exactly what you want, it vertically aligns the separator in the middle of a row.

type: custom:bubble-card
card_type: separator
name: Separator
card_layout: large

Layouts