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
onclick="setCategoryFilter('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">
<i data-lucide="layout-grid" class="w-4 h-4"></i>
</div>
<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 class="flex items-center gap-3 min-w-0">
<div class="w-9 h-9 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0">
<i data-lucide="layout-grid" class="w-4 h-4 sm:w-5 sm:h-5"></i>
</div>
<span class="text-xs sm:text-sm font-bold text-white">All Categories</span>
</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>
`;
@@ -273,17 +271,15 @@ function renderCategoryFilterCards() {
<button
onclick="setCategoryFilter('${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">
<i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4"></i>
</div>
<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 class="flex items-center gap-3 min-w-0">
<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">
<i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4 sm:w-5 sm:h-5"></i>
</div>
<span class="text-xs sm:text-sm font-bold text-white leading-tight">${escapeHtml(cat.name)}</span>
</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>
`;
});
@@ -316,9 +312,9 @@ function updateFilterUIState() {
const status = card.getAttribute('data-filter-status');
const isSelected = state.filters.status === status;
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 {
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 isSelected = state.filters.category === cat;
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 {
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';
}
});