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

Adjust filter button
All checks were successful
Build and Deploy / build-and-push (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Rafał
2026-05-07 19:36:30 +02:00
parent 6d6194df37
commit 6f902098a8
4 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/views/Pantry.js
View File

@@ -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();
}
});