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

Apply liquid glass to pantry view
All checks were successful
Build and Deploy / build-and-push (push) Successful in 30s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 19:49:29 +02:00
parent 120959365e
commit b9538a35b6
5 changed files with 251 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
js/views/Pantry.js
View File

@@ -16,6 +16,7 @@ import {
syncCalendarPopoverVisibility,
} from '../ui/calendarPopover.js';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
/* ── helpers ── */
@@ -50,16 +51,6 @@ function getActivePantryFilterCount() {
return pantryFilters.categories.length + pantryFilters.sections.length;
}
function filterChipStyle(active) {
const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
const shadow = active
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
: '';
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
}
const CATEGORY_ICONS = {
pieczywo: 'fa-bread-slice',
nabial: 'fa-cheese',
@@ -101,7 +92,6 @@ const PANTRY_CALENDAR_THEME = {
let ingredientCard = null;
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
let isSearchExpanded = false;
let isCalendarOpen = false;
let isFilterOpen = false;
let calendarMonthAnchor = startOfMonth(horizonEndDate);
@@ -170,54 +160,23 @@ export function getPantryHTML() {
return `
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
<!-- ── floating top bar ── -->
<!-- ── floating top bar (calendar only) ── -->
<div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
<div class="pointer-events-auto relative z-[1] w-full">
<div id="pantry-topbar" class="relative min-h-12">
<div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
<div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2">
<div id="pantry-horizon-wrap" class="relative shrink">
<button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
<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-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
</button>
</div>
<div id="pantry-filter-wrap" class="relative shrink-0">
<button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
<i class="fas fa-sliders-h text-[12px]"></i>
<span id="pantry-filter-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:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
</button>
<div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
<div class="flex items-center justify-between gap-3 px-0.5 pb-3">
<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));">
Wyczyść
</button>
</div>
<div id="pantry-filter-panel-body" class="space-y-4"></div>
</div>
</div>
<button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
<i class="fas fa-search text-[13px]"></i>
</button>
</div>
${createCalendarPopoverHTML({
id: 'pantry-calendar-popover',
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
})}
<div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
<button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>
</div>
</div>
</div>
@@ -226,6 +185,35 @@ export function getPantryHTML() {
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
<div id="pantry-board"></div>
</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-control-size, 3.05rem) + 0.75rem); 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));">
Wyczyść
</button>
</div>
<div id="pantry-filter-panel-body" class="space-y-4"></div>
</div>
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
<input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
<button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>
<div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
<button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action 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-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>
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
}
@@ -235,11 +223,8 @@ export function getPantryHTML() {
function syncHorizonUI() {
ensureValidHorizonDate();
const defaultRow = document.getElementById('pantry-default-row');
const searchShell = document.getElementById('pantry-search-shell');
const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover');
const filterToggle = document.getElementById('pantry-filter-toggle');
const filterCount = document.getElementById('pantry-filter-count');
const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact');
@@ -247,35 +232,22 @@ function syncHorizonUI() {
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
const showCalendar = isCalendarOpen && !isSearchExpanded;
const showDefault = !isSearchExpanded;
const showFilter = isFilterOpen && showDefault;
const activeFilterCount = getActivePantryFilterCount();
if (defaultRow) {
defaultRow.style.opacity = showDefault ? '1' : '0';
defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
}
syncCalendarPopoverVisibility({
popup: popover,
isOpen: showCalendar,
isOpen: isCalendarOpen,
chevron,
trigger: compactPill,
triggerImportant: true,
});
if (filterPopover) {
filterPopover.style.opacity = showFilter ? '1' : '0';
filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
}
if (filterToggle) {
const isActive = showFilter || hasActivePantryFilters();
filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
filterPopover.style.opacity = isFilterOpen ? '1' : '0';
filterPopover.style.transform = isFilterOpen
? 'translateX(-50%) translateY(0) scale(1)'
: 'translateX(-50%) translateY(0.5rem) scale(0.98)';
filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
}
if (filterCount) {
filterCount.textContent = String(activeFilterCount);
@@ -283,12 +255,6 @@ function syncHorizonUI() {
filterCount.classList.toggle('flex', activeFilterCount > 0);
}
if (searchShell) {
searchShell.style.opacity = isSearchExpanded ? '1' : '0';
searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
}
renderCalendarPopover();
renderFilterPopover();
}
@@ -377,28 +343,16 @@ function renderFilterPopover() {
`;
}
function closeSearch() {
const input = document.getElementById('pantry-search');
function clearSearchInput() {
const input = document.getElementById('pantry-search-input');
const hadQuery = Boolean(input?.value);
if (input) {
input.value = '';
input.blur();
}
isSearchExpanded = false;
syncHorizonUI();
if (hadQuery) renderBoard();
}
function openSearch() {
isSearchExpanded = true;
isCalendarOpen = false;
isFilterOpen = false;
syncHorizonUI();
window.requestAnimationFrame(() => {
document.getElementById('pantry-search')?.focus();
});
}
function closeCalendar() {
if (!isCalendarOpen) return;
isCalendarOpen = false;
@@ -409,7 +363,6 @@ function closeCalendar() {
function openCalendar() {
ensureValidHorizonDate();
calendarMonthAnchor = startOfMonth(horizonEndDate);
isSearchExpanded = false;
isFilterOpen = false;
isCalendarOpen = true;
syncHorizonUI();
@@ -427,8 +380,8 @@ function closeFilter() {
function toggleFilterPanel() {
isCalendarOpen = false;
isSearchExpanded = false;
isFilterOpen = !isFilterOpen;
document.getElementById('pantry-search-input')?.blur();
syncHorizonUI();
}
@@ -592,7 +545,7 @@ function renderBoard() {
const root = document.getElementById('pantry-board');
if (!root) return;
const q = document.getElementById('pantry-search')?.value || '';
const q = document.getElementById('pantry-search-input')?.value || '';
const hasFilters = hasActivePantryFilters();
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
@@ -671,6 +624,8 @@ export function refreshPantry() {
}
export function setupPantry() {
ensureFilterPopoverStyles();
if (!ingredientCard) {
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
ingredientCard.bind();
@@ -692,13 +647,17 @@ export function setupPantry() {
}
// Search
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
if (event.key === 'Escape') closeSearch();
document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (event.target.value) clearSearchInput();
else event.target.blur();
});
document.getElementById('pantry-search-close')?.addEventListener('click', () => clearSearchInput());
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
toggleFilterPanel();
});
document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
event.stopPropagation();
pantryFilters = { categories: [], sections: [] };
@@ -750,10 +709,25 @@ export function setupPantry() {
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
closeCalendar();
}
if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) {
closeFilter();
}
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (isFilterOpen) closeFilter();
});
window.addEventListener('app-tab-change', () => {
document.getElementById('pantry-search-input')?.blur();
closeFilter();
closeCalendar();
});
window.closePantrySearch = () => {
document.getElementById('pantry-search-input')?.blur();
};
window.closePantryFilter = () => {
closeFilter();
};
}
window.refreshPantry = refreshPantry;