ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design work on pantry
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m16s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-17 19:38:15 +02:00
parent 0429b0b945
commit 9bd6627fe2
4 changed files with 163 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
js/ui/ingredientCard.js
View File

@@ -160,7 +160,7 @@ export function getIngredientCardHTML({
return ` return `
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}"> <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
<div id="${idBase}" class="${cardClass}" style="${cardStyle}"> <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
<div class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;"> <div id="${idBase}-hero" class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
<img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" /> <img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
<div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center"> <div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i> <i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
@@ -215,30 +215,41 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
state.shopDraftQty = null; state.shopDraftQty = null;
} }
function getCurrentShoppingItem(def) { function getShoppingItemFor(def, product) {
const shopping = loadShoppingState(); const shopping = loadShoppingState();
const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen'); const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen');
if (!kitchen || kitchen.type !== 'kitchen') return null; if (!kitchen || kitchen.type !== 'kitchen') return null;
const unit = unitLabel(def.pantryUnit); const unit = unitLabel(def.pantryUnit);
const targetProductId = product?.id || '';
return kitchen.items.find((item) => { return kitchen.items.find((item) => {
if (item.checked) return false; if (item.checked) return false;
return item.ingredientId === state.ingredientId return item.ingredientId === def.id
&& item.unit === unit && item.unit === unit
&& (item.productId || '') === (state.productId || ''); && (item.productId || '') === targetProductId;
}) || null; }) || null;
} }
function renderHeader(def, product, pantry) { function renderHeader(def, product, pantry) {
const hasProducts = ingredientHasProducts(def.id); const hasProducts = ingredientHasProducts(def.id);
const isListMode = hasProducts && state.allowProductSelection && !state.productId;
const isBackAvailable = hasProducts && state.allowProductSelection && state.productId;
const icon = CATEGORY_ICONS[def.category] || 'fa-jar'; const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const image = product?.image || def.image; const heroEl = el('hero');
const img = el('img'); const img = el('img');
const fallback = el('fallback'); const fallback = el('fallback');
const fallbackIcon = el('fallback-icon'); const fallbackIcon = el('fallback-icon');
if (heroEl) {
heroEl.style.height = '';
heroEl.style.background = '#393937';
}
if (img && fallback) { if (img && fallback) {
const image = isListMode ? def.image : (product?.image || def.image);
const altName = isListMode ? def.name : (product?.name || def.name);
if (image) { if (image) {
img.src = image; img.src = image;
img.alt = product?.name || def.name; img.alt = altName;
img.classList.remove('hidden'); img.classList.remove('hidden');
fallback.classList.add('hidden'); fallback.classList.add('hidden');
} else { } else {
@@ -248,22 +259,20 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
} }
} }
const totalQty = getPantryTotal(def.id, pantry);
const categoryEl = el('category'); const categoryEl = el('category');
const nameEl = el('name'); const nameEl = el('name');
const subtitleEl = el('subtitle'); const subtitleEl = el('subtitle');
const backBtn = el('back'); const backBtn = el('back');
if (categoryEl) categoryEl.textContent = product?.brand || CATEGORY_LABELS[def.category] || def.category; const displayProduct = isListMode ? null : product;
if (nameEl) nameEl.textContent = product?.name || def.name; if (categoryEl) categoryEl.textContent = displayProduct?.brand || CATEGORY_LABELS[def.category] || def.category;
if (nameEl) nameEl.textContent = displayProduct?.name || def.name;
if (subtitleEl) { if (subtitleEl) {
let subtitle = ''; let subtitle = '';
if (product) { if (displayProduct) {
subtitle = [def.name, product.packLabel].filter(Boolean).join(' • '); subtitle = [def.name, displayProduct.packLabel].filter(Boolean).join(' • ');
} else if (hasProducts) { } else if (!hasProducts && def.purchasePack?.label) {
subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
} else if (def.purchasePack?.label) {
subtitle = def.purchasePack.label; subtitle = def.purchasePack.label;
} }
@@ -276,20 +285,25 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
} }
if (backBtn) { if (backBtn) {
backBtn.classList.toggle('hidden', !(hasProducts && state.productId && state.allowProductSelection)); backBtn.classList.toggle('hidden', !isBackAvailable);
} }
} }
function renderNutrition(def, product) { function renderNutrition(def, product) {
const wrap = el('nutrition'); const wrap = el('nutrition');
if (!wrap) return; if (!wrap) return;
const hasProducts = ingredientHasProducts(def.id);
const isListMode = hasProducts && state.allowProductSelection && !state.productId;
if (isListMode) {
wrap.innerHTML = '';
return;
}
const nutrition = product?.nutritionPer100g || def.nutritionPer100g; const nutrition = product?.nutritionPer100g || def.nutritionPer100g;
if (!nutrition) { if (!nutrition) {
wrap.innerHTML = ''; wrap.innerHTML = '';
return; return;
} }
const hasProducts = ingredientHasProducts(def.id);
const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g'; const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
const hint = product const hint = product
? '' ? ''
@@ -321,40 +335,11 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
</div>`; </div>`;
} }
function renderStock() { function renderStockEditorInto(wrap, def, product, pantry) {
const wrap = el('stock'); const totalQty = getPantryTotal(def.id, pantry);
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const pantry = loadPantry();
const hasProducts = ingredientHasProducts(state.ingredientId);
const product = state.productId ? PRODUCTS[state.productId] : null;
const totalQty = getPantryTotal(state.ingredientId, pantry);
const unit = unitLabel(def.pantryUnit); const unit = unitLabel(def.pantryUnit);
if (hasProducts && !product) {
const stockedCount = getPantryProducts(state.ingredientId, pantry).filter((i) => i.qty > 0).length;
const helperChip = state.allowProductSelection
? '<span class="inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold shrink-0" style="background:#2f2f2d; color:#d7d2c8;">Wybierz produkt</span>'
: '';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
<div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-[10px] font-semibold uppercase tracking-wide" style="color:#9b978f;">Stan łączny</p>
<p class="text-[16px] font-bold tabular-nums mt-1" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(unit)}</p>
<p class="text-[11px] mt-1 leading-snug" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(state.ingredientId).length} produktów ma zapas</p>
</div>
${helperChip}
</div>
</div>`;
return;
}
const qty = product const qty = product
? (getPantryProducts(state.ingredientId, pantry).find((i) => i.productId === state.productId)?.qty || 0) ? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
: totalQty; : totalQty;
const { step, usesPackStep } = getQtyStepMeta(def, product); const { step, usesPackStep } = getQtyStepMeta(def, product);
const packSize = product?.packSize || def.purchasePack?.amount || 0; const packSize = product?.packSize || def.purchasePack?.amount || 0;
@@ -443,10 +428,10 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
const nextQty = usesPackStep const nextQty = usesPackStep
? normalizeQty((Number(input?.value) || 0) * step) ? normalizeQty((Number(input?.value) || 0) * step)
: normalizeQty(input?.value ?? state.stockDraftQty ?? qty); : normalizeQty(input?.value ?? state.stockDraftQty ?? qty);
if (state.productId) { if (product) {
setPantryProductQty(state.ingredientId, state.productId, nextQty); setPantryProductQty(def.id, product.id, nextQty);
} else { } else {
setPantryQty(state.ingredientId, nextQty); setPantryQty(def.id, nextQty);
} }
state.stockEditorOpen = false; state.stockEditorOpen = false;
state.stockDraftQty = null; state.stockDraftQty = null;
@@ -455,76 +440,13 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
}); });
} }
function productRowHtml(ingredientId, productId, pantry, selectedProductId) { function renderShopEditorInto(wrap, def, product) {
const def = INGREDIENTS[ingredientId];
const product = PRODUCTS[productId];
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
const isSelected = selectedProductId === productId;
return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
${mediaHtml(product.image || def.image, icon)}
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between gap-2">
<span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
<span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
</div>
<div class="flex items-center gap-2 mt-0.5">
${compactMetaText(product.packLabel || '', 'muted')}
${isSelected ? compactMetaText('wybrany', 'success') : ''}
</div>
</div>
<i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
</button>`;
}
function renderProducts() {
const wrap = el('products');
if (!wrap || !state.ingredientId) return;
if (!ingredientHasProducts(state.ingredientId) || !state.allowProductSelection) {
wrap.innerHTML = '';
return;
}
const pantry = loadPantry();
const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
const selectedProductId = state.selectedProductId || state.productId;
const subtitle = state.productId
? 'Wróć lub wybierz inny wariant.'
: 'Wybierz wariant, aby zobaczyć szczegóły.';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
<div class="space-y-1.5">
${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, selectedProductId)).join('')}
</div>`;
wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
btn.addEventListener('click', () => {
const nextProductId = btn.dataset.productId || null;
state.productId = nextProductId;
state.selectedProductId = nextProductId;
resetInlineEditors();
if (nextProductId) state.onProductChange?.(nextProductId);
render();
state.onAfterChange?.();
});
});
}
function renderShop() {
const wrap = el('shop');
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const product = state.productId ? PRODUCTS[state.productId] : null;
const { step, usesPackStep } = getQtyStepMeta(def, product); const { step, usesPackStep } = getQtyStepMeta(def, product);
const packSize = product?.packSize || def.purchasePack?.amount; const packSize = product?.packSize || def.purchasePack?.amount;
const packLabel = product?.packLabel || def.purchasePack?.label; const packLabel = product?.packLabel || def.purchasePack?.label;
const usesPacks = Boolean(packSize && packSize > 0); const usesPacks = Boolean(packSize && packSize > 0);
const defaultAmount = step; const defaultAmount = step;
const shoppingItem = getCurrentShoppingItem(def); const shoppingItem = getShoppingItemFor(def, product);
const hasShoppingItem = Boolean(shoppingItem); const hasShoppingItem = Boolean(shoppingItem);
const shoppingAmount = shoppingItem?.amount || 0; const shoppingAmount = shoppingItem?.amount || 0;
const draftQty = state.shopEditorOpen const draftQty = state.shopEditorOpen
@@ -542,7 +464,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
? formatPreciseQty(draftQty / step) ? formatPreciseQty(draftQty / step)
: formatPreciseQty(draftQty); : formatPreciseQty(draftQty);
const shopInputUnit = usesPackStep ? 'opak.' : unitLabel(def.pantryUnit); const shopInputUnit = usesPackStep ? 'opak.' : unitLabel(def.pantryUnit);
const actionLabel = state.shopEditorOpen ? 'Anuluj' : 'Zmień'; const actionLabel = state.shopEditorOpen ? 'Anuluj' : (hasShoppingItem ? 'Zmień' : 'Dodaj');
wrap.innerHTML = ` wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p> <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
@@ -632,14 +554,14 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
} else if (nextAmount > 0) { } else if (nextAmount > 0) {
const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined; const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined;
const line = { const line = {
ingredientId: state.ingredientId, ingredientId: def.id,
amount: nextAmount, amount: nextAmount,
unit: unitLabel(def.pantryUnit), unit: unitLabel(def.pantryUnit),
name: product?.name || def.name, name: product?.name || def.name,
category: def.category, category: def.category,
sourceNote: note || state.sourceNote || defaultSourceNote, sourceNote: note || state.sourceNote || defaultSourceNote,
}; };
if (state.productId) line.productId = state.productId; if (product) line.productId = product.id;
addOrMergeShoppingLines([line]); addOrMergeShoppingLines([line]);
toastText = `Dodano ${product?.name || def.name}.`; toastText = `Dodano ${product?.name || def.name}.`;
} }
@@ -652,6 +574,111 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
}); });
} }
function renderStock() {
const wrap = el('stock');
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const hasProducts = ingredientHasProducts(state.ingredientId);
const isListMode = hasProducts && state.allowProductSelection && !state.productId;
if (isListMode) {
wrap.innerHTML = '';
return;
}
const pantry = loadPantry();
const product = state.productId ? PRODUCTS[state.productId] : null;
renderStockEditorInto(wrap, def, product, pantry);
}
function productRowHtml(ingredientId, productId, pantry, kitchenItems) {
const def = INGREDIENTS[ingredientId];
const product = PRODUCTS[productId];
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const unit = unitLabel(def.pantryUnit);
const pantryQty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
const shoppingItem = kitchenItems.find((item) => !item.checked
&& item.ingredientId === ingredientId
&& item.unit === unit
&& (item.productId || '') === productId);
const shoppingAmount = shoppingItem?.amount || 0;
const pantryLabel = pantryQty > 0 ? `${formatQty(pantryQty)} ${unit}` : '—';
const pantryColor = pantryQty > 0 ? '#ddd6ca' : '#6d6c67';
const shoppingLabel = shoppingAmount > 0 ? `${formatQty(shoppingAmount)} ${unit}` : '';
return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid transparent;" data-product-id="${esc(productId)}">
${mediaHtml(product.image || def.image, icon)}
<div class="flex-1 min-w-0">
<span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
${product.packLabel ? `<span class="text-[10px] block mt-0.5" style="color:#9b978f;">${esc(product.packLabel)}</span>` : ''}
</div>
<div class="flex flex-col items-end gap-0.5 shrink-0 tabular-nums">
<span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:${pantryColor};">
<i class="fas fa-box text-[9px]" style="color:#8f8b84;"></i>${esc(pantryLabel)}
</span>
${shoppingLabel ? `<span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:#ddd6ca;">
<i class="fas fa-cart-shopping text-[9px]" style="color:#8f8b84;"></i>${esc(shoppingLabel)}
</span>` : ''}
</div>
<i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
</button>`;
}
function renderProducts() {
const wrap = el('products');
if (!wrap || !state.ingredientId) return;
const hasProducts = ingredientHasProducts(state.ingredientId);
const isListMode = hasProducts && state.allowProductSelection && !state.productId;
if (!isListMode) {
wrap.innerHTML = '';
return;
}
const pantry = loadPantry();
const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
const shopping = loadShoppingState();
const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen');
const kitchenItems = (kitchen && kitchen.type === 'kitchen') ? kitchen.items : [];
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
<div class="space-y-1.5">
${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, kitchenItems)).join('')}
</div>`;
wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
btn.addEventListener('click', () => {
const nextProductId = btn.dataset.productId || null;
if (!nextProductId) return;
state.productId = nextProductId;
state.selectedProductId = nextProductId;
resetInlineEditors();
state.onProductChange?.(nextProductId);
render();
state.onAfterChange?.();
});
});
}
function renderShop() {
const wrap = el('shop');
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const hasProducts = ingredientHasProducts(state.ingredientId);
const isListMode = hasProducts && state.allowProductSelection && !state.productId;
if (isListMode) {
wrap.innerHTML = '';
return;
}
const product = state.productId ? PRODUCTS[state.productId] : null;
renderShopEditorInto(wrap, def, product);
}
function render() { function render() {
if (!state.ingredientId) return; if (!state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId]; const def = INGREDIENTS[state.ingredientId];

2
js/ui/mealPlanEditor.js
View File

@@ -24,7 +24,7 @@ import {
renderCalendarGrid, renderCalendarGrid,
syncCalendarTodayButton, syncCalendarTodayButton,
} from './mealCalendar.js?v=11'; } from './mealCalendar.js?v=11';
import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260410-107'; import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-113';
function esc(s) { function esc(s) {
return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');

22
js/views/Pantry.js
View File

@@ -13,7 +13,7 @@ import {
renderCalendarGrid, renderCalendarGrid,
syncCalendarTodayButton, syncCalendarTodayButton,
} from '../ui/mealCalendar.js?v=11'; } from '../ui/mealCalendar.js?v=11';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260410-107'; import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-113';
/* ── helpers ── */ /* ── helpers ── */
@@ -253,12 +253,8 @@ export function getPantryHTML() {
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:#2d2e2b !important;"> <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:#2d2e2b !important;">
<div id="pantry-board"></div> <div id="pantry-board"></div>
</div> </div>
</div>
${getIngredientCardHTML({ ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
idBase: 'pv2-card',
overlayClass: 'absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
})}
</div>`;
} }
/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */ /* ══════════════════════ HORIZON SELECTOR ══════════════════════ */
@@ -574,11 +570,11 @@ function shortfallTileHtml(item) {
</div> </div>
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
</div> </div>
<div class="w-full flex flex-col gap-1"> <div class="w-full flex items-center gap-2">
<div class="w-full h-1 rounded-full overflow-hidden" style="background:#2a2a28;"> <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
<div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div> <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
</div> </div>
<span class="text-[10px] font-semibold tabular-nums" style="color:#ddd6ca;">${esc(formatQty(item.pantryQty))} <span class="font-medium" style="color:#9b978f;">/ ${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span> <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:#ddd6ca;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
</button>`; </button>`;
} }
@@ -593,11 +589,11 @@ function sufficientTileHtml(item) {
</div> </div>
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
</div> </div>
<div class="w-full flex flex-col gap-1"> <div class="w-full flex items-center gap-2">
<div class="w-full h-1 rounded-full overflow-hidden" style="background:#2a2a28;"> <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
<div class="h-full rounded-full" style="width:100%; background:#6ee7b7;"></div> <div class="h-full rounded-full" style="width:100%; background:#6ee7b7;"></div>
</div> </div>
<span class="text-[10px] font-semibold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(item.pantryQty))} <span class="font-medium" style="color:#9b978f;">/ ${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span> <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:#9b978f;">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
</button>`; </button>`;
} }

2
js/views/RecipeDetailV2.js
View File

@@ -1,5 +1,5 @@
import { RECIPES, INGREDIENTS, PRODUCTS } from '../data/catalog.js?v=8'; import { RECIPES, INGREDIENTS, PRODUCTS } from '../data/catalog.js?v=8';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260410-107'; import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-113';
function escapeHtml(s) { function escapeHtml(s) {
return String(s) return String(s)