ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign filter view

Browse Source
This commit is contained in:
Rafał
2026-04-06 12:06:58 +02:00
parent 2b0601956f
commit 36f9f35b0b
5 changed files with 207 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
js/views/RecipeList.js
View File

@@ -12,6 +12,9 @@ function escapeHtml(s) {
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
const DEFAULT_MIN_MINUTES = 5;
const DEFAULT_MAX_MINUTES = 120;
const SEARCH_SHELL_BASE_SHADOW =
'inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015)';
const SEARCH_HEADER_SCROLLED_SHADOW = '0 10px 16px rgba(0,0,0,0.34)';
function slotLabelsFor(recipe) {
return (recipe.allowedSlots || [])
@@ -79,6 +82,26 @@ function renderRecipeCard(recipe) {
</div>`;
}
function syncRecipeScrollShadow() {
const scroll = document.getElementById('recipe-scroll');
const shadow = document.getElementById('recipe-top-bar-shadow');
const header = document.getElementById('recipe-top-bar');
const searchShell = document.getElementById('recipe-search-shell');
if (!shadow || !header || !searchShell) return;
if (!scroll) {
shadow.style.opacity = '0';
header.style.boxShadow = 'none';
searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
return;
}
const isScrolled = scroll.scrollTop > 6;
shadow.style.opacity = isScrolled ? '1' : '0';
header.style.boxShadow = isScrolled ? SEARCH_HEADER_SCROLLED_SHADOW : 'none';
searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
}
function renderGrid() {
const grid = document.getElementById('recipe-grid');
if (!grid) return;
@@ -93,25 +116,28 @@ function renderGrid() {
<p class="text-sm font-semibold text-gray-700">Brak wyników</p>
<p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Zmień kryteria wyszukiwania lub filtry</p>
</div>`;
requestAnimationFrame(syncRecipeScrollShadow);
return;
}
grid.innerHTML = recipes.map(renderRecipeCard).join('');
requestAnimationFrame(syncRecipeScrollShadow);
}
export function getRecipeListHTML() {
return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
<div class="px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important;">
<div id="recipe-search-shell" class="relative flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.7rem !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015) !important;">
<div id="recipe-top-bar" class="relative z-[2] px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important; transition:box-shadow 180ms ease;">
<div id="recipe-search-shell" class="relative z-[1] flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.5rem !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
<input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
<button id="recipe-filter-btn" onclick="openFilters()" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<div id="recipe-top-bar-shadow" class="pointer-events-none absolute inset-x-0 bottom-0 z-[0] h-4 translate-y-1 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.18), rgba(0,0,0,0)); filter:blur(7px);"></div>
</div>
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="recipe-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
</div>
</div>
@@ -142,4 +168,7 @@ export function setupRecipeList() {
filterState.query = e.target.value.trim();
renderGrid();
});
document.getElementById('recipe-scroll')?.addEventListener('scroll', syncRecipeScrollShadow);
syncRecipeScrollShadow();
}