me0nline/Fridger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): redesign filter overlay with 4-grid pack states and full readable category cards
Build and Push Fridger Container / Build & Push Fridger Image (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
me0nline
2026-10-11 00:04:54 +02:00
parent 7f9d58c3fd
commit 1244c2091a
2 changed files with 60 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+16 -20
View File
@@ -254,17 +254,15 @@ function renderCategoryFilterCards() {
<button <button
onclick="setCategoryFilter('All')" onclick="setCategoryFilter('All')"
data-filter-cat="All" data-filter-cat="All"
class="filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700" class="filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
> >
<div class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0"> <div class="flex items-center gap-3 min-w-0">
<i data-lucide="layout-grid" class="w-4 h-4"></i> <div class="w-9 h-9 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0">
</div> <i data-lucide="layout-grid" class="w-4 h-4 sm:w-5 sm:h-5"></i>
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between gap-1">
<h4 class="text-xs font-bold text-white truncate">All Categories</h4>
<span id="cat-count-all" class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
</div> </div>
<span class="text-xs sm:text-sm font-bold text-white">All Categories</span>
</div> </div>
<span id="cat-count-all" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0">0</span>
</button> </button>
`; `;
@@ -273,17 +271,15 @@ function renderCategoryFilterCards() {
<button <button
onclick="setCategoryFilter('${escapeHtml(cat.id)}')" onclick="setCategoryFilter('${escapeHtml(cat.id)}')"
data-filter-cat="${escapeHtml(cat.id)}" data-filter-cat="${escapeHtml(cat.id)}"
class="filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700" class="filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
> >
<div class="w-8 h-8 rounded-xl bg-slate-800 text-teal-400 flex items-center justify-center shrink-0"> <div class="flex items-center gap-3 min-w-0">
<i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4"></i> <div class="w-9 h-9 rounded-xl bg-slate-800 text-teal-400 flex items-center justify-center shrink-0 border border-slate-700/60">
</div> <i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4 sm:w-5 sm:h-5"></i>
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between gap-1">
<h4 class="text-xs font-bold text-white truncate">${escapeHtml(cat.name)}</h4>
<span id="cat-count-${escapeHtml(cat.id.replace(/[^a-zA-Z0-9]/g, ''))}" class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
</div> </div>
<span class="text-xs sm:text-sm font-bold text-white leading-tight">${escapeHtml(cat.name)}</span>
</div> </div>
<span id="cat-count-${escapeHtml(cat.id.replace(/[^a-zA-Z0-9]/g, ''))}" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0">0</span>
</button> </button>
`; `;
}); });
@@ -316,9 +312,9 @@ function updateFilterUIState() {
const status = card.getAttribute('data-filter-status'); const status = card.getAttribute('data-filter-status');
const isSelected = state.filters.status === status; const isSelected = state.filters.status === status;
if (isSelected) { if (isSelected) {
card.className = 'filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border-2 text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30'; card.className = 'filter-status-card p-3.5 rounded-2xl border-2 text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30';
} else { } else {
card.className = 'filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700'; card.className = 'filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
} }
}); });
@@ -341,9 +337,9 @@ function updateFilterUIState() {
const cat = card.getAttribute('data-filter-cat'); const cat = card.getAttribute('data-filter-cat');
const isSelected = state.filters.category === cat; const isSelected = state.filters.category === cat;
if (isSelected) { if (isSelected) {
card.className = 'filter-cat-card p-3 rounded-2xl border-2 text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30'; card.className = 'filter-cat-card p-3.5 rounded-2xl border-2 text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30';
} else { } else {
card.className = 'filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700'; card.className = 'filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
} }
}); });
public/index.html
+44 -43
View File
@@ -183,47 +183,48 @@
<!-- ======================================================== --> <!-- ======================================================== -->
<!-- FILTER OVERLAY MODAL --> <!-- FILTER OVERLAY MODAL -->
<!-- ======================================================== --> <!-- ======================================================== -->
<div id="filter-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-3 sm:p-4 overflow-y-auto"> <div id="filter-modal" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md hidden flex items-center justify-center p-3 sm:p-5 overflow-y-auto">
<div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-5 sm:p-6 shadow-2xl space-y-5 my-8 animate-scale-up"> <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-2xl w-full p-5 sm:p-7 shadow-2xl space-y-6 my-auto animate-scale-up">
<!-- Top Title Bar --> <!-- Top Title Bar -->
<div class="flex items-start justify-between"> <div class="flex items-center justify-between pb-1 border-b border-slate-800/80">
<div> <div>
<h3 class="text-base sm:text-lg font-extrabold text-white">Filter Stock</h3> <h3 class="text-lg sm:text-xl font-black text-white">Filter Stock</h3>
<p class="text-xs text-slate-400">Scroll and select pack conditions and categories</p> <p class="text-xs text-slate-400 mt-0.5">Filter inventory by condition or category</p>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
onclick="resetAllFilters()" onclick="resetAllFilters()"
class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition active:scale-95 touch-manipulation" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-bold transition active:scale-95 touch-manipulation border border-slate-700/60"
> >
Reset Reset
</button> </button>
<button onclick="closeFilterOverlay()" class="text-slate-400 hover:text-white p-2 rounded-xl bg-slate-800/60 touch-manipulation"> <button onclick="closeFilterOverlay()" class="text-slate-400 hover:text-white p-2 rounded-xl bg-slate-800/80 touch-manipulation hover:bg-slate-700 transition">
<i data-lucide="x" class="w-5 h-5"></i> <i data-lucide="x" class="w-5 h-5"></i>
</button> </button>
</div> </div>
</div> </div>
<!-- Section 1: Pack States (Scrollable horizontal cards) --> <!-- Section 1: Pack States (Spacious 4-Grid, completely visible) -->
<div class="space-y-2"> <div class="space-y-2.5">
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Pack State & Condition</label> <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">1. Pack State & Condition</label>
<div class="flex items-stretch gap-2.5 overflow-x-auto pb-1.5 scrollbar-none">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
<!-- All Pack States --> <!-- All Pack States -->
<button <button
onclick="setStatusFilter('all')" onclick="setStatusFilter('all')"
data-filter-status="all" data-filter-status="all"
class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/10" class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="w-7 h-7 rounded-lg bg-teal-500/20 text-teal-300 flex items-center justify-center"> <span class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center">
<i data-lucide="layers" class="w-3.5 h-3.5"></i> <i data-lucide="layers" class="w-4 h-4"></i>
</span> </span>
<span id="filter-count-all" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-300">0</span> <span id="filter-count-all" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-200">0</span>
</div> </div>
<div> <div>
<h4 class="text-xs sm:text-sm font-extrabold text-white">All Stock</h4> <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">All Stock</h4>
<p class="text-[10px] text-slate-400">Everything</p> <p class="text-[11px] text-slate-400 mt-0.5">Everything</p>
</div> </div>
</button> </button>
@@ -231,17 +232,17 @@
<button <button
onclick="setStatusFilter('full')" onclick="setStatusFilter('full')"
data-filter-status="full" data-filter-status="full"
class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700" class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="w-7 h-7 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center"> <span class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
<i data-lucide="package-check" class="w-3.5 h-3.5"></i> <i data-lucide="package-check" class="w-4 h-4"></i>
</span> </span>
<span id="filter-count-full" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-emerald-300">0</span> <span id="filter-count-full" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-emerald-300">0</span>
</div> </div>
<div> <div>
<h4 class="text-xs sm:text-sm font-extrabold text-white">Full Packs</h4> <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Full Packs</h4>
<p class="text-[10px] text-slate-400">Unopened</p> <p class="text-[11px] text-slate-400 mt-0.5">Unopened</p>
</div> </div>
</button> </button>
@@ -249,17 +250,17 @@
<button <button
onclick="setStatusFilter('opened')" onclick="setStatusFilter('opened')"
data-filter-status="opened" data-filter-status="opened"
class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700" class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="w-7 h-7 rounded-lg bg-indigo-500/20 text-indigo-400 flex items-center justify-center"> <span class="w-8 h-8 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center">
<i data-lucide="package-open" class="w-3.5 h-3.5"></i> <i data-lucide="package-open" class="w-4 h-4"></i>
</span> </span>
<span id="filter-count-opened" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-indigo-300">0</span> <span id="filter-count-opened" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-indigo-300">0</span>
</div> </div>
<div> <div>
<h4 class="text-xs sm:text-sm font-extrabold text-white">Opened</h4> <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Opened</h4>
<p class="text-[10px] text-slate-400">In-use & partial</p> <p class="text-[11px] text-slate-400 mt-0.5">In-Use / Partial</p>
</div> </div>
</button> </button>
@@ -267,37 +268,37 @@
<button <button
onclick="setStatusFilter('low')" onclick="setStatusFilter('low')"
data-filter-status="low" data-filter-status="low"
class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700" class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="w-7 h-7 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center"> <span class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
<i data-lucide="alert-circle" class="w-3.5 h-3.5"></i> <i data-lucide="alert-circle" class="w-4 h-4"></i>
</span> </span>
<span id="filter-count-low" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-amber-300">0</span> <span id="filter-count-low" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-amber-300">0</span>
</div> </div>
<div> <div>
<h4 class="text-xs sm:text-sm font-extrabold text-white">Low Stock</h4> <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Low Stock</h4>
<p class="text-[10px] text-slate-400">&le;25% left</p> <p class="text-[11px] text-slate-400 mt-0.5">&le;25% left</p>
</div> </div>
</button> </button>
</div> </div>
</div> </div>
<!-- Section 2: Categories (Scrollable touch grid) --> <!-- Section 2: Categories (2-Column touch grid with full unabbreviated names) -->
<div class="space-y-2"> <div class="space-y-2.5">
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Category</label> <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">2. Category</label>
<div id="filter-categories-container" class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-[260px] overflow-y-auto p-1 scrollbar-none"> <div id="filter-categories-container" class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 max-h-[300px] overflow-y-auto p-1 pr-1.5 scrollbar-thin">
<!-- Populated dynamically --> <!-- Populated dynamically with full unabbreviated names -->
</div> </div>
</div> </div>
<!-- Action: Done button --> <!-- Action: Big Prominent Done button -->
<div class="pt-2 border-t border-slate-800"> <div class="pt-2 border-t border-slate-800">
<button <button
onclick="closeFilterOverlay()" onclick="closeFilterOverlay()"
class="w-full py-3.5 rounded-2xl bg-teal-500 hover:bg-teal-400 text-white font-extrabold text-sm sm:text-base shadow-xl shadow-teal-500/25 active:scale-95 transition-all touch-manipulation flex items-center justify-center gap-2" class="w-full py-4 rounded-2xl bg-teal-500 hover:bg-teal-400 text-white font-black text-base sm:text-lg shadow-xl shadow-teal-500/25 active:scale-95 transition-all touch-manipulation flex items-center justify-center gap-2"
> >
<i data-lucide="check" class="w-5 h-5"></i> <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6"></i>
<span>Show Matching Stock (<span id="filter-total-count">0</span> items)</span> <span>Show Matching Stock (<span id="filter-total-count">0</span> items)</span>
</button> </button>
</div> </div>