Adjust filter button

2026-05-07 19:36:30 +02:00
parent 6d6194df37
commit 6f902098a8
4 changed files with 58 additions and 8 deletions
--- a/index.html
+++ b/index.html
@@ -683,6 +683,7 @@
            width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
        }
+        html.is-inline-search-open #recipe-filter-float-controls,
        html.is-inline-search-open #pantry-top-controls,
        html.is-inline-search-open #shopping-top-controls {
            opacity: 0;
@@ -1280,7 +1281,7 @@
    </div>

    <script>
-        const APP_ASSET_VERSION = '20260507-hide-calendar-pill-on-search';
+        const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
        const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
        const APP_VERSION_QUERY_KEY = 'appv';

--- a/js/views/Filter.js
+++ b/js/views/Filter.js
@@ -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');
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -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();
            }
        });
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -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');