Hello There
I have a problem with the footer and I have no idea what it can be. The size of the buttons does not adjust automatically. If I change the with from “fit-content” to 100px in footer.yaml, the buttons scale.
#button_card_templates: !include button_card_templates.yaml
button_card_templates:
!include_dir_merge_named button_card_templates
views:
- type: custom:grid-layout
path: 0
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar wohnzimmer flur schlafzimmer ."
"sidebar media sonos home ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". wohnzimmer schlafzimmer ."
". flur home ."
". media sonos ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar wohnzimmer schlafzimmer ."
"sidebar flur home ."
"sidebar media sonos ."
"sidebar footer footer ."
cards:
- type: custom:button-card #extra_styles fix
styles: {card: [display: none]}
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
#################################################
# #
# Wohnzimmer #
# #
#################################################
- type: grid
title: Wohnzimmer
view_layout:
grid-area: wohnzimmer
columns: 2
cards:
- type: custom:button-card
entity: light.new_york
name: New York
template:
- light
- icon_hue
- type: custom:button-card
entity: light.schnapstrue
name: Schnapstruhe
template:
- light
- icon_hue
- type: custom:button-card
entity: sensor.weather_station_temperature
name: Temperatur
tap_action:
action: more-info
custom_fields:
graph:
card:
entities:
- sensor.weather_station_temperature
template:
- temperature
- icon_temp
variables:
popup_name: Temperatur
- type: custom:button-card
entity: light.salzstein
name: Salzstein
template:
- light
- icon_hue
#################################################
# #
# Schlafzimmer #
# #
#################################################
- type: grid
title: Schlafzimmmer
view_layout:
grid-area: schlafzimmer
columns: 2
cards:
- type: custom:button-card
entity: light.schlafzimmer
name: Ständerlampe
template:
- light
- icon_lamp
- type: custom:button-card
entity: fan.luftibert
name: "Lüftibert"
hold_action:
!include popup/schlafzimmer_fan.yaml
tap_action:
action: more-info
template:
- base
- icon_fan
- type: custom:button-card
entity: media_player.hauptschlafzimmer
name: Sonos
hold_action:
!include popup/sonos.yaml
template:
- base
- icon_sonos
- loader
- type: custom:button-card
entity: sensor.luftibert_temperature
name: Temperatur
tap_action:
action: more-info
custom_fields:
graph:
card:
entities:
- sensor.luftibert_temperature
template:
- temperature
- icon_temp
variables:
popup_name: Temperatur
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_jan_stager
playlist_type: discover-weekly
grid_covers_per_row: '2'
limit: 4
country_code: DE
default_device: Küche
display_style: grid
known_connect_devices:
- id: d4757ab523224358f9c9052ee4de85ba324c41fa
name: Küche
entity_id: media_player.kuche
- type: custom:mini-media-player
entity: media_player.kuche
hide:
power: true
volume: true
controls: true
source: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.kuche
name: Sonos Küche
- entity_id: media_player.badezimmer
name: Sonos Badezimmer
- entity_id: media_player.buro
name: Sonos Büro
- entity_id: media_player.hauptschlafzimmer
name: Sonos Schlafzimmer
- entity_id: media_player.balkon
name: Sonos Balkon
entities:
- type: custom:mini-media-player
entity: media_player.multiroom_player
group: true
source: icon
artwork: cover
info: scroll
hide:
volume: true
power_state: true
- type: custom:mini-media-player
entity: media_player.kuche
group: true
hide:
controls: true
- type: custom:mini-media-player
entity: media_player.badezimmer
group: true
hide:
controls: true
- type: custom:mini-media-player
entity: media_player.buro
group: true
hide:
controls: true
- type: custom:mini-media-player
entity: media_player.hauptschlafzimmer
group: true
hide:
controls: true
- type: custom:mini-media-player
entity: media_player.balkon
group: true
hide:
controls: true
#################################################
# #
# Sonos #
# #
#################################################
- type: grid
title: Sonos
view_layout:
grid-area: sonos
columns: 1
cards:
- type: entities
entities:
- type: custom:mini-media-player
entity: media_player.kuche
group: true
hide:
controls: true
power: true
icon: true
info: true
source: true
progress: true
- type: custom:mini-media-player
entity: media_player.buro
group: true
hide:
controls: true
power: true
icon: true
info: true
source: true
progress: true
- type: custom:mini-media-player
entity: media_player.badezimmer
group: true
hide:
controls: true
power: true
icon: true
info: true
source: true
progress: true
- type: custom:mini-media-player
entity: media_player.hauptschlafzimmer
name: Schlafzimmer
group: true
hide:
controls: true
power: true
icon: true
info: true
source: true
progress: true
- type: custom:mini-media-player
entity: media_player.balkon
name: Balkon
group: true
hide:
controls: true
power: true
icon: true
info: true
source: true
progress: true
#################################################
# #
# Flur #
# #
#################################################
- type: grid
title: Flur
view_layout:
grid-area: flur
columns: 2
cards:
- type: custom:button-card
entity: light.group_hall
name: Hall
template:
- light
- icon_spot
#################################################
# #
# Home #
# #
#################################################
- type: grid
title: Home
view_layout:
grid-area: home
columns: 2
cards:
- type: custom:button-card
entity: script.home_leave
name: Good Bye
hold_action:
action: none
template:
- base
- icon_away
- type: custom:button-card
entity: script.home_arrive
name: Welcome
hold_action:
action: none
template:
- base
- icon_home
- type: custom:button-card
entity: script.good_night
name: Good Night
hold_action:
action: none
template:
- base
- icon_good_night
- type: custom:button-card
entity: script.music
name: Music
hold_action:
action: none
template:
- base
- icon_music
#################################################
# #
# FOOTER #
# #
#################################################
- type: horizontal-stack
view_layout:
grid-area: footer
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:nas"></ha-icon> NAS
tap_action:
!include popup/footer_nas.yaml
triggers_update:
- binary_sensor.jan_home_update_available
- sensor.jan_home_status
- binary_sensor.jan_home_security_status
- sensor.disk_use_percent
variables:
notify: >
[[[
let id = this._config.triggers_update;
if (id.every(e => states[e]))
return states[id[0]].state === 'on'
? 1
: states[id[1]].state === 'background_scrubbing' ||
states[id[2]].state === 'on' ||
parseFloat(states[id[3]].state) >= 85;
]]]
template: footer
- type: custom:button-card
name: >
<ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> Updates
tap_action:
!include popup/footer_updates.yaml
triggers_update:
- sensor.hacs
- sensor.docker_hub_beta
- sensor.docker_hub
variables:
notify: >
[[[
let id = this._config.triggers_update;
if (id.every(e => states[e])) {
let hacs = parseInt(states[id[0]].state),
installed = hass.config.version,
latest = installed.includes('b')
? states[id[1]].state
: states[id[2]].state;
if (latest.includes('.') && Number.isInteger(hacs))
return hacs + (installed !== latest ? 1 : 0);
}
return 0;
]]]
template: footer
- type: custom:button-card
name: >
<ha-icon icon="custom:roborock-vacuum"></ha-icon> Buddy
tap_action:
!include popup/footer_vacuum.yaml
triggers_update:
- sensor.date
variables:
notify: >
[[[
let id = states['sensor.morty_last_clean_end'];
if (id) return (Date.now() - Date.parse(id.state)) > 6048e5;
]]]
template: footer
- type: custom:button-card
name: >
<ha-icon icon="mdi:chart-line-variant"></ha-icon> Statistik
tap_action:
!include popup/footer_history.yaml
template: footer
- type: custom:button-card
name: >
<ha-icon icon="custom:cupra"></ha-icon> Cupra
tap_action:
!include popup/footer_cupra.yaml
template: footer
I am grateful for every hint
