Custom button card grid and sizes struggle

Share your Projects! Dashboards & Frontend
1

So I never been completely happy with the design part of my dashboard. I really enjoy mushroom but I want to make someting WAF-proof, something that looked nice and was functional,…

So I started making some custom button cards, inspired by some home automation designs.

here’s an example of some cards (am now adding temperature to climate card but it’s just to show a little my concept.

custom buttons 1

when I use this on my tablet, it looks fine.

Now i’m also creating smaller buttons for my phone:

custom buttons 2 phone
custom buttons 2 phone387×502 21.8 KB

which all looks great, but when i’m playing around it’s hard to work on them because the padding and margins are different on my phone vs on my screen.
here are the same buttons on my pc screen instead of my phone (the ones on the right is the same as the previous image from my phone.

custom buttons total
custom buttons total1267×743 56.8 KB

it’s really hard to start making template from these, as I’m using fixed width and height px to make it fit on my screens…

Maybe i’m having the wrong approach on these buttons, so If someone could push me in the right direction?

here is the code of 1 of the (bigger) buttons:


type: custom:button-card
show_state: true
styles:
  card:
    - background-color: '#6fc1ab'
    - box-shadow: none
    - border-radius: 20%
    - height: 160px
  img_cell:
    - background-color: rgb(72, 82, 100)
    - border-radius: 100%
    - width: 40px
    - height: 40px
    - background-color: '#67b491'
  icon:
    - width: 25px
    - height: 25px
  name:
    - color: white
    - font-size: 1em
    - height: 30px
    - width: 100%
    - text-align: left
    - margin: 20px 0 0 35px
  state:
    - color: white
  custom_fields:
    second:
      - position: absolute
      - left: 5%
      - top: 70%
      - height: 60px
      - width: 60px
      - font-size: 20px
      - line-height: 20px
  label: test
  grid:
    - grid-template-areas: '" i s " " n n " " notification notification"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr
state:
  - value: 'off'
    styles:
      icon:
        - color: '#568c6c'
      img_cell:
        - background-color: '#436c5c'
  - value: 'on'
    styles:
      icon:
        - color: white
  - value: unavailable
    styles:
      icon:
        - color: red
  - value: unavailable
    styles:
      icon:
        - color: red
custom_fields:
  second: |
    [[[
        if (states['light.living'].state == 'on')
          return `<ha-icon
    icon="mdi:toggle-switch-outline"
    style="width: 40px; height: 40px; color: white; ">
    </ha-icon>`
        return `<ha-icon
    icon="mdi:toggle-switch-off"
    style="width: 40px; height: 40px; color: #436c5c ;">
    </ha-icon>`;
      ]]]
entity: light.living
name: Hele living
icon: mdi:lightbulb
hold_action:
  action: more-info

thanks in advance for your time!

greetings,
Tom

2 Likes