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

47
js/ui/bottomNav.js
View File

@@ -2,8 +2,8 @@ export function getBottomNavHTML() {
return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div id="app-bottom-nav-dock" class="bottom-dock">
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu katalogu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
<i class="fas fa-book-open" aria-hidden="true"></i>
<button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
<i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
</button>
<div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
@@ -43,6 +43,9 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
if (!main || !planner || !pantry || !shopping || !nav) return;
const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
const COLLAPSED_TABS = new Set(['recipes', 'pantry']);
const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
let isRecipeMenuOpen = false;
let previousTab = 'planner';
let collapseTimer = null;
@@ -86,37 +89,51 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
};
const updateToggleForTab = (tab) => {
const icon = document.getElementById('recipe-nav-toggle-icon');
const button = document.getElementById('recipe-nav-toggle');
const nextIcon = COLLAPSED_TAB_ICON[tab];
if (icon && nextIcon) {
icon.className = `fas ${nextIcon}`;
}
if (button && COLLAPSED_TAB_LABEL[tab]) {
button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
}
};
const setRecipeMenuOpen = (open) => {
syncRecipeNavMetrics();
window.clearTimeout(collapseTimer);
isRecipeMenuOpen = open;
nav.classList.remove('is-recipes-collapsing');
nav.classList.toggle('is-recipes-menu-open', open);
document.documentElement.classList.toggle('is-recipes-menu-open', open);
nav.classList.remove('is-nav-collapsing');
nav.classList.toggle('is-nav-menu-open', open);
document.documentElement.classList.toggle('is-nav-menu-open', open);
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
};
const apply = (tab) => {
const wasRecipeTab = previousTab === 'recipes';
const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
const isCollapsedTab = COLLAPSED_TABS.has(tab);
main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner');
pantry.classList.toggle('hidden', tab !== 'pantry');
shopping.classList.toggle('hidden', tab !== 'shopping');
nav.classList.toggle('is-recipes-tab', tab === 'recipes');
nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
updateToggleForTab(tab);
syncRecipeNavMetrics();
setRecipeMenuOpen(false);
if (tab === 'recipes' && !wasRecipeTab) {
nav.classList.add('is-recipes-menu-open', 'is-recipes-collapsing');
document.documentElement.classList.add('is-recipes-menu-open');
if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
document.documentElement.classList.add('is-nav-menu-open');
document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
nav.classList.remove('is-recipes-menu-open');
document.documentElement.classList.remove('is-recipes-menu-open');
nav.classList.remove('is-nav-menu-open');
document.documentElement.classList.remove('is-nav-menu-open');
collapseTimer = window.setTimeout(() => {
nav.classList.remove('is-recipes-collapsing');
nav.classList.remove('is-nav-collapsing');
}, 500);
});
});
@@ -147,6 +164,8 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
e.stopPropagation();
setRecipeMenuOpen(!isRecipeMenuOpen);
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeFilters?.();
return;
}
@@ -158,7 +177,7 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
});
document.addEventListener('click', (e) => {
if (!isRecipeMenuOpen || !nav.classList.contains('is-recipes-tab')) return;
if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
if (e.composedPath().includes(nav)) return;
setRecipeMenuOpen(false);
});

67
js/ui/filterPopover.js Normal file
View File

@@ -0,0 +1,67 @@
const STYLE_ID = 'filter-popover-liquid-styles';
export function ensureFilterPopoverStyles() {
if (typeof document === 'undefined') return;
if (document.getElementById(STYLE_ID)) return;
const style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = `
.filter-liquid-surface {
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
--filter-liquid-border: rgba(255, 255, 255, 0.32);
--filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
--filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
--filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
--filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
--filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
--filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
--filter-liquid-text-muted: rgb(var(--text-muted-rgb));
--filter-liquid-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
0 8px 20px rgba(var(--overlay-rgb), 0.16),
0 22px 52px rgba(var(--overlay-rgb), 0.24);
}
.dark .filter-liquid-surface {
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
--filter-liquid-border: rgba(255, 255, 255, 0.12);
--filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
--filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
--filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
--filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
--filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
--filter-liquid-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.36),
0 26px 60px rgba(0, 0, 0, 0.46);
}
.filter-liquid-panel {
isolation: isolate;
background: var(--filter-liquid-panel-bg) !important;
background-image: none !important;
border: 1px solid var(--filter-liquid-border) !important;
box-shadow: var(--filter-liquid-shadow) !important;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
}
`;
document.head.appendChild(style);
}
ensureFilterPopoverStyles();
export function filterChipStyle(active) {
const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
const borderRule = active
? 'border:1px solid var(--filter-liquid-chip-active-border);'
: 'border:1px solid transparent;';
const shadow = active
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
: 'box-shadow:none;';
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
}