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

Compare commits

base: ulfr:2f362a7e564d46f512a2e6f215793c8835333504
Branches Tags
ulfr:master
..
compare: ulfr:master
Branches Tags
ulfr:master

12 Commits
2f362a7e56 ... 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
ulfrxdev
53a7212dfe Redesign menu
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details
2026-04-22 22:53:24 +02:00
ulfrxdev
ded24b53b4 Design changes to pantry
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details
2026-04-22 21:57:23 +02:00
ulfrxdev
3d62d88d48 Apply liquid glass to pantry items 2026-04-22 19:55:59 +02:00
ulfrxdev
b9538a35b6 Apply liquid glass to pantry view
All checks were successful
Build and Deploy / build-and-push (push) Successful in 30s
Details
2026-04-22 19:49:29 +02:00
ulfrxdev
120959365e Apply liquid glass to recipe cards 2026-04-22 18:47:05 +02:00
ulfrxdev
7049cb1d48 Apply liquid glass to filter panel in recipe list 2026-04-22 18:42:29 +02:00
ulfrxdev
bc505d6b4c Redesign controls in recipe list 2026-04-22 18:08:20 +02:00
ulfrxdev
7328b6ec4c Redesign controls in recipe list 2026-04-22 17:58:20 +02:00
10 changed files with 1320 additions and 374 deletions
Expand all files Collapse all files

564
index.html
View File

@@ -383,11 +383,68 @@
font-size: 0.54rem; font-size: 0.54rem;
line-height: 0.72rem; line-height: 0.72rem;
} }
#recipe-grid > .recipe-catalog-card {
background: rgba(var(--surface-rgb), 0.7) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.34) !important;
border-radius: 1.08rem !important;
box-shadow:
0 1px 2px rgba(var(--overlay-rgb), 0.06),
0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.dark #recipe-grid > .recipe-catalog-card {
background: rgba(var(--surface-rgb), 0.62) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.26) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
height: 5.45rem;
background: rgb(var(--skeleton-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
padding: 0.62rem;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
min-height: 2.64rem;
margin-bottom: 0.5rem;
font-size: 0.68rem;
font-weight: 650 !important;
line-height: 0.88rem;
color: rgb(var(--text-emphasis-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
margin-bottom: 0;
padding-top: 0.1rem;
color: rgb(var(--text-muted-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
color: rgb(var(--text-dim-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card > div:first-child::after {
display: none;
}
#recipe-grid > .recipe-catalog-card:active {
transform: scale(0.985);
}
#recipe-grid > *:hover, #recipe-grid > *:hover,
#planner-picker-grid > *:hover { #planner-picker-grid > *:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: none !important; box-shadow: none !important;
} }
#recipe-grid > .recipe-catalog-card:hover {
box-shadow:
0 2px 4px rgba(var(--overlay-rgb), 0.08),
0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
}
.dark #recipe-grid > .recipe-catalog-card:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.24),
0 14px 30px rgba(0, 0, 0, 0.34) !important;
}
#recipe-grid > * img, #recipe-grid > * img,
#planner-picker-grid > * img { #planner-picker-grid > * img {
transition: transform 240ms ease; transition: transform 240ms ease;
@@ -405,38 +462,243 @@
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
pointer-events: none; pointer-events: none;
} }
#recipe-topbar #recipe-search-shell { #recipe-search-shell,
min-height: 0; #pantry-search-shell {
width: 100%;
margin-inline: 0;
isolation: auto; isolation: auto;
} }
#recipe-topbar #recipe-search-shell::after { #recipe-search-shell::after,
#pantry-search-shell::after {
display: none; display: none;
} }
#recipe-topbar #recipe-search-shell, #recipe-bottom-controls,
#recipe-topbar #recipe-search-shell:focus-within { #recipe-bottom-default-actions,
background: rgb(var(--sunken-rgb)) !important; #pantry-bottom-controls,
border: 1px solid rgb(var(--border-input-rgb)) !important; #shopping-bottom-controls {
backdrop-filter: none; bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
-webkit-backdrop-filter: none; height: var(--recipe-bottom-control-size, 3.9rem) !important;
}
#recipe-topbar #recipe-search-input {
appearance: none;
-webkit-appearance: none;
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: opacity 160ms ease;
}
html.is-nav-menu-open #recipe-bottom-controls,
html.is-nav-menu-open #pantry-bottom-controls,
html.is-nav-menu-open #shopping-bottom-controls {
opacity: 0;
pointer-events: none;
}
html.is-nav-menu-open #recipe-bottom-controls *,
html.is-nav-menu-open #pantry-bottom-controls *,
html.is-nav-menu-open #shopping-bottom-controls * {
pointer-events: none !important;
}
#recipe-search-shell.recipe-search-field,
#recipe-search-shell.recipe-search-field:focus-within,
#pantry-search-shell.recipe-search-field,
#pantry-search-shell.recipe-search-field:focus-within {
position: absolute !important;
left: var(--catalog-menu-left, 1rem);
right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
bottom: 0;
min-width: 0;
height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px;
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
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.14),
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
}
.dark #recipe-search-shell.recipe-search-field,
.dark #recipe-search-shell.recipe-search-field:focus-within,
.dark #pantry-search-shell.recipe-search-field,
.dark #pantry-search-shell.recipe-search-field:focus-within {
background: rgba(255, 255, 255, 0.04) !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.3),
0 24px 54px rgba(0, 0, 0, 0.38) !important;
}
#recipe-search-input,
#pantry-search-input {
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)) !important; color: rgb(var(--text-body-rgb)) !important;
caret-color: rgb(var(--text-body-rgb)); caret-color: rgb(var(--text-body-rgb));
padding: 0 !important;
} }
#recipe-topbar #recipe-search-input::placeholder { #recipe-search-input::-webkit-search-cancel-button,
#recipe-search-input::-webkit-search-decoration,
#recipe-search-input::-webkit-search-results-button,
#recipe-search-input::-webkit-search-results-decoration,
#pantry-search-input::-webkit-search-cancel-button,
#pantry-search-input::-webkit-search-decoration,
#pantry-search-input::-webkit-search-results-button,
#pantry-search-input::-webkit-search-results-decoration {
display: none;
}
#recipe-search-input::placeholder,
#pantry-search-input::placeholder {
color: rgb(var(--text-dim-rgb)) !important; color: rgb(var(--text-dim-rgb)) !important;
opacity: 1; opacity: 1;
} }
#recipe-topbar #recipe-filter-btn { #recipe-search-close,
#recipe-search-close:hover,
#recipe-search-close:focus,
#recipe-search-close:focus-visible,
#recipe-search-close:active,
#pantry-search-close,
#pantry-search-close:hover,
#pantry-search-close:focus,
#pantry-search-close:focus-visible,
#pantry-search-close:active {
appearance: none;
-webkit-appearance: none;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
outline: none;
}
#main-view .recipe-glass-btn,
#pantry-view .recipe-glass-btn,
#shopping-view .recipe-glass-btn,
#app-bottom-nav .recipe-nav-toggle {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
background: rgba(255, 255, 255, 0.2) !important;
background-image: none !important;
color: rgb(var(--text-body-rgb));
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.14),
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
}
.dark #main-view .recipe-glass-btn,
.dark #pantry-view .recipe-glass-btn,
.dark #shopping-view .recipe-glass-btn,
.dark #app-bottom-nav .recipe-nav-toggle {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: rgba(255, 255, 255, 0.04) !important;
background-image: none !important;
color: rgb(var(--text-body-rgb));
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.3),
0 24px 54px rgba(0, 0, 0, 0.38) !important;
}
#main-view .recipe-glass-btn:hover,
#pantry-view .recipe-glass-btn:hover,
#shopping-view .recipe-glass-btn:hover,
#app-bottom-nav .recipe-nav-toggle:hover {
background: rgba(var(--overlay-rgb), 0.1) !important;
color: rgb(var(--text-emphasis-rgb));
transform: translateY(-1px);
}
.dark #main-view .recipe-glass-btn:hover,
.dark #pantry-view .recipe-glass-btn:hover,
.dark #shopping-view .recipe-glass-btn:hover,
.dark #app-bottom-nav .recipe-nav-toggle:hover {
background: rgba(255, 255, 255, 0.09) !important;
}
#main-view #recipe-search-shell.recipe-search-field:hover,
#pantry-view #pantry-search-shell.recipe-search-field:hover {
transform: none;
}
#recipe-filter-btn,
#pantry-filter-bottom-btn {
border-radius: 999px; border-radius: 999px;
} }
#main-view #recipe-filter-btn.recipe-bottom-action,
#pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
border-radius: 999px;
}
#main-view #recipe-filter-wrap,
#pantry-view #pantry-filter-bottom-wrap {
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
right: auto !important;
bottom: 0;
}
#main-view #recipe-search-wrap,
#pantry-view #pantry-search-wrap {
left: var(--catalog-search-btn-left, calc(100vw - 7.6rem)) !important;
right: auto !important;
bottom: 0;
}
#main-view .recipe-bottom-action,
#pantry-view .recipe-bottom-action,
#shopping-view .recipe-bottom-action {
width: var(--recipe-bottom-control-size, 3.9rem);
height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px;
font-size: 1rem;
}
#main-view .recipe-bottom-action i,
#pantry-view .recipe-bottom-action i,
#shopping-view .recipe-bottom-action i {
font-size: 1rem;
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 {
background: rgba(var(--app-bg-rgb), 0.82) !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) !important;
}
#planner-picker-search-shell { #planner-picker-search-shell {
min-height: 3rem; min-height: 3rem;
width: min(calc(100% - 0.5rem), 22.4rem); width: min(calc(100% - 0.5rem), 22.4rem);
@@ -573,8 +835,7 @@
font-weight: 400; font-weight: 400;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
#planner-picker-search::placeholder, #planner-picker-search::placeholder {
#pantry-search::placeholder {
color: rgba(var(--text-body-soft-rgb), 0.72) !important; color: rgba(var(--text-body-soft-rgb), 0.72) !important;
opacity: 1; opacity: 1;
} }
@@ -620,41 +881,173 @@
inset-inline: 0; inset-inline: 0;
bottom: 0; bottom: 0;
z-index: 30; z-index: 30;
--dock-width: min(calc(100% - 2.4rem), 24.5rem);
--dock-pad: 0.42rem;
--dock-gap: 0.06rem;
--dock-radius: 999px;
--recipe-dock-width: var(--dock-width);
--recipe-bottom-control-size: 3.9rem;
--recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px;
--recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom)); padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
pointer-events: none; pointer-events: none;
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 {
opacity: 1;
pointer-events: none;
transform: none;
}
#app-bottom-nav .recipe-nav-toggle {
display: none;
position: absolute;
top: var(--dock-pad);
bottom: var(--dock-pad);
left: var(--dock-pad);
width: var(--recipe-toggle-size);
height: auto;
margin: 0;
padding: 0;
border-radius: 999px;
align-items: center;
justify-content: center;
font-size: 0.95rem;
pointer-events: auto;
cursor: pointer;
z-index: 2;
transition:
transform 220ms ease,
color 160ms ease,
background-color 160ms ease,
box-shadow 180ms ease,
opacity 280ms ease;
}
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
display: inline-flex;
opacity: 1;
transform: translateY(0) scale(1);
}
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
display: inline-flex;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: none;
}
#app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
width: var(--recipe-collapsed-dock-width);
height: var(--recipe-collapsed-dock-height);
border-radius: var(--recipe-collapsed-dock-radius);
opacity: 1;
transform: translate(
calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
calc(var(--recipe-controls-lift, 0px) * -1)
);
pointer-events: auto;
}
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
opacity: 1;
pointer-events: auto;
}
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
opacity: 0;
transform: translateY(0) scale(0.98);
pointer-events: none;
}
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: none;
}
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
opacity: 1;
width: var(--recipe-dock-width);
transform: translateY(0);
pointer-events: auto;
}
#app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
transform: translate(
var(--nav-compact-translate-x, 0px),
calc(var(--recipe-controls-lift, 0px) * -1)
);
border-radius: 999px;
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: min(calc(100% - 2.4rem), 24.5rem); width: var(--dock-width);
height: 3.72rem; 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.06rem; gap: 0.02rem;
padding: 0.42rem; padding: 0.28rem;
border-radius: 1.68rem; border-radius: var(--dock-radius);
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32); background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
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;
transform-origin: left center;
transition:
opacity 220ms ease,
width 540ms cubic-bezier(0.16, 1, 0.3, 1),
height 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);
}
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; 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;
border: 1px solid rgba(255, 255, 255, 0.12); background-image: none !important;
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;
@@ -662,6 +1055,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 1;
transition: opacity 140ms ease;
}
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
opacity: 0;
pointer-events: none;
}
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
opacity: 0;
transition: none;
pointer-events: none;
} }
#app-bottom-nav .nav-tab, #app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action { #app-bottom-nav .nav-action {
@@ -670,16 +1074,16 @@
border: 0; border: 0;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
width: 2.18rem; width: 2.33rem;
height: 2.18rem; height: 2.33rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 1.35rem; border-radius: 999px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
gap: 0.24rem; gap: 0.16rem;
flex: 0 0 auto; flex: 0 0 auto;
color: rgba(var(--text-primary-rgb), 0.94); color: rgba(var(--text-primary-rgb), 0.94);
cursor: pointer; cursor: pointer;
@@ -691,7 +1095,7 @@
} }
#app-bottom-nav .nav-tab i, #app-bottom-nav .nav-tab i,
#app-bottom-nav .nav-action i { #app-bottom-nav .nav-action i {
font-size: 0.95rem; font-size: 0.88rem;
line-height: 1; line-height: 1;
} }
#app-bottom-nav .nav-label { #app-bottom-nav .nav-label {
@@ -726,12 +1130,12 @@
background: var(--hover-overlay) !important; background: var(--hover-overlay) !important;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 5.2rem); width: min(100%, 4rem);
height: 2.82rem; height: 3.15rem;
padding: 0.34rem 0.28rem 0.3rem; 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: 1.05rem; 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),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important; inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
@@ -740,11 +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.8rem; font-size: 0.88rem;
}
#app-bottom-nav .nav-tab.is-active::after {
font-size: 0.66rem;
line-height: 1.1;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.62rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 3.25rem;
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;
@@ -762,31 +1178,63 @@
@media (max-width: 380px) { @media (max-width: 380px) {
#app-bottom-nav { #app-bottom-nav {
padding-inline: 0.7rem; padding-inline: 0.7rem;
--dock-width: min(calc(100% - 1.6rem), 22.5rem);
--dock-pad: 0.38rem;
--dock-gap: 0.05rem;
--dock-radius: 999px;
--recipe-bottom-control-size: 3.78rem;
--recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px;
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
width: min(calc(100% - 1.6rem), 22.5rem); width: var(--dock-width);
height: 3.48rem; height: var(--recipe-bottom-control-size, 3.78rem);
gap: 0.05rem; gap: 0.01rem;
padding: 0.38rem; padding: 0.24rem;
border-radius: 1.56rem; 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: 2.02rem; width: 2.18rem;
height: 2.02rem; height: 2.18rem;
border-radius: 1.28rem; border-radius: 999px;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 4.4rem); width: min(100%, 3.72rem);
height: 2.65rem; height: 2.88rem;
padding: 0.3rem 0.22rem 0.27rem; padding: 0.24rem 0.18rem 0.2rem;
border-radius: 0.96rem; 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 {
font-size: 0.58rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.94rem;
padding: 0.22rem 0.18rem 0.24rem;
}
#app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
transform: translate(
var(--nav-compact-translate-x, 0px),
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)
);
} }
} }
@@ -833,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';

168
js/ui/bottomNav.js
View File

@@ -1,7 +1,10 @@
export function getBottomNavHTML() { export function getBottomNavHTML() {
return ` return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja"> <nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div 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">
<i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" aria-hidden="true"></i>
</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">
<i class="far fa-calendar-alt" aria-hidden="true"></i> <i class="far fa-calendar-alt" aria-hidden="true"></i>
@@ -10,7 +13,7 @@ export function getBottomNavHTML() {
</div> </div>
<div class="nav-slot"> <div class="nav-slot">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog"> <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-book-open" aria-hidden="true"></i>
<span class="nav-label">Katalog</span> <span class="nav-label">Katalog</span>
</button> </button>
</div> </div>
@@ -40,12 +43,130 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
if (!main || !planner || !pantry || !shopping || !nav) return; if (!main || !planner || !pantry || !shopping || !nav) return;
const TABS = ['recipes', 'planner', 'pantry', 'shopping']; const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
const COLLAPSED_TABS = new Set();
const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
const DOUBLE_COMPACT_TABS = new Set();
const COLLAPSED_TAB_ICON = {
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 activeTab = 'planner';
let previousTab = 'planner';
let collapseTimer = null;
const syncRecipeNavMetrics = () => {
const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
const navStyles = window.getComputedStyle(nav);
const navPadLeft = parseFloat(navStyles.paddingLeft) || 0;
const navPadRight = parseFloat(navStyles.paddingRight) || 0;
const navContentWidth = nav.clientWidth - navPadLeft - navPadRight;
const isCompact = window.matchMedia('(max-width: 380px)').matches;
const dockInset = (isCompact ? 1.6 : 2.4) * rootFontSize;
const dockMax = (isCompact ? 22.5 : 24.5) * rootFontSize;
const dockWidth = Math.min(navContentWidth - dockInset, dockMax);
if (dockWidth <= 0) return;
const padLeft = (isCompact ? 0.38 : 0.42) * rootFontSize;
const padRight = (isCompact ? 0.38 : 0.42) * rootFontSize;
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const bottomControlSize = controlSize * 1.28;
const controlGap = 0.5 * rootFontSize;
const inlineSearchControlSize = bottomControlSize * 0.8;
const controlsLift = 0;
const collapsedDockWidth = bottomControlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
const controlCluster = bottomControlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + 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-collapsed-dock-width', `${collapsedDockWidth}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-translate-x', `${compactExtraWidth * -0.5}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-width', `${collapsedDockWidth}px`);
document.documentElement.style.setProperty('--catalog-filter-left', `${toolbarButtonLeft}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-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-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`);
};
const updateToggleForTab = (tab) => {
const icon = document.getElementById('recipe-nav-toggle-icon');
const button = document.getElementById('recipe-nav-toggle');
const nextIconClass = COLLAPSED_TAB_ICON[tab];
if (icon && nextIconClass) {
icon.className = nextIconClass;
}
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-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 apply = (tab) => {
const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
const isCollapsedTab = COLLAPSED_TABS.has(tab);
const isCompactTab = (EXTRA_CONTROL_SLOTS[tab] || 0) > 0;
const isDoubleCompact = DOUBLE_COMPACT_TABS.has(tab);
main.classList.toggle('hidden', tab !== 'recipes'); main.classList.toggle('hidden', tab !== 'recipes');
planner.classList.toggle('hidden', tab !== 'planner'); planner.classList.toggle('hidden', tab !== 'planner');
pantry.classList.toggle('hidden', tab !== 'pantry'); pantry.classList.toggle('hidden', tab !== 'pantry');
shopping.classList.toggle('hidden', tab !== 'shopping'); shopping.classList.toggle('hidden', tab !== 'shopping');
nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
nav.classList.toggle('is-compact-tab', isCompactTab);
nav.classList.toggle('is-double-compact', isDoubleCompact);
activeTab = tab;
updateToggleForTab(tab);
syncRecipeNavMetrics();
setRecipeMenuOpen(false);
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-nav-menu-open');
document.documentElement.classList.remove('is-nav-menu-open');
collapseTimer = window.setTimeout(() => {
nav.classList.remove('is-nav-collapsing');
}, 500);
});
});
});
}
if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry(); if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList(); if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
@@ -60,17 +181,60 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
else btn.removeAttribute('aria-current'); else btn.removeAttribute('aria-current');
} }
}); });
window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
previousTab = tab;
}; };
nav.addEventListener('click', (e) => { nav.addEventListener('click', (e) => {
const toggle = e.target.closest('#recipe-nav-toggle');
if (toggle) {
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);
window.closeRecipeSearch?.();
window.closePantrySearch?.();
window.closePantryFilter?.();
window.closeShoppingCalendar?.();
window.closeShoppingBoughtPopup?.();
window.closeFilters?.();
return;
}
const btn = e.target.closest('.nav-tab[data-tab]'); const btn = e.target.closest('.nav-tab[data-tab]');
if (!btn || btn.hasAttribute('disabled')) return; if (!btn || btn.hasAttribute('disabled')) return;
const tab = btn.getAttribute('data-tab'); const tab = btn.getAttribute('data-tab');
if (TABS.includes(tab)) apply(tab); if (TABS.includes(tab)) apply(tab);
}); });
document.addEventListener('click', (e) => {
if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
if (e.composedPath().includes(nav)) return;
setRecipeMenuOpen(false);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isRecipeMenuOpen) setRecipeMenuOpen(false);
});
window.addEventListener('resize', syncRecipeNavMetrics);
apply('planner'); apply('planner');
window.switchAppTab = (tab) => {
if (TABS.includes(tab)) apply(tab);
};
window.refreshStockViews = () => { window.refreshStockViews = () => {
if (typeof refreshPantry === 'function') refreshPantry(); if (typeof refreshPantry === 'function') refreshPantry();
}; };

109
js/ui/calendarPopover.js
View File

@@ -1,7 +1,8 @@
const STYLE_ID = 'calendar-popover-liquid-styles';
const DEFAULT_POPOVER_CLASS = 'absolute left-0 right-0 top-full mt-2 z-[50] transition-all duration-200 pointer-events-none'; const DEFAULT_POPOVER_CLASS = 'absolute left-0 right-0 top-full mt-2 z-[50] transition-all duration-200 pointer-events-none';
const DEFAULT_POPOVER_STYLE = 'opacity:0; transform:translateY(-6px) scale(0.98);'; const DEFAULT_POPOVER_STYLE = 'opacity:0; transform:translateY(-6px) scale(0.98);';
const DEFAULT_PANEL_CLASS = 'rounded-[1.35rem] py-3'; const DEFAULT_PANEL_CLASS = 'calendar-liquid-panel rounded-[1.35rem] py-3';
const DEFAULT_PANEL_STYLE = 'background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);'; const DEFAULT_PANEL_STYLE = 'background-image:none !important;';
const DEFAULT_OPEN_TRIGGER_STYLE = { const DEFAULT_OPEN_TRIGGER_STYLE = {
background: 'rgb(var(--sunken-rgb))', background: 'rgb(var(--sunken-rgb))',
@@ -13,6 +14,101 @@ const DEFAULT_CLOSED_TRIGGER_STYLE = {
borderColor: 'rgb(var(--border-card-rgb))', borderColor: 'rgb(var(--border-card-rgb))',
}; };
export function ensureCalendarPopoverStyles() {
if (typeof document === 'undefined') return;
if (document.getElementById(STYLE_ID)) return;
const style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = `
.calendar-liquid-panel {
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
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.14),
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
}
.dark .calendar-liquid-panel {
background: rgba(255, 255, 255, 0.04) !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.3),
0 24px 54px rgba(0, 0, 0, 0.38) !important;
}
.calendar-liquid-btn {
background: rgba(255, 255, 255, 0.16) !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.08),
0 6px 14px rgba(var(--overlay-rgb), 0.14) !important;
backdrop-filter: blur(22px) saturate(165%);
-webkit-backdrop-filter: blur(22px) saturate(165%);
transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.calendar-liquid-btn:hover {
background: rgba(255, 255, 255, 0.22) !important;
transform: translateY(-1px);
}
.dark .calendar-liquid-btn {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.2),
0 8px 18px rgba(0, 0, 0, 0.28) !important;
}
.dark .calendar-liquid-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.calendar-liquid-btn input,
.calendar-liquid-btn input:focus,
.calendar-liquid-btn input:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: textfield !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
}
.calendar-liquid-btn input[type='number']::-webkit-outer-spin-button,
.calendar-liquid-btn input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.calendar-liquid-btn input:-webkit-autofill,
.calendar-liquid-btn input:-webkit-autofill:hover,
.calendar-liquid-btn input:-webkit-autofill:focus {
-webkit-text-fill-color: rgb(var(--text-body-rgb));
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
box-shadow: 0 0 0 1000px transparent inset !important;
transition: background-color 9999s ease-in-out 0s;
}
`;
document.head.appendChild(style);
}
function byId(idOrElement) { function byId(idOrElement) {
if (!idOrElement) return null; if (!idOrElement) return null;
if (typeof idOrElement === 'string') return document.getElementById(idOrElement); if (typeof idOrElement === 'string') return document.getElementById(idOrElement);
@@ -40,6 +136,7 @@ export function createCalendarPopoverHTML({
panelStyle = DEFAULT_PANEL_STYLE, panelStyle = DEFAULT_PANEL_STYLE,
wrapInPanel = true, wrapInPanel = true,
}) { }) {
ensureCalendarPopoverStyles();
const body = wrapInPanel const body = wrapInPanel
? `<div class="${panelClass}" style="${panelStyle}">${calendarHTML}</div>` ? `<div class="${panelClass}" style="${panelStyle}">${calendarHTML}</div>`
: calendarHTML; : calendarHTML;
@@ -54,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,
@@ -67,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),
@@ -118,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,
@@ -131,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,

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

@@ -0,0 +1,75 @@
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%);
}
.filter-liquid-surface.filter-liquid-panel-soft {
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.52);
}
.dark .filter-liquid-surface.filter-liquid-panel-soft {
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.6);
}
`;
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}`;
}

61
js/ui/ingredientCard.js
View File

@@ -19,6 +19,7 @@ import {
updateKitchenItemAmount, updateKitchenItemAmount,
} from '../services/pantryShopping.js?v=2'; } from '../services/pantryShopping.js?v=2';
import { showAppToast } from './toast.js'; import { showAppToast } from './toast.js';
import { ensureCalendarPopoverStyles } from './calendarPopover.js';
const CATEGORY_ICONS = { const CATEGORY_ICONS = {
pieczywo: 'fa-bread-slice', pieczywo: 'fa-bread-slice',
@@ -79,7 +80,7 @@ function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg
const fit = image.endsWith('.svg') ? 'object-contain' : 'object-cover'; const fit = image.endsWith('.svg') ? 'object-contain' : 'object-cover';
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} ${fit} shrink-0">`; return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} ${fit} shrink-0">`;
} }
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`; return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:transparent;"><i class="fas ${icon} text-sm" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
} }
function compactMetaText(text, tone = 'default') { function compactMetaText(text, tone = 'default') {
@@ -123,6 +124,11 @@ function formatPackCount(amount, packSize) {
return `${formatPreciseQty((Number(amount) || 0) / Number(packSize))} opak.`; return `${formatPreciseQty((Number(amount) || 0) / Number(packSize))} opak.`;
} }
function parseQtyInput(value) {
const normalized = String(value ?? '').trim().replace(',', '.');
return normalizeQty(Number(normalized) || 0);
}
function getQtyStepMeta(def, product = null) { function getQtyStepMeta(def, product = null) {
const productPackSize = Number(product?.packSize); const productPackSize = Number(product?.packSize);
if (Number.isFinite(productPackSize) && productPackSize > 0) { if (Number.isFinite(productPackSize) && productPackSize > 0) {
@@ -152,17 +158,18 @@ function getQtyStepMeta(def, product = null) {
export function getIngredientCardHTML({ export function getIngredientCardHTML({
idBase, idBase,
overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5', overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
overlayStyle = 'pointer-events:none; background:rgba(var(--overlay-rgb),0.5);', overlayStyle = 'pointer-events:none;',
cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden', cardClass = 'calendar-liquid-panel relative w-full max-w-xs rounded-2xl overflow-hidden',
cardStyle = 'background:rgb(var(--app-bg-rgb)); pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;', cardStyle = 'pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
} = {}) { } = {}) {
if (!idBase) throw new Error('getIngredientCardHTML requires idBase'); if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
ensureCalendarPopoverStyles();
return ` return `
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}"> <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
<div id="${idBase}" class="${cardClass}" style="${cardStyle}"> <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
<div class="relative px-4 pt-4 pb-2"> <div class="relative px-4 pt-4 pb-2">
<div class="flex items-start gap-3 pr-10"> <div class="flex items-start gap-3 pr-10">
<div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:rgb(var(--card-rgb));"> <div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:transparent;">
<img id="${idBase}-img" class="w-full h-full hidden" alt="" /> <img id="${idBase}-img" class="w-full h-full hidden" alt="" />
<div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center"> <div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center">
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:rgb(var(--text-subdued-rgb));"></i> <i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:rgb(var(--text-subdued-rgb));"></i>
@@ -170,7 +177,7 @@ export function getIngredientCardHTML({
</div> </div>
<div class="flex-1 min-w-0 pt-0.5"> <div class="flex-1 min-w-0 pt-0.5">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<button type="button" id="${idBase}-back" class="hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika"> <button type="button" id="${idBase}-back" class="calendar-liquid-btn hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="color:rgb(var(--text-body-rgb));" aria-label="Wróć do składnika">
<i class="fas fa-chevron-left text-[9px]"></i> <i class="fas fa-chevron-left text-[9px]"></i>
</button> </button>
<p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:rgb(var(--success-rgb));"></p> <p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:rgb(var(--success-rgb));"></p>
@@ -179,7 +186,7 @@ export function getIngredientCardHTML({
<p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:rgb(var(--text-dim-rgb));"></p> <p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:rgb(var(--text-dim-rgb));"></p>
</div> </div>
</div> </div>
<button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgb(var(--card-rgb)); color:rgb(var(--text-body-rgb));" aria-label="Zamknij"> <button type="button" id="${idBase}-close" class="calendar-liquid-btn absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="color:rgb(var(--text-body-rgb));" aria-label="Zamknij">
<i class="fas fa-times text-sm"></i> <i class="fas fa-times text-sm"></i>
</button> </button>
</div> </div>
@@ -371,28 +378,28 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
<p class="text-[16px] font-bold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(stockValueLabel)}</p> <p class="text-[16px] font-bold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(stockValueLabel)}</p>
${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(stockSubLabel)}</p>` : ''} ${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(stockSubLabel)}</p>` : ''}
</div> </div>
<button type="button" class="ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.stockEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};"> <button type="button" class="calendar-liquid-btn ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.stockEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
${esc(actionLabel)} ${esc(actionLabel)}
</button> </button>
</div> </div>
${state.stockEditorOpen ? ` ${state.stockEditorOpen ? `
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));"> <div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu"> <button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
<i class="fas fa-minus text-xs"></i> <i class="fas fa-minus text-xs"></i>
</button> </button>
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));"> <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
<input type="number" min="0" step="${usesPackStep ? '1' : step}" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;"> <input type="text" inputmode="decimal" value="${draftInputValue}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
<span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(draftInputUnit)}</span> <span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(draftInputUnit)}</span>
</label> </label>
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu"> <button type="button" class="calendar-liquid-btn ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ szkic zapasu">
<i class="fas fa-plus text-xs"></i> <i class="fas fa-plus text-xs"></i>
</button> </button>
</div> </div>
${usesPackStep ? `<p class="text-[10px] mt-2 text-right" style="color:rgb(var(--text-dim-rgb));">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''} ${usesPackStep ? `<p class="text-[10px] mt-2 text-right" style="color:rgb(var(--text-dim-rgb));">${esc(formatQtyWithUnit(draftQty, def.pantryUnit))}</p>` : ''}
<div class="flex items-center justify-between gap-3 mt-3"> <div class="flex items-center justify-between gap-3 mt-3">
<button type="button" class="ingredient-card-stock-clear text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Wyzeruj</button> <button type="button" class="ingredient-card-stock-clear text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Wyzeruj</button>
<button type="button" class="ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button> <button type="button" class="calendar-liquid-btn ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
</div> </div>
</div>` : ''} </div>` : ''}
</div>`; </div>`;
@@ -420,8 +427,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => { wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => {
state.stockDraftQty = usesPackStep state.stockDraftQty = usesPackStep
? normalizeQty((Number(event.target.value) || 0) * step) ? normalizeQty(parseQtyInput(event.target.value) * step)
: normalizeQty(event.target.value); : parseQtyInput(event.target.value);
}); });
wrap.querySelector('.ingredient-card-stock-clear')?.addEventListener('click', () => { wrap.querySelector('.ingredient-card-stock-clear')?.addEventListener('click', () => {
@@ -432,8 +439,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
wrap.querySelector('.ingredient-card-stock-save')?.addEventListener('click', () => { wrap.querySelector('.ingredient-card-stock-save')?.addEventListener('click', () => {
const input = wrap.querySelector('.ingredient-card-stock-input'); const input = wrap.querySelector('.ingredient-card-stock-input');
const nextQty = usesPackStep const nextQty = usesPackStep
? normalizeQty((Number(input?.value) || 0) * step) ? normalizeQty(parseQtyInput(input?.value) * step)
: normalizeQty(input?.value ?? state.stockDraftQty ?? qty); : parseQtyInput(input?.value ?? state.stockDraftQty ?? qty);
if (product) { if (product) {
setPantryProductQty(def.id, product.id, nextQty); setPantryProductQty(def.id, product.id, nextQty);
} else { } else {
@@ -480,21 +487,21 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
<p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? 'rgb(var(--text-body-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(shopValueLabel)}</p> <p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? 'rgb(var(--text-body-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(shopValueLabel)}</p>
${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(shopSubLabel)}</p>` : ''} ${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(shopSubLabel)}</p>` : ''}
</div> </div>
<button type="button" class="ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.shopEditorOpen ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-soft-rgb))'}; color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};"> <button type="button" class="calendar-liquid-btn ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="color:${state.shopEditorOpen ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))'};">
${esc(actionLabel)} ${esc(actionLabel)}
</button> </button>
</div> </div>
${state.shopEditorOpen ? ` ${state.shopEditorOpen ? `
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));"> <div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście"> <button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="-1" aria-label="Zmniejsz ilość na liście">
<i class="fas fa-minus text-xs"></i> <i class="fas fa-minus text-xs"></i>
</button> </button>
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:rgb(var(--card-soft-rgb));"> <label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
<input type="number" min="0" step="${usesPackStep ? '1' : defaultAmount}" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;"> <input type="text" inputmode="decimal" value="${shopInputValue}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:rgb(var(--text-body-rgb)); background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
<span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(shopInputUnit)}</span> <span class="text-[12px] font-medium shrink-0" style="color:rgb(var(--text-dim-rgb));">${esc(shopInputUnit)}</span>
</label> </label>
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb)); color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście"> <button type="button" class="calendar-liquid-btn ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="color:rgb(var(--text-body-soft-rgb));" data-dir="1" aria-label="Zwiększ ilość na liście">
<i class="fas fa-plus text-xs"></i> <i class="fas fa-plus text-xs"></i>
</button> </button>
</div> </div>
@@ -503,7 +510,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
${hasShoppingItem ${hasShoppingItem
? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Usuń z listy</button>' ? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:rgb(var(--text-dim-rgb));">Usuń z listy</button>'
: '<span></span>'} : '<span></span>'}
<button type="button" class="ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:rgb(var(--text-body-rgb)); color:rgb(var(--app-bg-rgb));">Zapisz</button> <button type="button" class="calendar-liquid-btn ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="color:rgb(var(--text-emphasis-rgb));">Zapisz</button>
</div> </div>
</div>` : ''} </div>` : ''}
</div>`; </div>`;
@@ -531,8 +538,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => { wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => {
state.shopDraftQty = usesPackStep state.shopDraftQty = usesPackStep
? normalizeQty((Number(event.target.value) || 0) * step) ? normalizeQty(parseQtyInput(event.target.value) * step)
: normalizeQty(event.target.value); : parseQtyInput(event.target.value);
}); });
wrap.querySelector('.ingredient-card-shop-remove')?.addEventListener('click', () => { wrap.querySelector('.ingredient-card-shop-remove')?.addEventListener('click', () => {
@@ -549,8 +556,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
wrap.querySelector('.ingredient-card-shop-save')?.addEventListener('click', () => { wrap.querySelector('.ingredient-card-shop-save')?.addEventListener('click', () => {
const input = wrap.querySelector('.ingredient-card-shop-input'); const input = wrap.querySelector('.ingredient-card-shop-input');
const nextAmount = usesPackStep const nextAmount = usesPackStep
? normalizeQty((Number(input?.value) || 0) * step) ? normalizeQty(parseQtyInput(input?.value) * step)
: normalizeQty(input?.value ?? state.shopDraftQty ?? defaultAmount); : parseQtyInput(input?.value ?? state.shopDraftQty ?? defaultAmount);
let toastText = null; let toastText = null;
if (shoppingItem) { if (shoppingItem) {
updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount); updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);

129
js/views/Filter.js
View File

@@ -1,25 +1,28 @@
import { RECIPES } from '../data/catalog.js?v=9'; import { RECIPES, CATEGORY_LABELS } from '../data/catalog.js?v=9';
import { MEAL_SLOTS } from '../planner/mealSlots.js'; import { MEAL_SLOTS } from '../planner/mealSlots.js';
import { applyFilters, getFilterState } from './RecipeList.js'; import { applyFilters, getFilterState } from './RecipeList.js';
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
const PANTRY_CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
const PANTRY_SECTION_FILTERS = [
{ id: 'shortfalls', label: 'Potrzebne' },
{ id: 'sufficient', label: 'W spiżarni' },
{ id: 'notPlanned', label: 'Poza planem' },
];
const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease'; const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
const FILTER_SURFACE = 'rgb(var(--sunken-rgb))'; const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
const FILTER_SURFACE_SOFT = 'rgb(var(--app-bg-rgb))'; const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
const FILTER_BORDER = 'rgb(var(--border-input-rgb))'; const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
const FILTER_CHIP_ACTIVE_BG = 'rgb(var(--card-rgb))'; const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
const FILTER_TEXT_SECONDARY = 'rgb(var(--text-body-soft-rgb))';
const FILTER_TEXT_MUTED = 'rgb(var(--text-muted-rgb))';
const FILTER_TEXT_ACTIVE = 'rgb(var(--text-emphasis-rgb))';
const FILTER_TRACK = 'rgb(var(--card-rgb))';
const FILTER_TRACK_FILL = 'rgba(var(--border-input-rgb), 0.58)';
const PREP_TIME_MIN = 5; const PREP_TIME_MIN = 5;
const PREP_TIME_MAX = 120; const PREP_TIME_MAX = 120;
const PREP_TIME_STEP = 5; 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-topbar', 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,
@@ -61,6 +64,15 @@ export function getFilterHTML() {
pointer-events: auto; pointer-events: auto;
} }
#filter-panel::before {
display: none;
}
#filter-panel > * {
position: relative;
z-index: 1;
}
#filter-view .prep-time-range-track, #filter-view .prep-time-range-track,
#filter-view .prep-time-range-fill { #filter-view .prep-time-range-fill {
border-radius: 9999px; border-radius: 9999px;
@@ -71,15 +83,27 @@ export function getFilterHTML() {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 9999px; border-radius: 9999px;
border: 1px solid rgba(var(--text-emphasis-rgb),0.16); border: 1px solid rgba(255,255,255,0.34);
background: ${FILTER_TRACK_FILL}; background: rgba(var(--surface-rgb),0.42);
box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12); box-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
0 0 0 1px rgba(var(--overlay-rgb),0.1),
0 4px 10px rgba(var(--overlay-rgb),0.18);
touch-action: none; touch-action: none;
outline: none; outline: none;
} }
.dark #filter-view .prep-time-range-handle {
border-color: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.26);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
0 0 0 1px rgba(0,0,0,0.22),
0 4px 12px rgba(0,0,0,0.34);
}
</style> </style>
<div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true"> <div id="filter-view" class="filter-liquid-surface absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:var(--shadow-shell); width:min(calc(100% - 1.5rem), 22rem);"> <div id="filter-panel" class="filter-liquid-panel absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
<div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3"> <div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
<p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p> <p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
<button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button> <button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
@@ -174,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, maxMinutes) {
return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`; return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
} }
function getChipStyle(active) {
const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : '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}`;
}
function clampTimeValue(value) { function clampTimeValue(value) {
return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX); return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
} }
@@ -197,6 +211,12 @@ function getSliderPercent(value) {
return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100; return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100;
} }
function getClosedPanelTransform(panel) {
return panel?.dataset.placement === 'below'
? 'translateY(-0.5rem) scale(0.98)'
: 'translateY(0.65rem) scale(0.98)';
}
function setActiveTimeHandle(activeHandle) { function setActiveTimeHandle(activeHandle) {
const minHandle = document.getElementById('prep-time-min-handle'); const minHandle = document.getElementById('prep-time-min-handle');
const maxHandle = document.getElementById('prep-time-max-handle'); const maxHandle = document.getElementById('prep-time-max-handle');
@@ -244,19 +264,33 @@ function positionFilterPanel() {
const viewRect = view.getBoundingClientRect(); const viewRect = view.getBoundingClientRect();
const anchorRect = (searchShell || button).getBoundingClientRect(); const anchorRect = (searchShell || button).getBoundingClientRect();
const gap = 8; const isRecipeContext = activeFilterContext === 'recipes';
const gap = isRecipeContext ? 12 : 8;
const margin = 12; const margin = 12;
const width = Math.min(anchorRect.width, viewRect.width - margin * 2); const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap); const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
const left = Math.max( const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
margin, const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin), const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
); const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
const maxHeight = Math.max(220, viewRect.height - top - margin); const maxHeight = opensUpward
? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
: Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
const leftBase = isRecipeContext
? (viewRect.width - width) / 2
: anchorRect.left - viewRect.left;
const left = Math.max(margin, Math.min(leftBase, viewRect.width - width - margin));
panel.style.width = `${width}px`; panel.style.width = `${width}px`;
panel.style.left = `${left}px`; panel.style.left = `${left}px`;
panel.style.top = `${top}px`; panel.style.transformOrigin = opensUpward ? 'bottom center' : 'top center';
panel.dataset.placement = opensUpward ? 'above' : 'below';
if (opensUpward) {
panel.style.top = 'auto';
panel.style.bottom = `${Math.max(margin, viewRect.bottom - anchorRect.top + gap)}px`;
} else {
panel.style.top = `${Math.max(margin, anchorRect.bottom - viewRect.top + gap)}px`;
panel.style.bottom = 'auto';
}
panel.style.maxHeight = `${maxHeight}px`; panel.style.maxHeight = `${maxHeight}px`;
if (body) body.style.maxHeight = `${maxHeight - 56}px`; if (body) body.style.maxHeight = `${maxHeight - 56}px`;
} }
@@ -276,6 +310,7 @@ function showFilterPanel() {
view.style.pointerEvents = 'auto'; view.style.pointerEvents = 'auto';
view.setAttribute('aria-hidden', 'false'); view.setAttribute('aria-hidden', 'false');
positionFilterPanel(); positionFilterPanel();
panel.style.transform = getClosedPanelTransform(panel);
setRecipeAreaBlur(true); setRecipeAreaBlur(true);
syncPanelCount(); syncPanelCount();
@@ -296,7 +331,7 @@ function hideFilterPanel() {
view.style.pointerEvents = 'none'; view.style.pointerEvents = 'none';
view.setAttribute('aria-hidden', 'true'); view.setAttribute('aria-hidden', 'true');
panel.style.opacity = '0'; panel.style.opacity = '0';
panel.style.transform = 'translateY(-0.5rem) scale(0.98)'; panel.style.transform = getClosedPanelTransform(panel);
setRecipeAreaBlur(false); setRecipeAreaBlur(false);
syncPanelCount(); syncPanelCount();
@@ -315,7 +350,7 @@ function renderSlotChips() {
wrap.innerHTML = MEAL_SLOTS.map((slot) => { wrap.innerHTML = MEAL_SLOTS.map((slot) => {
const active = localSlots.includes(slot.id); const active = localSlots.includes(slot.id);
return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`; return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
}).join(''); }).join('');
wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => { wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
@@ -337,7 +372,7 @@ function renderTagChips() {
const allTags = collectAllTags(); const allTags = collectAllTags();
wrap.innerHTML = allTags.map((tag) => { wrap.innerHTML = allTags.map((tag) => {
const active = localTags.includes(tag.toLowerCase()); const active = localTags.includes(tag.toLowerCase());
return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`; return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(tag)}</button>`;
}).join(''); }).join('');
wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => { wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
@@ -373,9 +408,16 @@ function syncPanelCount() {
if (button) { if (button) {
const highlight = isFilterPanelOpen() || count > 0; const highlight = isFilterPanelOpen() || count > 0;
button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important'); const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important'); if (isRecipeGlassButton) {
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important'); button.style.removeProperty('background');
button.style.removeProperty('border-color');
button.style.removeProperty('color');
} else {
button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
}
} }
const badge = button?.querySelector('[id$="-filter-count"]'); const badge = button?.querySelector('[id$="-filter-count"]');
@@ -397,6 +439,7 @@ function syncLiveFilters() {
} }
export function setupFilter() { export function setupFilter() {
ensureFilterPopoverStyles();
const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement; const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
const minHandle = document.getElementById('prep-time-min-handle'); const minHandle = document.getElementById('prep-time-min-handle');
const maxHandle = document.getElementById('prep-time-max-handle'); const maxHandle = document.getElementById('prep-time-max-handle');

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>

323
js/views/Pantry.js
View File

@@ -16,6 +16,7 @@ import {
syncCalendarPopoverVisibility, syncCalendarPopoverVisibility,
} from '../ui/calendarPopover.js'; } from '../ui/calendarPopover.js';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116'; import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
/* ── helpers ── */ /* ── helpers ── */
@@ -50,16 +51,6 @@ function getActivePantryFilterCount() {
return pantryFilters.categories.length + pantryFilters.sections.length; 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 = { const CATEGORY_ICONS = {
pieczywo: 'fa-bread-slice', pieczywo: 'fa-bread-slice',
nabial: 'fa-cheese', nabial: 'fa-cheese',
@@ -83,7 +74,7 @@ const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'w
const DEFAULT_HORIZON_DAYS = 7; const DEFAULT_HORIZON_DAYS = 7;
const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))'; const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
const PANTRY_CALENDAR_THEME = { const PANTRY_CALENDAR_THEME = {
bg: 'rgb(var(--app-bg-rgb))', bg: 'rgba(255,255,255,0.08)',
border: 'rgb(var(--card-raised-rgb))', border: 'rgb(var(--card-raised-rgb))',
text: 'rgb(var(--text-body-soft-rgb))', text: 'rgb(var(--text-body-soft-rgb))',
dimText: 'rgb(var(--text-faint-rgb))', dimText: 'rgb(var(--text-faint-rgb))',
@@ -101,12 +92,13 @@ const PANTRY_CALENDAR_THEME = {
let ingredientCard = null; let ingredientCard = null;
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1); let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
let isSearchExpanded = false;
let isCalendarOpen = false; let isCalendarOpen = false;
let isFilterOpen = false; let isFilterOpen = false;
let calendarMonthAnchor = startOfMonth(horizonEndDate); let calendarMonthAnchor = startOfMonth(horizonEndDate);
let pantryGlobalListenersBound = false; let pantryGlobalListenersBound = false;
let pantryCalendar = null; let pantryCalendar = null;
let pantrySearchQuery = '';
let pantrySearchOpen = false;
let pantryFilters = { let pantryFilters = {
categories: [], categories: [],
sections: [], sections: [],
@@ -169,63 +161,96 @@ function photoStripMedia(image, icon, accentBg) {
export function getPantryHTML() { export function getPantryHTML() {
return ` 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;"> <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;">
<style id="pantry-view-styles">
.pv2-tile {
background: rgba(var(--surface-rgb), 0.62) !important;
border: 1px solid rgba(255, 255, 255, 0.26) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.48),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.04),
0 1px 2px rgba(var(--overlay-rgb), 0.06),
0 6px 14px rgba(var(--overlay-rgb), 0.1) !important;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
<!-- ── floating top bar ── --> .dark .pv2-tile {
<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;"> background: rgba(255, 255, 255, 0.06) !important;
<div class="pointer-events-auto relative z-[1] w-full"> border-color: rgba(255, 255, 255, 0.1) !important;
<div id="pantry-topbar" class="relative min-h-12"> box-shadow:
<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);"> inset 0 1px 0 rgba(255, 255, 255, 0.18),
<div id="pantry-horizon-wrap" class="relative shrink"> inset 0 -1px 0 rgba(0, 0, 0, 0.22),
<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;"> 0 2px 4px rgba(0, 0, 0, 0.24),
<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> 0 8px 18px rgba(0, 0, 0, 0.3) !important;
<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"> .pv2-track {
<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));"> background: rgba(var(--overlay-rgb), 0.12);
<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);"> .dark .pv2-track {
<div class="flex items-center justify-between gap-3 px-0.5 pb-3"> background: rgba(255, 255, 255, 0.1);
<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));"> </style>
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));"> <!-- ── floating horizon pill above bottom nav ── -->
<i class="fas fa-search text-[13px]"></i> <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;">
</button> <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));">
</div> <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-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
${createCalendarPopoverHTML({ </button>
${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 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);"> <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));">
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i> <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">
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…" <i class="fas fa-sliders-h" aria-hidden="true"></i>
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;"> <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 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));"> </button>
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>
</div>
</div> </div>
</div> </div>
<!-- ── scrollable content ── --> <!-- ── scrollable content ── -->
<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-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) ── -->
<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">
<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-[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">
<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>
<span id="pantry-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
</button>
</div>
<div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
<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;">
</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 id="pantry-right-btn-icon" 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> </div>
${getIngredientCardHTML({ idBase: 'pv2-card' })}`; ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
} }
@@ -235,59 +260,63 @@ export function getPantryHTML() {
function syncHorizonUI() { function syncHorizonUI() {
ensureValidHorizonDate(); ensureValidHorizonDate();
const defaultRow = document.getElementById('pantry-default-row');
const searchShell = document.getElementById('pantry-search-shell');
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 filterToggle = document.getElementById('pantry-filter-toggle');
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 searchShell = document.getElementById('pantry-search-shell');
const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
const rightBtn = document.getElementById('pantry-filter-bottom-btn');
const rightIcon = document.getElementById('pantry-right-btn-icon');
const searchDot = document.getElementById('pantry-search-active-dot');
const compactLabel = document.getElementById('pantry-horizon-compact-label'); const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact'); const compactPill = document.getElementById('pantry-horizon-compact');
const chevron = document.getElementById('pantry-horizon-chevron'); const chevron = document.getElementById('pantry-horizon-chevron');
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate); if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
const showCalendar = isCalendarOpen && !isSearchExpanded;
const showDefault = !isSearchExpanded;
const showFilter = isFilterOpen && showDefault;
const activeFilterCount = getActivePantryFilterCount(); 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({ syncCalendarPopoverVisibility({
popup: popover, popup: popover,
isOpen: showCalendar, isOpen: isCalendarOpen,
chevron, chevron,
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
trigger: compactPill, trigger: compactPill,
openTriggerStyle: {},
closedTriggerStyle: {},
triggerImportant: true, triggerImportant: true,
}); });
if (filterPopover) { if (filterPopover) {
filterPopover.style.opacity = showFilter ? '1' : '0'; filterPopover.style.opacity = isFilterOpen ? '1' : '0';
filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)'; filterPopover.style.transform = isFilterOpen
filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none'; ? 'translateX(-50%) translateY(0) scale(1)'
} : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
if (filterToggle) { filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
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');
} }
if (filterCount) { if (filterCount) {
filterCount.textContent = String(activeFilterCount); filterCount.textContent = String(activeFilterCount);
filterCount.classList.toggle('hidden', activeFilterCount === 0); filterCount.classList.toggle('hidden', true);
filterCount.classList.toggle('flex', 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 (searchShell) { if (searchShell) {
searchShell.style.opacity = isSearchExpanded ? '1' : '0'; searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)'; searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none'; searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
} }
if (rightIcon) rightIcon.className = 'fas fa-xmark';
if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
renderCalendarPopover(); renderCalendarPopover();
renderFilterPopover(); renderFilterPopover();
@@ -377,26 +406,35 @@ function renderFilterPopover() {
`; `;
} }
function closeSearch() { function clearSearchInput() {
const input = document.getElementById('pantry-search'); const hadQuery = Boolean(pantrySearchQuery);
const hadQuery = Boolean(input?.value); pantrySearchQuery = '';
if (input) {
input.value = '';
input.blur();
}
isSearchExpanded = false;
syncHorizonUI();
if (hadQuery) renderBoard(); if (hadQuery) renderBoard();
} }
function openSearch() { function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
isSearchExpanded = true; const hadQuery = Boolean(pantrySearchQuery);
isCalendarOpen = false; pantrySearchOpen = open;
isFilterOpen = false; if (open) {
isCalendarOpen = false;
isFilterOpen = false;
}
document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
if (clearQuery) pantrySearchQuery = '';
const input = document.getElementById('pantry-search-input');
if (input) {
if (open) {
input.value = pantrySearchQuery;
if (focusInput) {
input.focus();
input.setSelectionRange(input.value.length, input.value.length);
}
} else {
input.blur();
}
}
syncHorizonUI(); syncHorizonUI();
window.requestAnimationFrame(() => { if (clearQuery && hadQuery) renderBoard();
document.getElementById('pantry-search')?.focus();
});
} }
function closeCalendar() { function closeCalendar() {
@@ -409,7 +447,6 @@ function closeCalendar() {
function openCalendar() { function openCalendar() {
ensureValidHorizonDate(); ensureValidHorizonDate();
calendarMonthAnchor = startOfMonth(horizonEndDate); calendarMonthAnchor = startOfMonth(horizonEndDate);
isSearchExpanded = false;
isFilterOpen = false; isFilterOpen = false;
isCalendarOpen = true; isCalendarOpen = true;
syncHorizonUI(); syncHorizonUI();
@@ -426,8 +463,8 @@ function closeFilter() {
} }
function toggleFilterPanel() { function toggleFilterPanel() {
if (pantrySearchOpen) return;
isCalendarOpen = false; isCalendarOpen = false;
isSearchExpanded = false;
isFilterOpen = !isFilterOpen; isFilterOpen = !isFilterOpen;
syncHorizonUI(); syncHorizonUI();
} }
@@ -525,8 +562,8 @@ function classifyIngredients(searchQuery) {
/* ══════════════════════ TILE RENDERING ══════════════════════ */ /* ══════════════════════ TILE RENDERING ══════════════════════ */
function tileIconHtml(item, size = 'sm') { function tileIconHtml(item, size = 'sm') {
const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6'; const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]'; const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
if (item.image) { if (item.image) {
return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`; return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
} }
@@ -536,12 +573,12 @@ function tileIconHtml(item, size = 'sm') {
function shortfallTileHtml(item) { function shortfallTileHtml(item) {
const clamp = item.name.length > 25 ? ' min-w-0' : ''; const clamp = item.name.length > 25 ? ' min-w-0' : '';
return ` return `
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}"> <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
${tileIconHtml(item, 'lg')} ${tileIconHtml(item, 'lg')}
<div class="flex-1 min-w-0 flex flex-col gap-1"> <div class="flex-1 min-w-0 flex flex-col gap-1">
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));"> <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
<div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div> <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
</div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span> <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -553,12 +590,12 @@ function shortfallTileHtml(item) {
function sufficientTileHtml(item) { function sufficientTileHtml(item) {
const clamp = item.name.length > 25 ? ' min-w-0' : ''; const clamp = item.name.length > 25 ? ' min-w-0' : '';
return ` return `
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}"> <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
${tileIconHtml(item, 'lg')} ${tileIconHtml(item, 'lg')}
<div class="flex-1 min-w-0 flex flex-col gap-1"> <div class="flex-1 min-w-0 flex flex-col gap-1">
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));"> <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
<div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div> <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
</div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span> <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -571,7 +608,7 @@ function notPlannedChipHtml(item) {
const hasStock = item.qty > 0; const hasStock = item.qty > 0;
const clamp = item.name.length > 25 ? ' min-w-0' : ''; const clamp = item.name.length > 25 ? ' min-w-0' : '';
return ` return `
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}"> <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
${tileIconHtml(item)} ${tileIconHtml(item)}
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p>
<span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span> <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
@@ -592,7 +629,7 @@ function renderBoard() {
const root = document.getElementById('pantry-board'); const root = document.getElementById('pantry-board');
if (!root) return; if (!root) return;
const q = document.getElementById('pantry-search')?.value || ''; const q = pantrySearchQuery;
const hasFilters = hasActivePantryFilters(); const hasFilters = hasActivePantryFilters();
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q); const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
@@ -671,6 +708,8 @@ export function refreshPantry() {
} }
export function setupPantry() { export function setupPantry() {
ensureFilterPopoverStyles();
if (!ingredientCard) { if (!ingredientCard) {
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' }); ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
ingredientCard.bind(); ingredientCard.bind();
@@ -679,26 +718,32 @@ export function setupPantry() {
syncHorizonUI(); syncHorizonUI();
renderBoard(); renderBoard();
// Scroll shadow under top bar
const pantryScroll = document.getElementById('pantry-scroll');
const topbarOuter = document.getElementById('pantry-topbar-outer');
if (pantryScroll && topbarOuter) {
const shadow = document.createElement('div');
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
topbarOuter.appendChild(shadow);
pantryScroll.addEventListener('scroll', () => {
shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
});
}
// Search // Search
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard()); document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => { event.stopPropagation();
if (event.key === 'Escape') closeSearch(); setPantrySearchOpen(true, { focusInput: true });
});
document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
pantrySearchQuery = event.target.value.trim();
renderBoard();
});
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
event.stopPropagation();
setPantrySearchOpen(false, { clearQuery: true });
});
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
}
});
document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) return;
closeCalendar();
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) => { document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
pantryFilters = { categories: [], sections: [] }; pantryFilters = { categories: [], sections: [] };
@@ -750,10 +795,30 @@ 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-wrap')) { if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
closeFilter(); closeFilter();
} }
}); });
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
return;
}
if (pantrySearchQuery) clearSearchInput();
if (isFilterOpen) closeFilter();
});
window.addEventListener('app-tab-change', () => {
if (pantrySearchOpen) setPantrySearchOpen(false);
closeFilter();
closeCalendar();
});
window.closePantrySearch = () => {
if (pantrySearchOpen) setPantrySearchOpen(false);
};
window.closePantryFilter = () => {
closeFilter();
};
} }
window.refreshPantry = refreshPantry; window.refreshPantry = refreshPantry;

207
js/views/RecipeList.js
View File

@@ -12,8 +12,8 @@ let filterState = {
maxMinutes: DEFAULT_MAX_MINUTES, maxMinutes: DEFAULT_MAX_MINUTES,
}; };
let isSearchExpanded = false;
let recipeListDocListenersBound = false; let recipeListDocListenersBound = false;
let recipeSearchOpen = false;
function matchesFilters(recipe) { function matchesFilters(recipe) {
const { query, slots, tags, minMinutes, maxMinutes } = filterState; const { query, slots, tags, minMinutes, maxMinutes } = filterState;
@@ -43,53 +43,80 @@ 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() {
const searchShell = document.getElementById('recipe-search-shell'); syncRecipeTopbarUI();
if (searchShell) {
searchShell.style.boxShadow = 'var(--shadow-shell)';
}
} }
function syncRecipeTopbarUI() { function syncRecipeTopbarUI() {
const defaultRow = document.getElementById('recipe-default-row'); 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 showSearch = isSearchExpanded; const rightBtn = document.getElementById('recipe-filter-btn');
const rightIcon = document.getElementById('recipe-right-btn-icon');
if (defaultRow) { const filterCount = document.getElementById('recipe-filter-count');
defaultRow.style.opacity = showSearch ? '0' : '1'; const floatingFilterCount = document.getElementById('recipe-filter-float-count');
defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)'; const dot = document.getElementById('recipe-search-active-dot');
defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto'; const isOpen = recipeSearchOpen;
} if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
if (searchShell) { if (searchShell) {
searchShell.style.opacity = showSearch ? '1' : '0'; searchShell.style.opacity = isOpen ? '1' : '0';
searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)'; searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
searchShell.style.pointerEvents = showSearch ? 'auto' : 'none'; searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
searchShell.style.boxShadow = 'var(--shadow-shell)'; }
if (rightIcon) {
rightIcon.className = 'fas fa-xmark';
}
if (rightBtn) {
rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
}
if (rightWrap) {
rightWrap.classList.toggle('hidden', !isOpen);
}
if (filterCount) {
const showCount = false;
filterCount.classList.toggle('hidden', !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) {
const hasQuery = Boolean(filterState.query);
dot.classList.toggle('hidden', !hasQuery);
} }
} }
function closeSearch() { function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(filterState.query);
recipeSearchOpen = open;
if (open) window.closeFilters?.();
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
if (clearQuery) {
filterState.query = '';
}
const input = document.getElementById('recipe-search-input'); const input = document.getElementById('recipe-search-input');
const hadQuery = Boolean(input?.value);
if (input) { if (input) {
input.value = ''; if (open) {
input.blur(); input.value = filterState.query;
if (focusInput) {
input.focus();
input.setSelectionRange(input.value.length, input.value.length);
}
} else {
input.blur();
}
} }
filterState.query = '';
isSearchExpanded = false;
syncRecipeTopbarUI(); syncRecipeTopbarUI();
if (hadQuery) renderGrid(); if (clearQuery && hadQuery) renderGrid();
}
function openSearch() {
isSearchExpanded = true;
window.closeFilters?.();
syncRecipeTopbarUI();
window.requestAnimationFrame(() => {
document.getElementById('recipe-search-input')?.focus();
});
} }
function renderGrid() { function renderGrid() {
@@ -102,7 +129,7 @@ function renderGrid() {
emptyStateEl: emptyState, emptyStateEl: emptyState,
recipes: getFilteredRecipes(), recipes: getFilteredRecipes(),
showSlotLabels: false, showSlotLabels: false,
cardClassName: 'recipe-list-card', cardClassName: 'recipe-list-card recipe-catalog-card',
}); });
syncRecipeTopbarUI(); syncRecipeTopbarUI();
requestAnimationFrame(syncRecipeScrollShadow); requestAnimationFrame(syncRecipeScrollShadow);
@@ -111,44 +138,43 @@ function renderGrid() {
export function getRecipeListHTML() { export function getRecipeListHTML() {
return ` return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;"> <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
<div id="recipe-top-bar" 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="recipe-topbar" class="relative min-h-12">
<div id="recipe-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="recipe-filter-wrap" class="relative shrink-0">
<button type="button" id="recipe-filter-btn" 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));" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
<span id="recipe-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>
<button type="button" id="recipe-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));" aria-label="Szukaj">
<i class="fas fa-search text-[13px]" aria-hidden="true"></i>
</button>
</div>
<div id="recipe-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="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
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="recipe-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>
${getRecipeGridSectionHTML({ ${getRecipeGridSectionHTML({
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-[5.35rem] 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.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">
<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>
<span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
</button>
</div>
<div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
<input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
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;">
</div>
<div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
<button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
<i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
<span id="recipe-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 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>
`; `;
} }
@@ -173,23 +199,28 @@ export function refreshRecipeList() {
export function setupRecipeList() { export function setupRecipeList() {
renderGrid(); renderGrid();
document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
setSearchOpen(true, { focusInput: true });
});
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => { document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
filterState.query = e.target.value.trim(); filterState.query = e.target.value.trim();
renderGrid(); renderGrid();
}); });
document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => { document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeSearch(); if (e.key !== 'Escape') return;
e.stopPropagation();
setSearchOpen(false, { clearQuery: true });
}); });
document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => { document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
if (isSearchExpanded) { if (recipeSearchOpen) {
isSearchExpanded = false; setSearchOpen(false, { clearQuery: true });
syncRecipeTopbarUI();
} }
});
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
if (recipeSearchOpen) return;
window.openFilters?.('recipes'); window.openFilters?.('recipes');
}); });
@@ -200,24 +231,24 @@ export function setupRecipeList() {
if (recipeId) window.openRecipeDetail?.(recipeId); if (recipeId) window.openRecipeDetail?.(recipeId);
}); });
const recipeScroll = document.getElementById('recipe-scroll');
const recipeTopBar = document.getElementById('recipe-top-bar');
if (recipeScroll && recipeTopBar) {
const shadow = document.createElement('div');
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
recipeTopBar.appendChild(shadow);
recipeScroll.addEventListener('scroll', () => {
shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
});
}
if (!recipeListDocListenersBound) { if (!recipeListDocListenersBound) {
recipeListDocListenersBound = true; recipeListDocListenersBound = true;
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key !== 'Escape' || !isSearchExpanded) return; const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
if (!document.getElementById('main-view')?.classList.contains('hidden')) { if (e.key !== 'Escape') return;
closeSearch(); if (isRecipeViewVisible) {
if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
} }
}); });
window.addEventListener('app-tab-change', () => {
if (recipeSearchOpen) setSearchOpen(false);
syncRecipeTopbarUI();
});
window.closeRecipeSearch = () => {
if (recipeSearchOpen) setSearchOpen(false);
syncRecipeTopbarUI();
};
} }
} }

56
js/views/ShoppingList.js
View File

@@ -18,6 +18,7 @@ import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js'; import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js'; import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
import { showAppToast } from '../ui/toast.js'; import { showAppToast } from '../ui/toast.js';
import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';
/* ── helpers ── */ /* ── helpers ── */
@@ -118,33 +119,41 @@ 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 above bottom nav ── -->
<!-- ── header ── --> <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 class="shrink-0 px-4 pt-5 pb-0"> <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">
<!-- title row + pill + bought button (position:relative anchors the popups) -->
<div class="flex items-center justify-end gap-2 mb-4" style="position:relative;">
<button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
<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 type="button" id="sl-bought-btn" class="relative h-10 w-10 rounded-full flex items-center justify-center transition-all shrink-0" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);" aria-label="Kupione">
<i class="fas fa-check text-[13px]" style="color:rgb(var(--text-body-rgb));"></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>
</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>
<!-- popup bought (absolute, overlays content below) --> <!-- ── scrollable list ── -->
<div id="sl-bought-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;"> <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 class="rounded-[1.35rem] px-3 py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);"> <div id="sl-board"></div>
</div>
<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-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">
<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>
</button>
<!-- popup bought (absolute, overlays content above controls) -->
<div id="sl-bought-popup" style="position:absolute; bottom:calc(100% + 0.5rem); right:0; width:min(calc(100vw - 1.5rem), 22rem); z-index:50; pointer-events:none; opacity:0; transform:translateY(6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
<div class="filter-liquid-surface filter-liquid-panel rounded-[1.35rem] px-3 py-3">
<div class="flex items-center justify-between mb-2 px-1"> <div class="flex items-center justify-between mb-2 px-1">
<span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span> <span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span>
<button type="button" id="sl-clear-session" 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="sl-clear-session" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
@@ -156,11 +165,6 @@ export function getShoppingListHTML() {
</div> </div>
</div> </div>
</div> </div>
<!-- ── scrollable list ── -->
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
<div id="sl-board"></div>
</div>
</div>`; </div>`;
} }
@@ -192,7 +196,7 @@ function initShoppingCalendar() {
selectedText: 'rgb(var(--text-emphasis-rgb))', selectedText: 'rgb(var(--text-emphasis-rgb))',
selectedDot: 'rgb(var(--text-emphasis-rgb))', selectedDot: 'rgb(var(--text-emphasis-rgb))',
selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)', selectedShadow: '0 0 0 1px rgba(var(--text-emphasis-rgb),0.10)',
bg: 'rgb(var(--app-bg-rgb))', bg: 'rgba(255,255,255,0.08)',
border: 'transparent', border: 'transparent',
text: 'rgb(var(--text-body-soft-rgb))', text: 'rgb(var(--text-body-soft-rgb))',
dimmedBg: 'transparent', dimmedBg: 'transparent',
@@ -206,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,
}); });
@@ -255,7 +261,7 @@ function closeBoughtPopup() {
if (popup) { if (popup) {
popup.style.pointerEvents = 'none'; popup.style.pointerEvents = 'none';
popup.style.opacity = '0'; popup.style.opacity = '0';
popup.style.transform = 'translateY(-6px) scale(0.98)'; popup.style.transform = 'translateY(6px) scale(0.98)';
} }
if (btn) { if (btn) {
btn.style.background = 'rgb(var(--card-rgb))'; btn.style.background = 'rgb(var(--card-rgb))';
@@ -576,6 +582,8 @@ export function refreshShoppingList() {
} }
export function setupShoppingList() { export function setupShoppingList() {
ensureFilterPopoverStyles();
if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays()); if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
updatePillLabel(); updatePillLabel();
@@ -616,5 +624,7 @@ export function setupShoppingList() {
renderAll(); renderAll();
}); });
window.closeShoppingCalendar = () => closeCalendar();
window.closeShoppingBoughtPopup = () => closeBoughtPopup();
window.refreshShoppingList = refreshShoppingList; window.refreshShoppingList = refreshShoppingList;
} }