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

Reorganize pantry - in progress

Browse Source
This commit is contained in:
Rafał
2026-04-10 10:46:27 +02:00
parent f785706578
commit 12369465d7
1 changed files with 7 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
js/views/Pantry.js
View File

@@ -125,7 +125,7 @@ export function getPantryHTML() {
</div> </div>
<!-- ── scrollable content ── --> <!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[4.5rem] pb-24" style="background:#2d2e2b !important;"> <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.5rem] pb-24" style="background:#2d2e2b !important;">
<div id="pantry-board" class="space-y-4"></div> <div id="pantry-board" class="space-y-4"></div>
</div> </div>
@@ -185,17 +185,9 @@ function ingredientRowHtml(id, pantry) {
const qty = getPantryTotal(id, pantry); const qty = getPantryTotal(id, pantry);
const hasProducts = ingredientHasProducts(id); const hasProducts = ingredientHasProducts(id);
const products = hasProducts ? getProductsForIngredient(id) : []; const products = hasProducts ? getProductsForIngredient(id) : [];
const pantryItems = hasProducts ? getPantryProducts(id, pantry) : [];
const stockedCount = pantryItems.filter((i) => i.qty > 0).length;
const hasStock = qty > 0; const hasStock = qty > 0;
const accent = hasStock ? '#6ee7b7' : '#4b4a46'; const accent = hasStock ? '#6ee7b7' : '#4b4a46';
const qtyColor = hasStock ? '#6ee7b7' : '#d7d2c8'; const qtyColor = hasStock ? '#6ee7b7' : '#d7d2c8';
const subtitle = hasProducts
? `${stockedCount}/${products.length} produktów`
: categoryLabel(def.category);
const status = hasProducts
? (stockedCount === 0 ? 'wybierz produkt' : stockedCount === products.length ? 'wszystko na stanie' : 'częściowo na stanie')
: (hasStock ? 'na stanie' : 'brak');
const badgeText = hasProducts ? productCountShortLabel(products.length) : unitLabel(def.pantryUnit); const badgeText = hasProducts ? productCountShortLabel(products.length) : unitLabel(def.pantryUnit);
return `<button type="button" class="pv2-chip shrink-0 w-[9.5rem] rounded-2xl px-3 py-2.5 text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid #444442; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);" data-id="${esc(id)}"> return `<button type="button" class="pv2-chip shrink-0 w-[9.5rem] rounded-2xl px-3 py-2.5 text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid #444442; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);" data-id="${esc(id)}">
@@ -206,15 +198,13 @@ function ingredientRowHtml(id, pantry) {
<span class="block text-[12px] font-semibold leading-[1.2] overflow-hidden" style="color:#ddd6ca; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;"> <span class="block text-[12px] font-semibold leading-[1.2] overflow-hidden" style="color:#ddd6ca; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
${esc(def.name)} ${esc(def.name)}
</span> </span>
<span class="block text-[10px] mt-0.5 truncate" style="color:#9b978f;">${esc(subtitle)}</span>
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<div class="flex items-end justify-between gap-2"> <div class="flex items-end justify-between gap-2">
<span class="text-[14px] font-bold tabular-nums leading-none block" style="color:${qtyColor};">${esc(formatQtyWithUnit(qty, def.pantryUnit))}</span> <span class="text-[14px] font-bold tabular-nums leading-none block" style="color:${qtyColor};">${esc(formatQtyWithUnit(qty, def.pantryUnit))}</span>
<span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold shrink-0" style="background:#2f2f2d; color:#9b978f;">${esc(badgeText)}</span> <span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold shrink-0" style="background:#2f2f2d; color:#9b978f;">${esc(badgeText)}</span>
</div> </div>
<span class="text-[10px] block mt-1" style="color:#9b978f;">${esc(status)}</span>
</div> </div>
</button>`; </button>`;
} }
@@ -250,14 +240,11 @@ function renderBoard() {
const icon = CATEGORY_ICONS[cat] || 'fa-jar'; const icon = CATEGORY_ICONS[cat] || 'fa-jar';
return ` return `
<section class="mb-4 last:mb-0"> <section class="mb-4 last:mb-0">
<div class="flex items-center justify-between gap-3 mb-2 px-0.5"> <div class="mb-2 px-0.5">
<div class="min-w-0"> <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;"> <i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
<i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))} </p>
</p> <p class="text-[10px] mt-1" style="color:#6d6c67;">${ids.length} ${getCategoryItemLabel(ids.length)}</p>
<p class="text-[10px] mt-1" style="color:#6d6c67;">${ids.length} ${getCategoryItemLabel(ids.length)}</p>
</div>
<span class="text-[10px] shrink-0" style="color:#6d6c67;">przesuń w bok</span>
</div> </div>
<div class="overflow-x-auto no-scrollbar -mx-4 px-4"> <div class="overflow-x-auto no-scrollbar -mx-4 px-4">
<div class="flex gap-2.5 pb-1"> <div class="flex gap-2.5 pb-1">