Redesign filter view
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import { RECIPES } from '../data/catalog.js?v=2';
|
||||
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
||||
import { applyFilters, getFilterState, getFilteredCount, refreshRecipeList } from './RecipeList.js';
|
||||
import { applyFilters, getFilterState } from './RecipeList.js';
|
||||
|
||||
const FILTER_SHEET_TRANSITION = 'transform 300ms cubic-bezier(0.32,0.72,0,1)';
|
||||
const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
|
||||
const FILTER_SURFACE = '#2d2e2b';
|
||||
const FILTER_SURFACE_SOFT = '#2f2f2d';
|
||||
const FILTER_BORDER = '#444442';
|
||||
@@ -13,12 +13,13 @@ const FILTER_TEXT_SECONDARY = '#d7d2c8';
|
||||
const FILTER_TEXT_MUTED = '#9b978f';
|
||||
const FILTER_TEXT_DIM = '#7d7a74';
|
||||
const FILTER_TEXT_ACTIVE = '#f2efe8';
|
||||
const FILTER_TRACK = '#444442';
|
||||
const FILTER_TRACK_FILL = '#9b978f';
|
||||
const FILTER_TRACK = '#393937';
|
||||
const FILTER_TRACK_FILL = '#56534f';
|
||||
const PREP_TIME_MIN = 5;
|
||||
const PREP_TIME_MAX = 120;
|
||||
const PREP_TIME_STEP = 5;
|
||||
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
|
||||
const FILTER_RECIPE_BLUR = 'blur(3px) saturate(0.94)';
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
@@ -53,31 +54,23 @@ export function getFilterHTML() {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 9999px;
|
||||
border: 2px solid ${FILTER_SURFACE};
|
||||
background: ${FILTER_TEXT_ACTIVE};
|
||||
box-shadow: 0 0 0 1px ${FILTER_BORDER_ACTIVE};
|
||||
border: 1px solid rgba(242,239,232,0.16);
|
||||
background: ${FILTER_TRACK_FILL};
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<div id="filter-view" class="absolute inset-0 z-[55] hidden items-end opacity-0 transition-opacity duration-200" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
|
||||
<div id="filter-sheet" class="relative w-full flex flex-col overflow-hidden rounded-t-3xl" style="background:${FILTER_SURFACE} !important; background-image:none !important; max-height:calc(100dvh - 4.5rem); transform:translateY(100%); transition:${FILTER_SHEET_TRANSITION}; box-shadow:0 -26px 46px rgba(0,0,0,0.28), 0 -6px 16px rgba(0,0,0,0.22);">
|
||||
<div id="filter-view" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
|
||||
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.5rem] border" style="background:${FILTER_SURFACE} !important; background-image:none !important; border-color:${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:0 18px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.18); width:min(calc(100% - 1.5rem), 22rem);">
|
||||
<div class="pointer-events-none absolute inset-x-0 top-0 h-px" style="background:rgba(242,239,232,0.12);" aria-hidden="true"></div>
|
||||
<div class="shrink-0 px-4 pt-3 pb-3 border-b" style="background:${FILTER_SURFACE} !important; background-image:none !important; border-color:${FILTER_BORDER} !important;">
|
||||
<div class="w-10 h-1 rounded-full mx-auto mb-3" style="background:rgba(109,108,103,0.75);" aria-hidden="true"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="filter-close-btn" type="button" class="shrink-0 w-9 h-9 rounded-full border flex items-center justify-center transition-colors" style="background:${FILTER_SURFACE_SOFT} !important; border-color:${FILTER_BORDER} !important; color:${FILTER_TEXT_SECONDARY} !important;" aria-label="Zamknij filtry">
|
||||
<i class="fas fa-arrow-left text-[12px]"></i>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1 pr-2">
|
||||
<h2 class="text-[15px] font-bold leading-tight" style="color:${FILTER_TEXT_PRIMARY};">Filtry</h2>
|
||||
<p class="text-[11px] mt-1" style="color:${FILTER_TEXT_MUTED};">Dopasuj listę przepisów do swoich potrzeb.</p>
|
||||
</div>
|
||||
<div class="shrink-0 px-3.5 pt-3 pb-2 flex justify-end" style="background:${FILTER_SURFACE} !important; background-image:none !important;">
|
||||
<div class="min-w-0 flex items-center justify-end gap-2">
|
||||
<button id="filter-clear-btn" type="button" class="shrink-0 h-8 px-3 rounded-full border text-[11px] font-semibold transition-colors" style="background:${FILTER_SURFACE_SOFT} !important; border-color:${FILTER_BORDER} !important; color:${FILTER_TEXT_SECONDARY} !important;">Wyczyść</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 py-4 space-y-4" style="background:${FILTER_SURFACE} !important; background-image:none !important;">
|
||||
<div id="filter-panel-body" class="min-h-0 flex-1 overflow-y-auto no-scrollbar px-4 pb-4 space-y-2.5" style="background:${FILTER_SURFACE} !important; background-image:none !important;">
|
||||
<section class="p-3.5" style="background:${FILTER_SURFACE} !important; background-image:none !important;">
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider mb-3" style="color:${FILTER_TEXT_MUTED};">Pora posiłku</p>
|
||||
<div id="filter-slot-chips" class="flex flex-wrap gap-2"></div>
|
||||
@@ -129,13 +122,6 @@ export function getFilterHTML() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 px-4 pt-2 pb-4" style="background:${FILTER_SURFACE} !important; background-image:none !important; padding-bottom:calc(1rem + env(safe-area-inset-bottom));">
|
||||
<button id="filter-apply-btn" type="button" class="w-full py-3 rounded-xl border font-semibold text-[13px] transition-colors flex items-center justify-center gap-2" style="background:${FILTER_SURFACE} !important; background-image:none !important; box-shadow:none !important; border-color:${FILTER_BORDER} !important; color:${FILTER_TEXT_ACTIVE} !important;">
|
||||
<i class="fas fa-check text-[11px]" style="color:${FILTER_TEXT_MUTED};" aria-hidden="true"></i>
|
||||
<span id="filter-apply-label">Pokaż wyniki</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -226,37 +212,82 @@ function syncTimeRangeUI() {
|
||||
}
|
||||
}
|
||||
|
||||
function showFilterSheet() {
|
||||
function positionFilterPanel() {
|
||||
const view = document.getElementById('filter-view');
|
||||
const sheet = document.getElementById('filter-sheet');
|
||||
if (!view || !sheet) return;
|
||||
const panel = document.getElementById('filter-panel');
|
||||
const body = document.getElementById('filter-panel-body');
|
||||
const searchShell = document.getElementById('recipe-search-shell');
|
||||
const button = document.getElementById('recipe-filter-btn');
|
||||
if (!view || !panel || !button) return;
|
||||
|
||||
const viewRect = view.getBoundingClientRect();
|
||||
const anchorRect = (searchShell || button).getBoundingClientRect();
|
||||
const gap = 8;
|
||||
const margin = 12;
|
||||
const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
|
||||
const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
|
||||
const left = Math.max(
|
||||
margin,
|
||||
Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
|
||||
);
|
||||
const maxHeight = Math.max(220, viewRect.height - top - margin);
|
||||
|
||||
panel.style.width = `${width}px`;
|
||||
panel.style.left = `${left}px`;
|
||||
panel.style.top = `${top}px`;
|
||||
panel.style.maxHeight = `${maxHeight}px`;
|
||||
if (body) body.style.maxHeight = `${maxHeight - 56}px`;
|
||||
}
|
||||
|
||||
function setRecipeAreaBlur(visible) {
|
||||
const recipeScroll = document.getElementById('recipe-scroll');
|
||||
if (!recipeScroll) return;
|
||||
|
||||
recipeScroll.style.transition = 'filter 180ms ease, opacity 180ms ease';
|
||||
recipeScroll.style.willChange = 'filter, opacity';
|
||||
recipeScroll.style.filter = visible ? FILTER_RECIPE_BLUR : 'none';
|
||||
recipeScroll.style.opacity = visible ? '0.78' : '1';
|
||||
}
|
||||
|
||||
function showFilterPanel() {
|
||||
const view = document.getElementById('filter-view');
|
||||
const panel = document.getElementById('filter-panel');
|
||||
if (!view || !panel) return;
|
||||
|
||||
clearTimeout(closeTimer);
|
||||
view.classList.remove('hidden');
|
||||
view.classList.add('flex', 'filter-open');
|
||||
view.classList.add('filter-open');
|
||||
view.style.pointerEvents = 'auto';
|
||||
view.setAttribute('aria-hidden', 'false');
|
||||
positionFilterPanel();
|
||||
setRecipeAreaBlur(true);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
view.classList.add('opacity-100');
|
||||
sheet.style.transform = 'translateY(0)';
|
||||
panel.style.opacity = '1';
|
||||
panel.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
}
|
||||
|
||||
function hideFilterSheet() {
|
||||
function hideFilterPanel() {
|
||||
const view = document.getElementById('filter-view');
|
||||
const sheet = document.getElementById('filter-sheet');
|
||||
if (!view || !sheet) return;
|
||||
const panel = document.getElementById('filter-panel');
|
||||
if (!view || !panel) return;
|
||||
|
||||
view.classList.remove('opacity-100', 'filter-open');
|
||||
view.style.pointerEvents = 'none';
|
||||
view.setAttribute('aria-hidden', 'true');
|
||||
sheet.style.transform = 'translateY(100%)';
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
|
||||
setRecipeAreaBlur(false);
|
||||
|
||||
closeTimer = setTimeout(() => {
|
||||
view.classList.add('hidden');
|
||||
view.classList.remove('flex');
|
||||
}, 300);
|
||||
}, 180);
|
||||
}
|
||||
|
||||
function isFilterPanelOpen() {
|
||||
return document.getElementById('filter-view')?.classList.contains('filter-open');
|
||||
}
|
||||
|
||||
function renderSlotChips() {
|
||||
@@ -275,7 +306,7 @@ function renderSlotChips() {
|
||||
if (idx >= 0) localSlots.splice(idx, 1);
|
||||
else localSlots.push(id);
|
||||
renderSlotChips();
|
||||
updateResultCount();
|
||||
syncLiveFilters();
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -297,21 +328,18 @@ function renderTagChips() {
|
||||
if (idx >= 0) localTags.splice(idx, 1);
|
||||
else localTags.push(tag);
|
||||
renderTagChips();
|
||||
updateResultCount();
|
||||
syncLiveFilters();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateResultCount() {
|
||||
function syncLiveFilters() {
|
||||
applyFilters({
|
||||
slots: localSlots,
|
||||
tags: localTags,
|
||||
minMinutes: localMinMinutes,
|
||||
maxMinutes: localMaxMinutes,
|
||||
});
|
||||
const count = getFilteredCount();
|
||||
const applyBtnLabel = document.getElementById('filter-apply-label');
|
||||
if (applyBtnLabel) applyBtnLabel.textContent = `Pokaż ${count} wyników`;
|
||||
}
|
||||
|
||||
export function setupFilter() {
|
||||
@@ -321,6 +349,8 @@ export function setupFilter() {
|
||||
const filterView = document.getElementById('filter-view');
|
||||
let activeTimeHandle = null;
|
||||
|
||||
setRecipeAreaBlur(false);
|
||||
|
||||
function valueFromPointer(clientX) {
|
||||
if (!rangeTrack) return PREP_TIME_MIN;
|
||||
const rect = rangeTrack.getBoundingClientRect();
|
||||
@@ -339,7 +369,7 @@ export function setupFilter() {
|
||||
localMaxMinutes = Math.min(localMaxMinutes, PREP_TIME_MAX);
|
||||
}
|
||||
syncTimeRangeUI();
|
||||
updateResultCount();
|
||||
syncLiveFilters();
|
||||
}
|
||||
|
||||
function stopTimeHandleDrag() {
|
||||
@@ -418,22 +448,16 @@ export function setupFilter() {
|
||||
});
|
||||
|
||||
filterView?.addEventListener('click', (e) => {
|
||||
if (e.target === filterView) window.closeFilters();
|
||||
});
|
||||
|
||||
document.getElementById('filter-close-btn')?.addEventListener('click', () => {
|
||||
if (e.composedPath().includes(document.getElementById('filter-panel'))) return;
|
||||
window.closeFilters();
|
||||
});
|
||||
|
||||
document.getElementById('filter-apply-btn')?.addEventListener('click', () => {
|
||||
applyFilters({
|
||||
slots: localSlots,
|
||||
tags: localTags,
|
||||
minMinutes: localMinMinutes,
|
||||
maxMinutes: localMaxMinutes,
|
||||
});
|
||||
refreshRecipeList();
|
||||
window.closeFilters();
|
||||
window.addEventListener('resize', () => {
|
||||
if (isFilterPanelOpen()) positionFilterPanel();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isFilterPanelOpen()) window.closeFilters();
|
||||
});
|
||||
|
||||
document.getElementById('filter-clear-btn')?.addEventListener('click', () => {
|
||||
@@ -444,16 +468,15 @@ export function setupFilter() {
|
||||
syncTimeRangeUI();
|
||||
renderSlotChips();
|
||||
renderTagChips();
|
||||
applyFilters({
|
||||
slots: [],
|
||||
tags: [],
|
||||
minMinutes: PREP_TIME_MIN,
|
||||
maxMinutes: PREP_TIME_MAX,
|
||||
});
|
||||
updateResultCount();
|
||||
syncLiveFilters();
|
||||
});
|
||||
|
||||
window.openFilters = () => {
|
||||
if (isFilterPanelOpen()) {
|
||||
window.closeFilters();
|
||||
return;
|
||||
}
|
||||
|
||||
const state = getFilterState();
|
||||
localSlots = [...state.slots];
|
||||
localTags = [...state.tags];
|
||||
@@ -468,13 +491,13 @@ export function setupFilter() {
|
||||
|
||||
renderSlotChips();
|
||||
renderTagChips();
|
||||
updateResultCount();
|
||||
syncLiveFilters();
|
||||
|
||||
showFilterSheet();
|
||||
showFilterPanel();
|
||||
};
|
||||
|
||||
window.closeFilters = () => {
|
||||
stopTimeHandleDrag();
|
||||
hideFilterSheet();
|
||||
hideFilterPanel();
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user