Bonjour,
Je vous soumet ce petit problème pour lequel je m’arrache les cheveux, mais qui me semble à la base « simple ».
Je souhaite afficher de boutons/tuiles, avec un maximum de 4 tuiles par lignes, sachant que ces tuiles sont des « button-card ».
Tout fonctionne correctement si j’utilise des cartes « grid », dans lesquelles je positionne exactement chaque tuile a l’emplacement souhaité (et ça fonctionne correctement sur desktop et sur smartphone):
Extrait du code associé:
################################################################
################################################################
# Lights tab
################################################################
################################################################
- title: Lumières
path: lumières
icon: 'mdi:lightbulb'
panel: false
badges: []
cards:
- type: vertical-stack
cards:
################################
### Bloc RDC
################################
- type: vertical-stack
title: Rez de chaussé
cards:
################################
### Line 1
################################
- type: grid
columns: 4
cards:
### Cuisine ######
- type: 'custom:button-card'
entity: light.cuisine
template: light
name: Cuisine
### Salon ###
- type: 'custom:button-card'
entity: light.salon
template: light
### Buffet ###
- type: 'custom:button-card'
entity: light.yeelight_buffet
template: light
name: Buffet
### Entrée ###
- type: 'custom:button-card'
entity: light.entree_int
template: light
name: Entrée
################################
### Line 2
################################
- type: grid
columns: 4
cards:
### Buanderie ######
- type: 'custom:button-card'
entity: light.buanderie
template: light
### WC ###
- type: 'custom:button-card'
entity: light.wc
template: light
Plutôt que de gérer le positionnement des boutons manuellement 1 par 1 (en créant manuellement chaque ligne, et en positionnant chaque bouton), je souhaite les mettre a la suite, et que le positionnement soit dynamique (en respectant les 4 par ligne). Notamment car j’ai certaines tuiles qui peuvent être cachées (via « conditional »), et je ne veux pas laisser un vide.
Pour ce faire, j’ai donc utilisé une imbrication de layout-card (en vertical et en grid), et de vertical stack. Le rendu est correct en mode desktop:
Mais dès que je passe sur smartphone, tout se chevauche:
Voici le code associé:
################################################################
################################################################
# Test
################################################################
################################################################
- title: Test3
path: test3
panel: true
cards:
#### Toute la page
- type: custom:layout-card
layout: vertical
cards:
##### Bloc
- type: vertical-stack
cards:
## Titre
- type: markdown
content: Cuisine
## Contenu
- type: custom:layout-card
layout: grid
gridcols: auto auto auto auto
cards:
## Tuile 1
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: light.cuisine
template: base
name: Cuisine
## Tuile 2
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: light.cuisine
template: base
name: Cuisine
## Tuile 3
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: light.cuisine
template: base
name: Cuisine
## Tuile 4
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: light.cuisine
template: base
name: Cuisine
## Tuile 5
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: light.cuisine
template: base
name: Cuisine
Puis le template du bouton au cas ou:
button_card_templates:
############### Master template ################
base:
aspect_ratio: 1/1
show_icon: false
state:
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
styles:
name:
[top: 78%, left: 10%, line-height: 100%, position: absolute]
card:
- font-family: Sf Display
- letter-spacing: 0px
- font-weight: 400
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 110%
- background-color: 'rgba(115, 115, 115, 0.4)'
- border-radius: 10%
- box-shadow: none
- transition: none
custom_fields:
circle:
[top: 12%, left: 54%, width: 40%, position: absolute]
hold_action:
action: more-info
light:
template:
- base
custom_fields:
circle: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) { const
brightness = Math.round(entity.attributes.brightness / 2.54); const
radius = 20.5; const circumference = radius * 2 * Math.PI; return `<svg
viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:
rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
${circumference}; stroke-dashoffset: ${circumference - brightness / 100
* circumference};" /> <text x="50%" y="54%" fill="#8d8e90"
font-size="14" text-anchor="middle"
alignment-baseline="middle">${brightness}<tspan
font-size="10">%</tspan></text></svg>`; } ]]]
icon_hue: &icon_hue >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
styles: &icon_hue_styles
custom_fields:
icon_hue:
[top: 16%, left: 6%, width: 50%, position: absolute]
Tous les exemple que j’ai trouvé, sont avec un positionnement « fixe », or je cherche du dynamique. Quelqu’un aurait il un exemple?
J’ai exploré la possibilité de gérer mes tuiles avec une largeur fixe, mais on s’éloigne du responsive:), j’ai aussi testé avec un width a 25% ou a 22%, ça ne fonctionne pas.
J’ai l’impression de me compliquer la vie pour un besoin simple (j’ai même fait des tests en passant par des « mod-card », puis gérer manuellement des margins pour chaque tuile, je commençait à partir sur une usine a gaz :), ).
Une piste?
