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

22
js/views/Pantry.js
View File

@@ -13,7 +13,7 @@ import {
renderCalendarGrid,
syncCalendarTodayButton,
} 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 ── */
@@ -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-board"></div>
</div>
${getIngredientCardHTML({
idBase: 'pv2-card',
overlayClass: 'absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
})}
</div>`;
</div>
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
}
/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */
@@ -574,11 +570,11 @@ function shortfallTileHtml(item) {
</div>
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
</div>
<div class="w-full flex flex-col gap-1">
<div class="w-full h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
<div class="w-full flex items-center gap-2">
<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>
<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>
</button>`;
}
@@ -593,11 +589,11 @@ function sufficientTileHtml(item) {
</div>
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
</div>
<div class="w-full flex flex-col gap-1">
<div class="w-full h-1 rounded-full overflow-hidden" style="background:#2a2a28;">
<div class="w-full flex items-center gap-2">
<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>
<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>
</button>`;
}

2
js/views/RecipeDetailV2.js
View File

@@ -1,5 +1,5 @@
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) {
return String(s)