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

Compare commits

base: ulfr:53a7212dfe0632c92eabc2d97d43317af18320f5
Branches Tags
ulfr:master
...
compare: ulfr:master
Branches Tags
ulfr:master

4 Commits
53a7212dfe ... master

Author SHA1 Message Date
ulfrxdev
6f902098a8 Adjust filter button
All checks were successful
Build and Deploy / build-and-push (push) Successful in 31s
Details
2026-05-07 19:36:30 +02:00
ulfrxdev
6d6194df37 Adjust calendar controller 2026-05-07 19:12:38 +02:00
ulfrxdev
68e5227db1 Adjust tabbar 2026-05-07 18:42:54 +02:00
ulfrxdev
544df5175d Adjust height of the tab bar 2026-05-07 18:07:56 +02:00
8 changed files with 249 additions and 95 deletions
Expand all files Collapse all files

154
index.html
View File

@@ -475,7 +475,7 @@
#pantry-bottom-controls, #pantry-bottom-controls,
#shopping-bottom-controls { #shopping-bottom-controls {
bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important; bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
height: var(--recipe-control-size, 3.05rem) !important; height: var(--recipe-bottom-control-size, 3.9rem) !important;
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
@@ -500,10 +500,10 @@
#pantry-search-shell.recipe-search-field:focus-within { #pantry-search-shell.recipe-search-field:focus-within {
position: absolute !important; position: absolute !important;
left: var(--catalog-menu-left, 1rem); left: var(--catalog-menu-left, 1rem);
right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem)); right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
bottom: 0; bottom: 0;
min-width: 0; min-width: 0;
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important; border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -651,17 +651,45 @@
#main-view .recipe-bottom-action, #main-view .recipe-bottom-action,
#pantry-view .recipe-bottom-action, #pantry-view .recipe-bottom-action,
#shopping-view .recipe-bottom-action { #shopping-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem); width: var(--recipe-bottom-control-size, 3.9rem);
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px; border-radius: 999px;
font-size: 0.95rem; font-size: 1rem;
} }
#main-view .recipe-bottom-action i, #main-view .recipe-bottom-action i,
#pantry-view .recipe-bottom-action i, #pantry-view .recipe-bottom-action i,
#shopping-view .recipe-bottom-action i { #shopping-view .recipe-bottom-action i {
font-size: 0.95rem; font-size: 1rem;
line-height: 1; line-height: 1;
} }
html.is-inline-search-open #recipe-bottom-controls,
html.is-inline-search-open #pantry-bottom-controls {
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) !important;
}
html.is-inline-search-open #recipe-search-shell.recipe-search-field,
html.is-inline-search-open #recipe-search-shell.recipe-search-field:focus-within,
html.is-inline-search-open #pantry-search-shell.recipe-search-field,
html.is-inline-search-open #pantry-search-shell.recipe-search-field:focus-within {
left: var(--catalog-inline-search-field-left, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
right: var(--catalog-inline-search-field-right, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
}
html.is-inline-search-open #main-view #recipe-filter-wrap,
html.is-inline-search-open #pantry-view #pantry-filter-bottom-wrap {
left: var(--catalog-inline-search-close-left, calc(100vw - 3.9rem)) !important;
}
html.is-inline-search-open #main-view .recipe-bottom-action,
html.is-inline-search-open #pantry-view .recipe-bottom-action {
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;
pointer-events: none;
transform: translateY(0.35rem) scale(0.985);
}
.dark #pantry-filter-popover { .dark #pantry-filter-popover {
background: rgba(var(--app-bg-rgb), 0.82) !important; background: rgba(var(--app-bg-rgb), 0.82) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
@@ -858,8 +886,9 @@
--dock-gap: 0.06rem; --dock-gap: 0.06rem;
--dock-radius: 999px; --dock-radius: 999px;
--recipe-dock-width: var(--dock-width); --recipe-dock-width: var(--dock-width);
--recipe-collapsed-dock-width: 3.05rem; --recipe-bottom-control-size: 3.9rem;
--recipe-collapsed-dock-height: 3.05rem; --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px; --recipe-collapsed-dock-radius: 999px;
--recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2)); --recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
display: flex; display: flex;
@@ -869,9 +898,9 @@
transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
} }
html.is-inline-search-open #app-bottom-nav { html.is-inline-search-open #app-bottom-nav {
opacity: 0; opacity: 1;
pointer-events: none; pointer-events: none;
transform: translateY(0.45rem) scale(0.985); transform: none;
} }
#app-bottom-nav .recipe-nav-toggle { #app-bottom-nav .recipe-nav-toggle {
display: none; display: none;
@@ -958,24 +987,24 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: var(--dock-width); width: var(--dock-width);
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch; align-items: stretch;
gap: 0.02rem; gap: 0.02rem;
padding: 0.28rem; padding: 0.28rem;
border-radius: var(--dock-radius); border-radius: var(--dock-radius);
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2) !important;
background-image: none; background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.32); border: 1px solid rgba(255, 255, 255, 0.32) !important;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06), inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
0 8px 20px rgba(var(--overlay-rgb), 0.16), 0 8px 20px rgba(var(--overlay-rgb), 0.14),
0 22px 52px rgba(var(--overlay-rgb), 0.24); 0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
pointer-events: auto; pointer-events: auto;
transform-origin: left center; transform-origin: left center;
transition: transition:
@@ -985,15 +1014,40 @@
border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
transform 540ms cubic-bezier(0.16, 1, 0.3, 1); transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
} }
html.is-inline-search-open #app-bottom-nav .bottom-dock {
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));
border-radius: 999px;
transform: translate(
calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) - var(--recipe-dock-width)) / 2),
calc(var(--recipe-controls-lift, 0px) * -1)
);
pointer-events: auto;
}
html.is-inline-search-open #app-bottom-nav .recipe-nav-toggle {
display: inline-flex;
width: var(--recipe-inline-toggle-size, var(--recipe-toggle-size));
opacity: 1;
transform: translateY(0) scale(1);
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html.is-inline-search-open #app-bottom-nav .nav-slot {
opacity: 0;
pointer-events: none;
}
.dark #app-bottom-nav .bottom-dock { .dark #app-bottom-nav .bottom-dock {
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04) !important;
background-image: none; background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.36), 0 10px 24px rgba(0, 0, 0, 0.3),
0 26px 60px rgba(0, 0, 0, 0.46); 0 24px 54px rgba(0, 0, 0, 0.38) !important;
} }
#app-bottom-nav .nav-slot { #app-bottom-nav .nav-slot {
min-width: 0; min-width: 0;
@@ -1020,8 +1074,8 @@
border: 0; border: 0;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
width: 1.82rem; width: 2.33rem;
height: 1.82rem; height: 2.33rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 999px; border-radius: 999px;
@@ -1077,10 +1131,10 @@
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 4rem); width: min(100%, 4rem);
height: 2.46rem; height: 3.15rem;
padding: 0.24rem 0.2rem 0.22rem; padding: 0.32rem 0.22rem 0.28rem;
color: rgb(var(--text-primary-rgb)); color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important; background: rgba(var(--overlay-rgb), 0.24) !important;
border-radius: 999px; border-radius: 999px;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08),
@@ -1090,23 +1144,23 @@
display: none; display: none;
} }
#app-bottom-nav .nav-tab.is-active i { #app-bottom-nav .nav-tab.is-active i {
font-size: 0.78rem; font-size: 0.88rem;
} }
#app-bottom-nav .nav-tab.is-active::after { #app-bottom-nav .nav-tab.is-active::after {
font-size: 0.58rem; font-size: 0.66rem;
line-height: 1.1; line-height: 1.1;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active::after { #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.52rem; font-size: 0.62rem;
line-height: 1.24; line-height: 1.24;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active { #app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.54rem; height: 3.25rem;
padding: 0.22rem 0.2rem 0.28rem; padding: 0.28rem 0.2rem 0.32rem;
} }
.dark #app-bottom-nav .nav-tab.is-active { .dark #app-bottom-nav .nav-tab.is-active {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.42) !important; background: rgba(0, 0, 0, 0.26) !important;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important; inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
@@ -1128,42 +1182,43 @@
--dock-pad: 0.38rem; --dock-pad: 0.38rem;
--dock-gap: 0.05rem; --dock-gap: 0.05rem;
--dock-radius: 999px; --dock-radius: 999px;
--recipe-collapsed-dock-width: 2.95rem; --recipe-bottom-control-size: 3.78rem;
--recipe-collapsed-dock-height: 2.95rem; --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px; --recipe-collapsed-dock-radius: 999px;
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
width: var(--dock-width); width: var(--dock-width);
height: var(--recipe-control-size, 2.95rem); height: var(--recipe-bottom-control-size, 3.78rem);
gap: 0.01rem; gap: 0.01rem;
padding: 0.24rem; padding: 0.24rem;
border-radius: var(--dock-radius); border-radius: var(--dock-radius);
} }
#app-bottom-nav .nav-tab, #app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action { #app-bottom-nav .nav-action {
width: 1.7rem; width: 2.18rem;
height: 1.7rem; height: 2.18rem;
border-radius: 999px; border-radius: 999px;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 3.72rem); width: min(100%, 3.72rem);
height: 2.25rem; height: 2.88rem;
padding: 0.2rem 0.18rem 0.18rem; padding: 0.24rem 0.18rem 0.2rem;
border-radius: 999px; border-radius: 999px;
} }
#app-bottom-nav .nav-label { #app-bottom-nav .nav-label {
font-size: 0.56rem; font-size: 0.56rem;
} }
#app-bottom-nav .nav-tab.is-active::after { #app-bottom-nav .nav-tab.is-active::after {
font-size: 0.56rem; font-size: 0.62rem;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active::after { #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.5rem; font-size: 0.58rem;
line-height: 1.24; line-height: 1.24;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active { #app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.3rem; height: 2.94rem;
padding: 0.18rem 0.18rem 0.24rem; padding: 0.22rem 0.18rem 0.24rem;
} }
#app-bottom-nav.is-compact-tab .bottom-dock { #app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px)); width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
@@ -1172,6 +1227,15 @@
calc(var(--recipe-controls-lift, 0px) * -1) calc(var(--recipe-controls-lift, 0px) * -1)
); );
} }
html.is-inline-search-open #app-bottom-nav.is-compact-tab .bottom-dock,
html.is-inline-search-open #app-bottom-nav .bottom-dock {
width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
transform: translate(
calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)) - var(--recipe-dock-width)) / 2),
calc(var(--recipe-controls-lift, 0px) * -1)
);
}
} }
/* Planner and common interactive surfaces */ /* Planner and common interactive surfaces */
@@ -1217,7 +1281,7 @@
</div> </div>
<script> <script>
const APP_ASSET_VERSION = '20260421-nav-labels'; const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version'; const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv'; const APP_VERSION_QUERY_KEY = 'appv';

61
js/ui/bottomNav.js
View File

@@ -3,7 +3,7 @@ export function getBottomNavHTML() {
<nav id="app-bottom-nav" aria-label="Główna nawigacja"> <nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div id="app-bottom-nav-dock" class="bottom-dock"> <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" aria-expanded="false" aria-controls="app-bottom-nav-dock"> <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> <i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" aria-hidden="true"></i>
</button> </button>
<div class="nav-slot"> <div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page"> <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
@@ -44,10 +44,15 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const TABS = ['recipes', 'planner', 'pantry', 'shopping']; const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
const COLLAPSED_TABS = new Set(); const COLLAPSED_TABS = new Set();
const EXTRA_CONTROL_SLOTS = { recipes: 2, pantry: 2, shopping: 1 }; const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
const DOUBLE_COMPACT_TABS = new Set(['recipes', 'pantry']); const DOUBLE_COMPACT_TABS = new Set();
const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' }; const COLLAPSED_TAB_ICON = {
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' }; recipes: 'fas fa-book-open',
planner: 'far fa-calendar-alt',
pantry: 'fas fa-warehouse',
shopping: 'fas fa-cart-shopping',
};
const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu', planner: 'Otwórz menu', pantry: 'Otwórz menu', shopping: 'Otwórz menu' };
let isRecipeMenuOpen = false; let isRecipeMenuOpen = false;
let activeTab = 'planner'; let activeTab = 'planner';
let previousTab = 'planner'; let previousTab = 'planner';
@@ -70,38 +75,49 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize; const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2); const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize; const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const expandedDockHeight = controlSize; const bottomControlSize = controlSize * 1.28;
const controlGap = 0.5 * rootFontSize; const controlGap = 0.5 * rootFontSize;
const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2); const inlineSearchControlSize = bottomControlSize * 0.8;
const collapsedDockWidth = controlSize; const controlsLift = 0;
const collapsedDockWidth = bottomControlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight); const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const controlCluster = controlSize + controlGap; const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
const controlCluster = bottomControlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster; const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const filterLeft = dockLeft + dockWidth - controlSize; const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
const searchButtonLeft = filterLeft - controlGap - controlSize; const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap); const inlineSearchCloseLeft = dockLeft + dockWidth - inlineSearchControlSize;
const inlineSearchFieldLeft = dockLeft + inlineSearchControlSize + controlGap;
const inlineSearchFieldRight = Math.max(16, nav.clientWidth - inlineSearchCloseLeft + controlGap);
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`); nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`); nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`); nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
nav.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
nav.style.setProperty('--recipe-inline-toggle-size', `${inlineCollapsedSlotWidth}px`);
nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`); nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`); nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`); document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`); document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`); document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
document.documentElement.style.setProperty('--catalog-filter-left', `${filterLeft}px`); document.documentElement.style.setProperty('--catalog-filter-left', `${toolbarButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`); document.documentElement.style.setProperty('--catalog-search-btn-left', `${toolbarButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`); document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
document.documentElement.style.setProperty('--catalog-inline-search-close-left', `${inlineSearchCloseLeft}px`);
document.documentElement.style.setProperty('--catalog-inline-search-field-left', `${inlineSearchFieldLeft}px`);
document.documentElement.style.setProperty('--catalog-inline-search-field-right', `${inlineSearchFieldRight}px`);
document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`); document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
document.documentElement.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`); document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
}; };
const updateToggleForTab = (tab) => { const updateToggleForTab = (tab) => {
const icon = document.getElementById('recipe-nav-toggle-icon'); const icon = document.getElementById('recipe-nav-toggle-icon');
const button = document.getElementById('recipe-nav-toggle'); const button = document.getElementById('recipe-nav-toggle');
const nextIcon = COLLAPSED_TAB_ICON[tab]; const nextIconClass = COLLAPSED_TAB_ICON[tab];
if (icon && nextIcon) { if (icon && nextIconClass) {
icon.className = `fas ${nextIcon}`; icon.className = nextIconClass;
} }
if (button && COLLAPSED_TAB_LABEL[tab]) { if (button && COLLAPSED_TAB_LABEL[tab]) {
button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]); button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
@@ -174,6 +190,17 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const toggle = e.target.closest('#recipe-nav-toggle'); const toggle = e.target.closest('#recipe-nav-toggle');
if (toggle) { if (toggle) {
e.stopPropagation(); e.stopPropagation();
const wasInlineSearchOpen = document.documentElement.classList.contains('is-inline-search-open');
if (wasInlineSearchOpen) {
setRecipeMenuOpen(false);
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeShoppingCalendar?.();
window.closeShoppingBoughtPopup?.();
window.closeFilters?.();
return;
}
setRecipeMenuOpen(!isRecipeMenuOpen); setRecipeMenuOpen(!isRecipeMenuOpen);
window.closeRecipeSearch?.(); window.closeRecipeSearch?.();
window.closePantrySearch?.(); window.closePantrySearch?.();

8
js/ui/calendarPopover.js
View File

@@ -151,6 +151,8 @@ export function syncCalendarPopoverVisibility({
popup, popup,
isOpen, isOpen,
chevron, chevron,
chevronOpenTransform = 'rotate(180deg)',
chevronClosedTransform = 'rotate(0deg)',
trigger, trigger,
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE, openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE, closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
@@ -164,7 +166,7 @@ export function syncCalendarPopoverVisibility({
} }
const chevronEl = byId(chevron); const chevronEl = byId(chevron);
if (chevronEl) chevronEl.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)'; if (chevronEl) chevronEl.style.transform = isOpen ? chevronOpenTransform : chevronClosedTransform;
setStyles( setStyles(
byId(trigger), byId(trigger),
@@ -215,6 +217,8 @@ export function createCalendarPopoverController({
viewportId, viewportId,
triggerId, triggerId,
chevronId, chevronId,
chevronOpenTransform,
chevronClosedTransform,
getCalendar, getCalendar,
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE, openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE, closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
@@ -228,6 +232,8 @@ export function createCalendarPopoverController({
popup: popupId, popup: popupId,
isOpen, isOpen,
chevron: chevronId, chevron: chevronId,
chevronOpenTransform,
chevronClosedTransform,
trigger: triggerId, trigger: triggerId,
openTriggerStyle, openTriggerStyle,
closedTriggerStyle, closedTriggerStyle,

6
js/views/Filter.js
View File

@@ -21,8 +21,8 @@ const PREP_TIME_STEP = 5;
const PREP_TIME_MIN_GAP = PREP_TIME_STEP; const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
const FILTER_CONTEXTS = { const FILTER_CONTEXTS = {
recipes: { recipes: {
anchorShellId: 'recipe-bottom-controls', anchorShellId: 'recipe-filter-float-btn',
buttonId: 'recipe-filter-btn', buttonId: 'recipe-filter-float-btn',
getState: () => getFilterState(), getState: () => getFilterState(),
applyState: (nextState) => applyFilters(nextState), applyState: (nextState) => applyFilters(nextState),
showSlots: true, showSlots: true,
@@ -408,7 +408,7 @@ function syncPanelCount() {
if (button) { if (button) {
const highlight = isFilterPanelOpen() || count > 0; const highlight = isFilterPanelOpen() || count > 0;
const isRecipeGlassButton = buttonId === 'recipe-filter-btn'; const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
if (isRecipeGlassButton) { if (isRecipeGlassButton) {
button.style.removeProperty('background'); button.style.removeProperty('background');
button.style.removeProperty('border-color'); button.style.removeProperty('border-color');

2
js/views/MealPlanner.js
View File

@@ -83,7 +83,7 @@ export function getMealPlannerHTML() {
${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })} ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
</div> </div>
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]"> <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-32 bg-[rgb(var(--app-bg-rgb))]">
<div id="planner-summary-card" class="mb-3"> <div id="planner-summary-card" class="mb-3">
<div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;"> <div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p> <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>

52
js/views/Pantry.js
View File

@@ -193,27 +193,35 @@ export function getPantryHTML() {
} }
</style> </style>
<!-- ── floating horizon pill — mirrors bottom search-field structure ── --> <!-- ── floating horizon pill above bottom nav ── -->
<div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24]" style="top:1rem; 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-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 top-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--recipe-control-size, 3.05rem);"> <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"> <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> <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> <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>
</button> </button>
${createCalendarPopoverHTML({ ${createCalendarPopoverHTML({
id: 'pantry-calendar-popover', id: 'pantry-calendar-popover',
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }), 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>
<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> </div>
<!-- ── scrollable content ── --> <!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);"> <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
<div id="pantry-board"></div> <div id="pantry-board"></div>
</div> </div>
<!-- ── floating bottom controls (search + filter) ── --> <!-- ── 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 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"> <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> <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));"> <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));">
@@ -223,7 +231,7 @@ export function getPantryHTML() {
<div id="pantry-filter-panel-body" class="space-y-4"></div> <div id="pantry-filter-panel-body" class="space-y-4"></div>
</div> </div>
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] 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-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0"> <div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni"> <button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
@@ -255,8 +263,10 @@ function syncHorizonUI() {
const popover = document.getElementById('pantry-calendar-popover'); const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover'); const filterPopover = document.getElementById('pantry-filter-popover');
const filterCount = document.getElementById('pantry-filter-count'); const filterCount = document.getElementById('pantry-filter-count');
const filterPillCount = document.getElementById('pantry-filter-pill-count');
const searchWrap = document.getElementById('pantry-search-wrap'); const searchWrap = document.getElementById('pantry-search-wrap');
const searchShell = document.getElementById('pantry-search-shell'); const searchShell = document.getElementById('pantry-search-shell');
const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
const rightBtn = document.getElementById('pantry-filter-bottom-btn'); const rightBtn = document.getElementById('pantry-filter-bottom-btn');
const rightIcon = document.getElementById('pantry-right-btn-icon'); const rightIcon = document.getElementById('pantry-right-btn-icon');
const searchDot = document.getElementById('pantry-search-active-dot'); const searchDot = document.getElementById('pantry-search-active-dot');
@@ -272,6 +282,8 @@ function syncHorizonUI() {
popup: popover, popup: popover,
isOpen: isCalendarOpen, isOpen: isCalendarOpen,
chevron, chevron,
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
trigger: compactPill, trigger: compactPill,
openTriggerStyle: {}, openTriggerStyle: {},
closedTriggerStyle: {}, closedTriggerStyle: {},
@@ -287,8 +299,13 @@ function syncHorizonUI() {
} }
if (filterCount) { if (filterCount) {
filterCount.textContent = String(activeFilterCount); filterCount.textContent = String(activeFilterCount);
filterCount.classList.toggle('hidden', pantrySearchOpen || activeFilterCount === 0); filterCount.classList.toggle('hidden', true);
filterCount.classList.toggle('flex', !pantrySearchOpen && activeFilterCount > 0); 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 (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
if (searchShell) { if (searchShell) {
@@ -296,8 +313,9 @@ function syncHorizonUI() {
searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none'; searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)'; searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
} }
if (rightIcon) rightIcon.className = `fas ${pantrySearchOpen ? 'fa-xmark' : 'fa-sliders-h'}`; if (rightIcon) rightIcon.className = 'fas fa-xmark';
if (rightBtn) rightBtn.setAttribute('aria-label', pantrySearchOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry'); if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery); if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
renderCalendarPopover(); renderCalendarPopover();
@@ -397,6 +415,10 @@ function clearSearchInput() {
function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) { function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(pantrySearchQuery); const hadQuery = Boolean(pantrySearchQuery);
pantrySearchOpen = open; pantrySearchOpen = open;
if (open) {
isCalendarOpen = false;
isFilterOpen = false;
}
document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen); document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
if (clearQuery) pantrySearchQuery = ''; if (clearQuery) pantrySearchQuery = '';
const input = document.getElementById('pantry-search-input'); const input = document.getElementById('pantry-search-input');
@@ -714,8 +736,12 @@ export function setupPantry() {
event.stopPropagation(); event.stopPropagation();
if (pantrySearchOpen) { if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true }); setPantrySearchOpen(false, { clearQuery: true });
return;
} }
});
document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) return;
closeCalendar();
toggleFilterPanel(); toggleFilterPanel();
}); });
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => { document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
@@ -769,7 +795,7 @@ export function setupPantry() {
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) { if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
closeCalendar(); closeCalendar();
} }
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) { if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
closeFilter(); closeFilter();
} }
}); });

42
js/views/RecipeList.js
View File

@@ -43,6 +43,12 @@ function getFilteredRecipes() {
return Object.values(RECIPES).filter(matchesFilters); 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() { function syncRecipeScrollShadow() {
syncRecipeTopbarUI(); syncRecipeTopbarUI();
} }
@@ -50,9 +56,11 @@ function syncRecipeScrollShadow() {
function syncRecipeTopbarUI() { function syncRecipeTopbarUI() {
const searchWrap = document.getElementById('recipe-search-wrap'); const searchWrap = document.getElementById('recipe-search-wrap');
const searchShell = document.getElementById('recipe-search-shell'); const searchShell = document.getElementById('recipe-search-shell');
const rightWrap = document.getElementById('recipe-filter-wrap');
const rightBtn = document.getElementById('recipe-filter-btn'); const rightBtn = document.getElementById('recipe-filter-btn');
const rightIcon = document.getElementById('recipe-right-btn-icon'); const rightIcon = document.getElementById('recipe-right-btn-icon');
const filterCount = document.getElementById('recipe-filter-count'); const filterCount = document.getElementById('recipe-filter-count');
const floatingFilterCount = document.getElementById('recipe-filter-float-count');
const dot = document.getElementById('recipe-search-active-dot'); const dot = document.getElementById('recipe-search-active-dot');
const isOpen = recipeSearchOpen; const isOpen = recipeSearchOpen;
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen); if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
@@ -62,17 +70,25 @@ function syncRecipeTopbarUI() {
searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)'; searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
} }
if (rightIcon) { if (rightIcon) {
rightIcon.className = `fas ${isOpen ? 'fa-xmark' : 'fa-sliders-h'}`; rightIcon.className = 'fas fa-xmark';
} }
if (rightBtn) { if (rightBtn) {
rightBtn.setAttribute('aria-label', isOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry'); rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
}
if (rightWrap) {
rightWrap.classList.toggle('hidden', !isOpen);
} }
if (filterCount) { if (filterCount) {
const activeCount = Number.parseInt(filterCount.textContent || '0', 10) || 0; const showCount = false;
const showCount = !isOpen && activeCount > 0;
filterCount.classList.toggle('hidden', !showCount); filterCount.classList.toggle('hidden', !showCount);
filterCount.classList.toggle('flex', 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) { if (dot) {
const hasQuery = Boolean(filterState.query); const hasQuery = Boolean(filterState.query);
dot.classList.toggle('hidden', !hasQuery); dot.classList.toggle('hidden', !hasQuery);
@@ -82,6 +98,7 @@ function syncRecipeTopbarUI() {
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) { function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(filterState.query); const hadQuery = Boolean(filterState.query);
recipeSearchOpen = open; recipeSearchOpen = open;
if (open) window.closeFilters?.();
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen); document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
if (clearQuery) { if (clearQuery) {
filterState.query = ''; filterState.query = '';
@@ -125,12 +142,12 @@ export function getRecipeListHTML() {
scrollId: 'recipe-scroll', scrollId: 'recipe-scroll',
gridId: 'recipe-grid', gridId: 'recipe-grid',
emptyStateId: 'recipe-empty-state', emptyStateId: 'recipe-empty-state',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[rgb(var(--app-bg-rgb))]', scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]', gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
emptyTitle: 'Brak wyników', emptyTitle: 'Brak wyników',
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry', emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
})} })}
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] 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="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0"> <div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów"> <button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
@@ -150,6 +167,14 @@ export function getRecipeListHTML() {
</button> </button>
</div> </div>
</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> </div>
`; `;
} }
@@ -191,8 +216,11 @@ export function setupRecipeList() {
e.stopPropagation(); e.stopPropagation();
if (recipeSearchOpen) { if (recipeSearchOpen) {
setSearchOpen(false, { clearQuery: true }); setSearchOpen(false, { clearQuery: true });
return;
} }
});
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
if (recipeSearchOpen) return;
window.openFilters?.('recipes'); window.openFilters?.('recipes');
}); });

19
js/views/ShoppingList.js
View File

@@ -119,32 +119,33 @@ function groupByCategory(items) {
export function getShoppingListHTML() { export function getShoppingListHTML() {
return ` return `
<div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;"> <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
<!-- ── floating range pill ── --> <!-- ── floating range pill above bottom nav ── -->
<div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24]" style="top:1rem; 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="shopping-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="shopping-range-wrap" class="pointer-events-auto absolute top-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--recipe-control-size, 3.05rem); position:relative;"> <div id="shopping-range-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)); position:relative;">
<button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all"> <button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
<span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span> <span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
<i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i> <i id="sl-range-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
</button> </button>
<!-- popup calendar (absolute, overlays content below) --> <!-- popup calendar (absolute, overlays content above) -->
${createCalendarPopoverHTML({ ${createCalendarPopoverHTML({
id: 'sl-calendar-popup', id: 'sl-calendar-popup',
calendarHTML: createSwipePopoverCalendarHTML({ calendarHTML: createSwipePopoverCalendarHTML({
idPrefix: 'sl-cal', idPrefix: 'sl-cal',
weekdays: WEEKDAY_SHORT, weekdays: WEEKDAY_SHORT,
}), }),
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
})} })}
</div> </div>
</div> </div>
<!-- ── scrollable list ── --> <!-- ── scrollable list ── -->
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);"> <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
<div id="sl-board"></div> <div id="sl-board"></div>
</div> </div>
<div id="shopping-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="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-control-size, 3.05rem));"> <div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-bottom-control-size, 3.9rem));">
<button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione"> <button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
<span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span> <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
@@ -209,6 +210,8 @@ function initShoppingCalendar() {
viewportId: 'sl-cal-viewport', viewportId: 'sl-cal-viewport',
triggerId: 'sl-range-pill', triggerId: 'sl-range-pill',
chevronId: 'sl-range-chevron', chevronId: 'sl-range-chevron',
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
getCalendar: () => shoppingCalendar, getCalendar: () => shoppingCalendar,
hideViewportDuringLayout: true, hideViewportDuringLayout: true,
}); });