Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolution issues #7

Closed
filikun opened this issue May 17, 2020 · 21 comments
Closed

Resolution issues #7

filikun opened this issue May 17, 2020 · 21 comments
Labels
🔘 button cards Related to Button Cards 🚀 enhancement New feature or request

Comments

@filikun
Copy link

filikun commented May 17, 2020

Hey, awesome style! I have a problem with resolutions though. My GF have a Samsung Galaxy S10e with a smaller display and you can see for yourself that the buttons get cropped. Is there any way around this? I'm no expert in with styling so I'm not sure what I can do.

https://imgur.com/a/T0Vixpr
@qiz-li
Copy link
Owner

qiz-li commented May 17, 2020

Thank you! I am aware of this problem and it is something I am planning to improve. However, I’m quite busy at the moment so don’t expect it too soon.

The simplest solution is to remove the fifth card.

It has been also mentioned on the forums

@qiz-li qiz-li self-assigned this May 17, 2020
@qiz-li qiz-li added the 🚀 enhancement New feature or request label May 17, 2020
@KTibow
Copy link
Contributor

KTibow commented May 17, 2020

Thanks for the fix! I've noticed on bigger displays, it isn't centered in the middle though too. Thanks for all of your work in Soft UI!
The buttons are aligned to the left...

@qiz-li
Copy link
Owner

qiz-li commented May 17, 2020

Okay @KTibow, thanks for letting me know! 👍

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

Would this work if you used percentages instead of pixels?

@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020

Yes! Don't know why I didn't think of that. Would you like to do some testing @KTibow?

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

I can try that out. I'm worried that it might not end up being square, though.
If the width is 10% of the width of the bigger horizontal arrangement, the height needs to be 10% of the width of the bigger horizontal arrangement, not 10% of the height of the bigger horizontal arrangement.

@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020

Yes, good point. Check this out.

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

Okay, (note to self and anybody else) here's a slightly changed for simplicity example entry (with px).

This is basically the plain YAML minus some stuff 
cards:
# First card
 -  icon: 'mdi:lamp'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Second card
 -  icon: 'mdi:vanity-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}   
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Third card
 -  icon: 'mdi:ceiling-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                             
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Fourth card
 -  icon: 'mdi:light-switch'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Fifth card
 -  icon: 'mdi:table-chair'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;              
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
type: horizontal-stack

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

@N-l1 they look way too tiny in width.

(Code here, any ideas?)

cards:
  - icon: 'mdi:lamp'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}   
      }
    styles:
      card:
        - width: 50%
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - width: 50%
    type: 'custom:button-card'
  - icon: 'mdi:vanity-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}   
      }
    styles:
      card:
        - width: 50%
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - width: 50%
    type: 'custom:button-card'
  - icon: 'mdi:ceiling-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                             
      }
    styles:
      card:
        - width: 50%
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - width: 50%
    type: 'custom:button-card'
  - icon: 'mdi:light-switch'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - width: 50%
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - width: 50%
    type: 'custom:button-card'
  - icon: 'mdi:table-chair'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;              
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - width: 50%
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - width: 50%
    type: 'custom:button-card'
type: horizontal-stack

@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020

Interesting... I was thinking of doing something with relative lengths.

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020 •
edited

Hmm. It looks like the icons are hidden. What I have so far now (WIP):

Hidden for convenience by default 
cards:
  - icon: 'mdi:lamp'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}   
      }
    styles:
      card:
        - position: relative
        - height: 60px
        - padding-top: 100%
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - position: absolute
        - top: 0
        - right: 0
        - bottom: 0
        - left: 0
    type: 'custom:button-card'
  - icon: 'mdi:vanity-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}   
      }
    styles:
      card:
        - position: relative
        - height: 60px
        - padding-top: 100%
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - position: absolute
        - top: 0
        - right: 0
        - bottom: 0
        - left: 0
    type: 'custom:button-card'
  - icon: 'mdi:ceiling-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;                  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                             
      }
    styles:
      card:
        - position: relative
        - height: 60px
        - padding-top: 100%
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - position: absolute
        - top: 0
        - right: 0
        - bottom: 0
        - left: 0
    type: 'custom:button-card'
  - icon: 'mdi:light-switch'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - position: relative
        - height: 60px
        - padding-top: 100%
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - position: absolute
        - top: 0
        - right: 0
        - bottom: 0
        - left: 0
    type: 'custom:button-card'
  - icon: 'mdi:table-chair'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;              
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
    styles:
      card:
        - position: relative
        - height: 60px
        - padding-top: 100%
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
        - position: absolute
        - top: 0
        - right: 0
        - bottom: 0
        - left: 0
    type: 'custom:button-card'
type: horizontal-stack
@N-l1 do you know the cause of this?

@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020 •
edited

Some promising results using this code. It seems to work on a smaller phone I tested! 🎉

Basically changing the margin (the height and width doesn't seem to change properly) when the screen gets smaller...

Show code 
cards:
# First card
 -  icon: 'mdi:lamp'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Second card
 -  icon: 'mdi:vanity-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Third card
 -  icon: 'mdi:ceiling-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Fourth card
 -  icon: 'mdi:light-switch'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
# Fifth card
 -  icon: 'mdi:table-chair'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
type: horizontal-stack

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

@N-l1 fantastic! I'll start working on increasing the margin on larger screens.

@KTibow
Copy link
Contributor

KTibow commented May 18, 2020

@N-l1 I've done that. I've also added extra left padding, so it aligns better. Next step is adding back the more specific stuff, like the shadowing.

What do you think? 
cards:
  - icon: 'mdi:lamp'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        margin-left: 6.5px;
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
  - icon: 'mdi:vanity-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
  - icon: 'mdi:ceiling-light'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
  - icon: 'mdi:light-switch'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
  - icon: 'mdi:table-chair'
    show_icon: true
    show_name: false
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') %}                 
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                        
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           box-shadow: 
             {% if is_state('sun.sun', 'above_horizon') %}                 
               -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
             {% elif is_state('sun.sun', 'below_horizon') %}   
               -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
             {% endif %}                        
         }
      }
    styles:
      card:
        - width: 60px
        - height: 60px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    type: 'custom:button-card'
type: horizontal-stack
(You can do the PR this time 😄)

@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020

Wonderful! Updating the code...

qiz-li added a commit that referenced this issue May 18, 2020
@qiz-li
Add resize abilities to Horizontal Buttons Card
1aee410 
Add resize abilities to Horizontal Buttons Card, part of issue #7.
@qiz-li
Copy link
Owner

qiz-li commented May 18, 2020

Issue resolved as part of commit 1aee410!

@qiz-li qiz-li closed this as completed May 18, 2020
@KTibow KTibow removed their assignment May 18, 2020
@qiz-li qiz-li removed their assignment May 18, 2020
@filikun
Copy link
Author

filikun commented May 20, 2020

Nice work but I still have a problem. The whole bar does not seem to center. Here is how it looks for me now. The two first "button bars" are the old way and the 3rd is the new code.

signal-attachment-2020-05-20-191858

@KTibow
Copy link
Contributor

KTibow commented May 20, 2020 •
edited

@filikun in order to solve this, customize the Media Queries:

      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }

Modify the max-width: 600px and the min-width: 1200px to change the thresholds.
Modify the margin-left: 4px; and the margin-left: 11px; to change the margin on the left.

@Harry-1976
Copy link

@filikun in order to solve this, customize the Media Queries:

      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }

Modify the max-width: 600px and the min-width: 1200px to change the thresholds.
Modify the margin-left: 4px; and the margin-left: 11px; to change the margin on the left.

Looking at the screen shot i think @filikun may even remove both @media sections. The standard styling already fits perfectly.

@KTibow
Copy link
Contributor

KTibow commented May 20, 2020 •
edited

@Harry-1976 but then if it's landscape, or on a giant display it might not work.
But if it works it works...

@Harry-1976
Copy link

@KTibow True that. Your mod works for me.

@qiz-li qiz-li mentioned this issue Jun 11, 2020
Closed
@qiz-li qiz-li pinned this issue Jan 26, 2021
@qiz-li qiz-li added the 🔘 button cards Related to Button Cards label Jan 26, 2021
@qiz-li qiz-li unpinned this issue Jul 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🔘 button cards Related to Button Cards 🚀 enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@filikun @KTibow @qiz-li @Harry-1976