Adjust filter button
All checks were successful
Build and Deploy / build-and-push (push) Successful in 31s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 31s
This commit is contained in:
@@ -21,8 +21,8 @@ const PREP_TIME_STEP = 5;
|
||||
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
|
||||
const FILTER_CONTEXTS = {
|
||||
recipes: {
|
||||
anchorShellId: 'recipe-bottom-controls',
|
||||
buttonId: 'recipe-filter-btn',
|
||||
anchorShellId: 'recipe-filter-float-btn',
|
||||
buttonId: 'recipe-filter-float-btn',
|
||||
getState: () => getFilterState(),
|
||||
applyState: (nextState) => applyFilters(nextState),
|
||||
showSlots: true,
|
||||
@@ -408,7 +408,7 @@ function syncPanelCount() {
|
||||
|
||||
if (button) {
|
||||
const highlight = isFilterPanelOpen() || count > 0;
|
||||
const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
|
||||
const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
|
||||
if (isRecipeGlassButton) {
|
||||
button.style.removeProperty('background');
|
||||
button.style.removeProperty('border-color');
|
||||
|
||||
@@ -195,7 +195,7 @@ export function getPantryHTML() {
|
||||
|
||||
<!-- ── floating horizon pill above bottom nav ── -->
|
||||
<div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:var(--catalog-menu-left, 1rem); width:calc(var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width) - 0.5rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-horizon-compact" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3">
|
||||
<span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
||||
<i id="pantry-horizon-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
@@ -204,8 +204,15 @@ export function getPantryHTML() {
|
||||
id: 'pantry-calendar-popover',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
|
||||
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
|
||||
popoverStyle: 'left:0; right:auto; width:var(--recipe-dock-width, calc(100% - 2rem)); opacity:0; transform:translateY(-6px) scale(0.98);',
|
||||
})}
|
||||
</div>
|
||||
<div id="pantry-filter-pill-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-filter-pill-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="pantry-filter-pill-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── scrollable content ── -->
|
||||
@@ -214,7 +221,7 @@ export function getPantryHTML() {
|
||||
</div>
|
||||
|
||||
<!-- ── floating bottom controls (search + filter) ── -->
|
||||
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.75rem); opacity:0;">
|
||||
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 1.15rem); opacity:0;">
|
||||
<div class="flex items-center justify-between gap-3 px-0.5 pb-2">
|
||||
<p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
|
||||
<button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
|
||||
@@ -256,6 +263,7 @@ function syncHorizonUI() {
|
||||
const popover = document.getElementById('pantry-calendar-popover');
|
||||
const filterPopover = document.getElementById('pantry-filter-popover');
|
||||
const filterCount = document.getElementById('pantry-filter-count');
|
||||
const filterPillCount = document.getElementById('pantry-filter-pill-count');
|
||||
const searchWrap = document.getElementById('pantry-search-wrap');
|
||||
const searchShell = document.getElementById('pantry-search-shell');
|
||||
const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
|
||||
@@ -269,7 +277,6 @@ function syncHorizonUI() {
|
||||
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
|
||||
|
||||
const activeFilterCount = getActivePantryFilterCount();
|
||||
isFilterOpen = false;
|
||||
|
||||
syncCalendarPopoverVisibility({
|
||||
popup: popover,
|
||||
@@ -295,6 +302,11 @@ function syncHorizonUI() {
|
||||
filterCount.classList.toggle('hidden', true);
|
||||
filterCount.classList.toggle('flex', false);
|
||||
}
|
||||
if (filterPillCount) {
|
||||
filterPillCount.textContent = String(activeFilterCount);
|
||||
filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
|
||||
filterPillCount.classList.toggle('flex', activeFilterCount > 0);
|
||||
}
|
||||
if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
|
||||
if (searchShell) {
|
||||
searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
|
||||
@@ -403,6 +415,10 @@ function clearSearchInput() {
|
||||
function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
||||
const hadQuery = Boolean(pantrySearchQuery);
|
||||
pantrySearchOpen = open;
|
||||
if (open) {
|
||||
isCalendarOpen = false;
|
||||
isFilterOpen = false;
|
||||
}
|
||||
document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
|
||||
if (clearQuery) pantrySearchQuery = '';
|
||||
const input = document.getElementById('pantry-search-input');
|
||||
@@ -722,6 +738,12 @@ export function setupPantry() {
|
||||
setPantrySearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (pantrySearchOpen) return;
|
||||
closeCalendar();
|
||||
toggleFilterPanel();
|
||||
});
|
||||
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
pantryFilters = { categories: [], sections: [] };
|
||||
@@ -773,7 +795,7 @@ export function setupPantry() {
|
||||
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
|
||||
closeCalendar();
|
||||
}
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) {
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
|
||||
closeFilter();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -43,6 +43,12 @@ function getFilteredRecipes() {
|
||||
return Object.values(RECIPES).filter(matchesFilters);
|
||||
}
|
||||
|
||||
function getActiveRecipeFilterCount() {
|
||||
let count = filterState.slots.length + filterState.tags.length;
|
||||
if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
|
||||
return count;
|
||||
}
|
||||
|
||||
function syncRecipeScrollShadow() {
|
||||
syncRecipeTopbarUI();
|
||||
}
|
||||
@@ -54,6 +60,7 @@ function syncRecipeTopbarUI() {
|
||||
const rightBtn = document.getElementById('recipe-filter-btn');
|
||||
const rightIcon = document.getElementById('recipe-right-btn-icon');
|
||||
const filterCount = document.getElementById('recipe-filter-count');
|
||||
const floatingFilterCount = document.getElementById('recipe-filter-float-count');
|
||||
const dot = document.getElementById('recipe-search-active-dot');
|
||||
const isOpen = recipeSearchOpen;
|
||||
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
|
||||
@@ -76,6 +83,12 @@ function syncRecipeTopbarUI() {
|
||||
filterCount.classList.toggle('hidden', !showCount);
|
||||
filterCount.classList.toggle('flex', showCount);
|
||||
}
|
||||
if (floatingFilterCount) {
|
||||
const activeCount = getActiveRecipeFilterCount();
|
||||
floatingFilterCount.textContent = String(activeCount);
|
||||
floatingFilterCount.classList.toggle('hidden', activeCount === 0);
|
||||
floatingFilterCount.classList.toggle('flex', activeCount > 0);
|
||||
}
|
||||
if (dot) {
|
||||
const hasQuery = Boolean(filterState.query);
|
||||
dot.classList.toggle('hidden', !hasQuery);
|
||||
@@ -85,6 +98,7 @@ function syncRecipeTopbarUI() {
|
||||
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
||||
const hadQuery = Boolean(filterState.query);
|
||||
recipeSearchOpen = open;
|
||||
if (open) window.closeFilters?.();
|
||||
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
|
||||
if (clearQuery) {
|
||||
filterState.query = '';
|
||||
@@ -153,6 +167,14 @@ export function getRecipeListHTML() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recipe-filter-float-controls" class="pointer-events-none absolute inset-x-0 z-[33] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="recipe-filter-float-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="recipe-filter-float-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="recipe-filter-float-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -196,6 +218,11 @@ export function setupRecipeList() {
|
||||
setSearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (recipeSearchOpen) return;
|
||||
window.openFilters?.('recipes');
|
||||
});
|
||||
|
||||
document.getElementById('recipe-grid')?.addEventListener('click', (e) => {
|
||||
const card = e.target.closest('.recipe-browser-card');
|
||||
|
||||
Reference in New Issue
Block a user