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)); 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)); 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 { .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;
@@ -987,17 +993,17 @@
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:
@@ -1033,14 +1039,14 @@
pointer-events: none; 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;
@@ -1127,7 +1133,7 @@
height: 3.15rem; height: 3.15rem;
padding: 0.32rem 0.22rem 0.28rem; 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),
@@ -1153,7 +1159,7 @@
} }
.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;
@@ -1274,7 +1280,7 @@
</div> </div>
<script> <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_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv'; const APP_VERSION_QUERY_KEY = 'appv';

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,

13
js/views/Pantry.js
View File

@@ -193,22 +193,23 @@ 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="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"> <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',
})} })}
</div> </div>
</div> </div>
<!-- ── scrollable content ── --> <!-- ── 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 id="pantry-board"></div>
</div> </div>
@@ -274,6 +275,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: {},

15
js/views/ShoppingList.js
View File

@@ -119,27 +119,28 @@ 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-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 id="sl-board"></div>
</div> </div>
@@ -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,
}); });