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:38:37 +02:00
parent 1ed188f590
commit a1df031f07
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -243,7 +243,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); max-width: calc(20vw);
z-index: 5; z-index: 5;
padding: 8px; padding: 8px;
@ -317,21 +317,21 @@ class CookCliRecipeViewStrategy extends HTMLElement {
content += `\n**Ustensiles** : ${recipe.cookware.map((c) => c.name).join(", ")}\n`; content += `\n**Ustensiles** : ${recipe.cookware.map((c) => c.name).join(", ")}\n`;
} }
const cards = [{ const leftCard = {
type: "markdown", type: "markdown",
content, content,
card_mod:` card_mod: `
style: style:
ha-markdown: ha-markdown:
$: | $: |
img { img {
width: 100%; width: 100%;
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
object-fit: cover; object-fit: cover;
border-radius: 12px; border-radius: 12px;
margin-bottom: 8px; margin-bottom: 8px;
}` }`,
}]; };
const rightCards = []; const rightCards = [];
@ -358,14 +358,18 @@ class CookCliRecipeViewStrategy extends HTMLElement {
); );
} }
cards.push({ type: "vertical-stack", cards: rightCards }); const columns = this._responsiveColumns(
leftCard,
{ type: "vertical-stack", cards: rightCards },
"40%"
);
const tab = { const tab = {
name: "Résumé", name: "Résumé",
icon: "mdi:book-open-variant", icon: "mdi:book-open-variant",
card: { card: {
type: "horizontal-stack", type: "vertical-stack",
cards, cards: [columns],
// Réserve la place de la barre flottante sous la checklist. // Réserve la place de la barre flottante sous la checklist.
card_mod: { style: ":host { display: block; padding-bottom: 96px; }" }, card_mod: { style: ":host { display: block; padding-bottom: 96px; }" },
}, },