TheThomaas/ha-cookcli
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects 1 Releases 6 Wiki Activity

Update cookcli-recipe-strategy.js

Browse source
This commit is contained in:
TheThomaas 2026-09-24 14:48:12 +02:00
parent 530f66338c
commit c0e9d3aff6
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
custom_components/cookcli/www/cookcli-recipe-strategy.js
View file

@ -114,6 +114,10 @@ class CookCliDashboardStrategy extends HTMLElement {
* d'une unique carte tabdeck-card (Résumé + une tab par étape). * d'une unique carte tabdeck-card (Résumé + une tab par étape).
*/ */
class CookCliRecipeViewStrategy extends HTMLElement { class CookCliRecipeViewStrategy extends HTMLElement {
// Largeur unique de tous les boutons de navigation (Commencer, Précédent,
// Suivant) : c'est elle qu'on ajuste pour les agrandir ou les réduire.
static NAV_BUTTON_WIDTH = "clamp(96px, 26vw, 130px)";
static async generate(config, hass) { static async generate(config, hass) {
config = config || {}; config = config || {};
const path = config.path; const path = config.path;
@ -211,6 +215,11 @@ class CookCliRecipeViewStrategy extends HTMLElement {
}, },
card_mod: { card_mod: {
style: ` style: `
:host {
flex: 0 0 ${this.NAV_BUTTON_WIDTH} !important;
width: ${this.NAV_BUTTON_WIDTH} !important;
min-width: 0 !important;
}
ha-card { ha-card {
border-radius: 999px; border-radius: 999px;
--ha-card-border-width: 0; --ha-card-border-width: 0;
@ -243,8 +252,7 @@ class CookCliRecipeViewStrategy extends HTMLElement {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: max-content; width: max-content;
/* max-width: calc(100vw - 32px); */ /*max-width: calc(100vw - 32px);*/
max-width: calc(20vw);
z-index: 5; z-index: 5;
padding: 8px; padding: 8px;
border-radius: 999px; border-radius: 999px;
@ -256,9 +264,6 @@ class CookCliRecipeViewStrategy extends HTMLElement {
#root { #root {
justify-content: center; justify-content: center;
} }
#root > * {
flex: 0 0 clamp(110px, 38vw, 160px) !important;
}
`, `,
}, },
}; };