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
Build and Push Fridger Container / Build & Push Fridger Image (push) Successful in 1m53s
This commit is contained in:
+44
-43
@@ -183,47 +183,48 @@
|
||||
<!-- ======================================================== -->
|
||||
<!-- 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 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 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-2xl w-full p-5 sm:p-7 shadow-2xl space-y-6 my-auto animate-scale-up">
|
||||
|
||||
<!-- 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>
|
||||
<h3 class="text-base sm:text-lg font-extrabold text-white">Filter Stock</h3>
|
||||
<p class="text-xs text-slate-400">Scroll and select pack conditions and categories</p>
|
||||
<h3 class="text-lg sm:text-xl font-black text-white">Filter Stock</h3>
|
||||
<p class="text-xs text-slate-400 mt-0.5">Filter inventory by condition or category</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
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
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 1: Pack States (Scrollable horizontal cards) -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Pack State & Condition</label>
|
||||
<div class="flex items-stretch gap-2.5 overflow-x-auto pb-1.5 scrollbar-none">
|
||||
<!-- Section 1: Pack States (Spacious 4-Grid, completely visible) -->
|
||||
<div class="space-y-2.5">
|
||||
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">1. Pack State & Condition</label>
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
|
||||
<!-- All Pack States -->
|
||||
<button
|
||||
onclick="setStatusFilter('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">
|
||||
<span class="w-7 h-7 rounded-lg bg-teal-500/20 text-teal-300 flex items-center justify-center">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<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-4 h-4"></i>
|
||||
</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>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white">All Stock</h4>
|
||||
<p class="text-[10px] text-slate-400">Everything</p>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">All Stock</h4>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Everything</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -231,17 +232,17 @@
|
||||
<button
|
||||
onclick="setStatusFilter('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">
|
||||
<span class="w-7 h-7 rounded-lg 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>
|
||||
<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-4 h-4"></i>
|
||||
</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>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white">Full Packs</h4>
|
||||
<p class="text-[10px] text-slate-400">Unopened</p>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Full Packs</h4>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Unopened</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -249,17 +250,17 @@
|
||||
<button
|
||||
onclick="setStatusFilter('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">
|
||||
<span class="w-7 h-7 rounded-lg 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>
|
||||
<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-4 h-4"></i>
|
||||
</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>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white">Opened</h4>
|
||||
<p class="text-[10px] text-slate-400">In-use & partial</p>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Opened</h4>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">In-Use / Partial</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -267,37 +268,37 @@
|
||||
<button
|
||||
onclick="setStatusFilter('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">
|
||||
<span class="w-7 h-7 rounded-lg 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>
|
||||
<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-4 h-4"></i>
|
||||
</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>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white">Low Stock</h4>
|
||||
<p class="text-[10px] text-slate-400">≤25% left</p>
|
||||
<h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Low Stock</h4>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">≤25% left</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Categories (Scrollable touch grid) -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">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">
|
||||
<!-- Populated dynamically -->
|
||||
<!-- Section 2: Categories (2-Column touch grid with full unabbreviated names) -->
|
||||
<div class="space-y-2.5">
|
||||
<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-1 sm:grid-cols-2 gap-2.5 max-h-[300px] overflow-y-auto p-1 pr-1.5 scrollbar-thin">
|
||||
<!-- Populated dynamically with full unabbreviated names -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action: Done button -->
|
||||
<!-- Action: Big Prominent Done button -->
|
||||
<div class="pt-2 border-t border-slate-800">
|
||||
<button
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user