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

Adjust calendar controller

Browse Source
This commit is contained in:
Rafał
2026-05-07 19:12:38 +02:00
parent 68e5227db1
commit 6d6194df37
4 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@@ -683,6 +683,12 @@
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 #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 {
background: rgba(var(--app-bg-rgb), 0.82) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
@@ -987,17 +993,17 @@
gap: 0.02rem;
padding: 0.28rem;
border-radius: var(--dock-radius);
background: rgba(255, 255, 255, 0.2);
background-image: none;
border: 1px solid rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.2) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
overflow: hidden;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
box-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);
0 8px 20px rgba(var(--overlay-rgb), 0.14),
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
pointer-events: auto;
transform-origin: left center;
transition:
@@ -1033,14 +1039,14 @@
pointer-events: none;
}
.dark #app-bottom-nav .bottom-dock {
background: rgba(255, 255, 255, 0.04);
background-image: none;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-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);
0 10px 24px rgba(0, 0, 0, 0.3),
0 24px 54px rgba(0, 0, 0, 0.38) !important;
}
#app-bottom-nav .nav-slot {
min-width: 0;
@@ -1127,7 +1133,7 @@
height: 3.15rem;
padding: 0.32rem 0.22rem 0.28rem;
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;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
@@ -1153,7 +1159,7 @@
}
.dark #app-bottom-nav .nav-tab.is-active {
color: #fff;
background: rgba(0, 0, 0, 0.42) !important;
background: rgba(0, 0, 0, 0.26) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
@@ -1274,7 +1280,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260507-inline-search-dock';
const APP_ASSET_VERSION = '20260507-hide-calendar-pill-on-search';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';

8
js/ui/calendarPopover.js
View File

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

13
js/views/Pantry.js
View File

@@ -193,22 +193,23 @@ export function getPantryHTML() {
}
</style>
<!-- ── floating horizon pill — mirrors bottom search-field structure ── -->
<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-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);">
<!-- ── 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));">
<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-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>
${createCalendarPopoverHTML({
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',
})}
</div>
</div>
<!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" 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>
@@ -274,6 +275,8 @@ function syncHorizonUI() {
popup: popover,
isOpen: isCalendarOpen,
chevron,
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
trigger: compactPill,
openTriggerStyle: {},
closedTriggerStyle: {},

15
js/views/ShoppingList.js
View File

@@ -119,27 +119,28 @@ function groupByCategory(items) {
export function getShoppingListHTML() {
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;">
<!-- ── floating range pill ── -->
<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-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;">
<!-- ── floating range pill above bottom nav ── -->
<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 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">
<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>
<!-- popup calendar (absolute, overlays content below) -->
<!-- popup calendar (absolute, overlays content above) -->
${createCalendarPopoverHTML({
id: 'sl-calendar-popup',
calendarHTML: createSwipePopoverCalendarHTML({
idPrefix: 'sl-cal',
weekdays: WEEKDAY_SHORT,
}),
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
})}
</div>
</div>
<!-- ── scrollable list ── -->
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" 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>
@@ -209,6 +210,8 @@ function initShoppingCalendar() {
viewportId: 'sl-cal-viewport',
triggerId: 'sl-range-pill',
chevronId: 'sl-range-chevron',
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
getCalendar: () => shoppingCalendar,
hideViewportDuringLayout: true,
});