ulfr/homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify UX

Browse Source
This commit is contained in:
Rafał
2026-03-25 23:57:47 +01:00
parent 2ff7e6f8ce
commit 6e76977ace
4 changed files with 492 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
stacks/recipe/js/views/Pantry.js
View File

@@ -55,10 +55,10 @@ export function getPantryHTML() {
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj produktu…"
class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" />
</div>
<div id="pantry-category-chips" class="flex gap-1.5 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
<div id="pantry-category-chips" class="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
<div class="flex items-center justify-end">
<label class="flex items-center gap-2 cursor-pointer select-none">
<span class="text-[11px] font-medium text-gray-500">Tylko na stanie</span>
<span class="text-xs font-medium text-gray-500">Tylko na stanie</span>
<button type="button" id="pantry-stock-toggle" role="switch" aria-checked="false"
class="relative w-10 h-[22px] rounded-full bg-gray-200 transition-colors duration-200 shrink-0">
<span class="absolute left-0.5 top-0.5 w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-transform duration-200"></span>
@@ -68,7 +68,7 @@ export function getPantryHTML() {
</div>
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar">
<div id="pantry-board" class="px-4 pt-3 pb-4 space-y-1"></div>
<div id="pantry-board" class="px-4 pt-3 pb-4 space-y-2"></div>
</div>
<!-- ── product sheet ── -->
@@ -142,9 +142,9 @@ function renderCategoryChips() {
const active = selectedCategories.has(k);
const icon = CATEGORY_ICONS[k] || 'fa-jar';
const cls = active
? 'shrink-0 inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-[11px] font-semibold bg-gray-900 text-white transition-colors'
: 'shrink-0 inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-[11px] font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors';
return `<button type="button" data-cat="${esc(k)}" class="pv2-cat-chip ${cls}"><i class="fas ${icon} text-[9px]"></i>${esc(categoryLabel(k))}</button>`;
? 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-900 text-white transition-colors'
: 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors';
return `<button type="button" data-cat="${esc(k)}" class="pv2-cat-chip ${cls}"><i class="fas ${icon} text-[10px]"></i>${esc(categoryLabel(k))}</button>`;
}).join('');
wrap.querySelectorAll('.pv2-cat-chip').forEach(btn => {
@@ -176,15 +176,15 @@ function chipHtml(id, pantry) {
const u = unitLabel(def.pantryUnit);
if (qty > 0) {
return `<button type="button" class="pv2-chip inline-flex flex-col items-start px-3 py-2 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id="${esc(id)}">
<span class="text-[12px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
<span class="text-[10px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
return `<button type="button" class="pv2-chip inline-flex flex-col items-start px-3.5 py-2.5 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id="${esc(id)}">
<span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
<span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
</button>`;
}
return `<button type="button" class="pv2-chip inline-flex items-center px-3 py-2 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id="${esc(id)}">
<span class="text-[12px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
<i class="fas fa-plus text-[7px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
return `<button type="button" class="pv2-chip inline-flex items-center px-3.5 py-2.5 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id="${esc(id)}">
<span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
<i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
</button>`;
}
@@ -230,11 +230,11 @@ function renderBoard() {
for (const { cat, ids } of groups) {
const icon = CATEGORY_ICONS[cat] || 'fa-jar';
html += `
<div class="mb-3 last:mb-0">
<p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 px-0.5">
<i class="fas ${icon} text-[9px] mr-1"></i>${esc(categoryLabel(cat))}
<div class="mb-4 last:mb-0">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-0.5">
<i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
</p>
<div class="flex flex-wrap gap-1.5">${ids.map(id => chipHtml(id, pantry)).join('')}</div>
<div class="flex flex-wrap gap-2">${ids.map(id => chipHtml(id, pantry)).join('')}</div>
</div>`;
}