Compare commits
15 Commits
8702830f68
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 6f902098a8 | |||
| 6d6194df37 | |||
| 68e5227db1 | |||
| 544df5175d | |||
| 53a7212dfe | |||
| ded24b53b4 | |||
| 3d62d88d48 | |||
| b9538a35b6 | |||
| 120959365e | |||
| 7049cb1d48 | |||
| bc505d6b4c | |||
| 7328b6ec4c | |||
| 2f362a7e56 | |||
| e914f93781 | |||
| 5499476a17 |
693
index.html
693
index.html
@@ -383,11 +383,68 @@
|
||||
font-size: 0.54rem;
|
||||
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,
|
||||
#planner-picker-grid > *:hover {
|
||||
transform: translateY(-2px);
|
||||
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,
|
||||
#planner-picker-grid > * img {
|
||||
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%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell {
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
#recipe-search-shell,
|
||||
#pantry-search-shell {
|
||||
isolation: auto;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell::after {
|
||||
#recipe-search-shell::after,
|
||||
#pantry-search-shell::after {
|
||||
display: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell,
|
||||
#recipe-topbar #recipe-search-shell:focus-within {
|
||||
background: rgb(var(--sunken-rgb)) !important;
|
||||
border: 1px solid rgb(var(--border-input-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
#recipe-bottom-controls,
|
||||
#recipe-bottom-default-actions,
|
||||
#pantry-bottom-controls,
|
||||
#shopping-bottom-controls {
|
||||
bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
|
||||
height: var(--recipe-bottom-control-size, 3.9rem) !important;
|
||||
background: transparent !important;
|
||||
border: 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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
#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 {
|
||||
min-height: 3rem;
|
||||
width: min(calc(100% - 0.5rem), 22.4rem);
|
||||
@@ -476,6 +738,90 @@
|
||||
inset 0 2px 7px rgba(var(--overlay-rgb), 0.18),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
#planner-view #planner-cal-bar {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0 !important;
|
||||
z-index: 20;
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
border-bottom: 1px solid rgba(var(--line-rgb), 0.08) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #planner-view #planner-cal-bar {
|
||||
background: rgba(35, 34, 32, 0.5) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
#planner-view #calendar-swipe-zone,
|
||||
#planner-view #calendar-week-wrap,
|
||||
#planner-view #calendar-month-wrap {
|
||||
background: transparent !important;
|
||||
}
|
||||
#planner-view #planner-scroll {
|
||||
padding-top: 10rem !important;
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal {
|
||||
background: rgba(var(--overlay-rgb), 0.05) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.28) !important;
|
||||
color: rgb(var(--text-body-soft-rgb)) !important;
|
||||
backdrop-filter: blur(18px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
|
||||
0 1px 3px rgba(var(--overlay-rgb), 0.08);
|
||||
transition: background-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal:hover {
|
||||
background: rgba(var(--overlay-rgb), 0.1) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
#planner-meal-slots .planner-add-meal:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-add-meal {
|
||||
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.12),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-add-meal:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
#planner-meal-slots > div[data-slot-id] {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(var(--overlay-rgb), 0.08),
|
||||
0 14px 32px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
}
|
||||
#planner-meal-slots > div[data-slot-id] > div:first-child {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.dark #planner-meal-slots > div[data-slot-id] {
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.22),
|
||||
0 14px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
.dark #planner-meal-slots > div[data-slot-id] > div:first-child {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
#planner-meal-slots .planner-kcal-pill {
|
||||
background: rgba(var(--overlay-rgb), 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06);
|
||||
}
|
||||
.dark #planner-meal-slots .planner-kcal-pill {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
#planner-picker-search {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -489,8 +835,7 @@
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
#planner-picker-search::placeholder,
|
||||
#pantry-search::placeholder {
|
||||
#planner-picker-search::placeholder {
|
||||
color: rgba(var(--text-body-soft-rgb), 0.72) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -536,28 +881,173 @@
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
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;
|
||||
justify-content: center;
|
||||
padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
|
||||
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 {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: min(calc(100% - 2.4rem), 24.5rem);
|
||||
height: 3.34rem;
|
||||
width: var(--dock-width);
|
||||
height: var(--recipe-bottom-control-size, 3.9rem);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 0.06rem;
|
||||
padding: 0.22rem;
|
||||
border-radius: 1.68rem;
|
||||
background: rgb(var(--card-rgb));
|
||||
border: 1px solid rgb(var(--border-card-rgb));
|
||||
gap: 0.02rem;
|
||||
padding: 0.28rem;
|
||||
border-radius: var(--dock-radius);
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
box-shadow:
|
||||
inset 0 1px 8px rgba(var(--overlay-rgb), 0.15),
|
||||
var(--shadow-shell);
|
||||
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;
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-slot {
|
||||
min-width: 0;
|
||||
@@ -565,6 +1055,17 @@
|
||||
display: flex;
|
||||
align-items: 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-action {
|
||||
@@ -573,14 +1074,16 @@
|
||||
border: 0;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
width: 2.18rem;
|
||||
height: 2.18rem;
|
||||
width: 2.33rem;
|
||||
height: 2.33rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 1.35rem;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 0.16rem;
|
||||
flex: 0 0 auto;
|
||||
color: rgba(var(--text-primary-rgb), 0.94);
|
||||
cursor: pointer;
|
||||
@@ -592,9 +1095,34 @@
|
||||
}
|
||||
#app-bottom-nav .nav-tab i,
|
||||
#app-bottom-nav .nav-action i {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1;
|
||||
}
|
||||
#app-bottom-nav .nav-label {
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.18;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active::after {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.18;
|
||||
content: "";
|
||||
}
|
||||
#app-bottom-nav #nav-planner.is-active::after { content: "Planer"; }
|
||||
#app-bottom-nav #nav-recipes.is-active::after { content: "Katalog"; }
|
||||
#app-bottom-nav #nav-pantry.is-active::after { content: "Spiżarnia"; }
|
||||
#app-bottom-nav #nav-shopping.is-active::after { content: "Zakupy"; }
|
||||
#app-bottom-nav .nav-tab:hover,
|
||||
#app-bottom-nav .nav-action:hover {
|
||||
transform: translateY(-1px);
|
||||
@@ -602,12 +1130,40 @@
|
||||
background: var(--hover-overlay) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: min(100%, 4rem);
|
||||
height: 3.15rem;
|
||||
padding: 0.32rem 0.22rem 0.28rem;
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
border-radius: 1.46rem;
|
||||
box-shadow: none !important;
|
||||
background: rgba(var(--overlay-rgb), 0.24) !important;
|
||||
border-radius: 999px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active .nav-label {
|
||||
display: none;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active i {
|
||||
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 {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.26) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab:active,
|
||||
#app-bottom-nav .nav-action:active {
|
||||
@@ -622,24 +1178,63 @@
|
||||
@media (max-width: 380px) {
|
||||
#app-bottom-nav {
|
||||
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 {
|
||||
width: min(calc(100% - 1.6rem), 22.5rem);
|
||||
height: 3.12rem;
|
||||
gap: 0.05rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 1.56rem;
|
||||
width: var(--dock-width);
|
||||
height: var(--recipe-bottom-control-size, 3.78rem);
|
||||
gap: 0.01rem;
|
||||
padding: 0.24rem;
|
||||
border-radius: var(--dock-radius);
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
width: 2.02rem;
|
||||
height: 2.02rem;
|
||||
border-radius: 1.28rem;
|
||||
width: 2.18rem;
|
||||
height: 2.18rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 1.36rem;
|
||||
width: min(100%, 3.72rem);
|
||||
height: 2.88rem;
|
||||
padding: 0.24rem 0.18rem 0.2rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
#app-bottom-nav .nav-label {
|
||||
font-size: 0.56rem;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active::after {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -686,7 +1281,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const APP_ASSET_VERSION = '20260417-svg7';
|
||||
const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
|
||||
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
|
||||
const APP_VERSION_QUERY_KEY = 'appv';
|
||||
|
||||
|
||||
@@ -1,25 +1,32 @@
|
||||
export function getBottomNavHTML() {
|
||||
return `
|
||||
<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">
|
||||
<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>
|
||||
<span class="nav-label">Planer</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
|
||||
<i class="fas fa-book-open" aria-hidden="true"></i>
|
||||
<span class="nav-label">Katalog</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
|
||||
<i class="fas fa-warehouse" aria-hidden="true"></i>
|
||||
<span class="nav-label">Spiżarnia</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot" style="position:relative;">
|
||||
<button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
|
||||
<i class="fas fa-cart-shopping" aria-hidden="true"></i>
|
||||
<span class="nav-label">Zakupy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,12 +43,130 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
|
||||
if (!main || !planner || !pantry || !shopping || !nav) return;
|
||||
|
||||
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 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');
|
||||
planner.classList.toggle('hidden', tab !== 'planner');
|
||||
pantry.classList.toggle('hidden', tab !== 'pantry');
|
||||
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 === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
|
||||
@@ -56,17 +181,60 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
|
||||
else btn.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
|
||||
previousTab = tab;
|
||||
};
|
||||
|
||||
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]');
|
||||
if (!btn || btn.hasAttribute('disabled')) return;
|
||||
const tab = btn.getAttribute('data-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');
|
||||
|
||||
window.switchAppTab = (tab) => {
|
||||
if (TABS.includes(tab)) apply(tab);
|
||||
};
|
||||
|
||||
window.refreshStockViews = () => {
|
||||
if (typeof refreshPantry === 'function') refreshPantry();
|
||||
};
|
||||
|
||||
@@ -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_STYLE = 'opacity:0; transform:translateY(-6px) scale(0.98);';
|
||||
const DEFAULT_PANEL_CLASS = '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_CLASS = 'calendar-liquid-panel rounded-[1.35rem] py-3';
|
||||
const DEFAULT_PANEL_STYLE = 'background-image:none !important;';
|
||||
|
||||
const DEFAULT_OPEN_TRIGGER_STYLE = {
|
||||
background: 'rgb(var(--sunken-rgb))',
|
||||
@@ -13,6 +14,101 @@ const DEFAULT_CLOSED_TRIGGER_STYLE = {
|
||||
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) {
|
||||
if (!idOrElement) return null;
|
||||
if (typeof idOrElement === 'string') return document.getElementById(idOrElement);
|
||||
@@ -40,6 +136,7 @@ export function createCalendarPopoverHTML({
|
||||
panelStyle = DEFAULT_PANEL_STYLE,
|
||||
wrapInPanel = true,
|
||||
}) {
|
||||
ensureCalendarPopoverStyles();
|
||||
const body = wrapInPanel
|
||||
? `<div class="${panelClass}" style="${panelStyle}">${calendarHTML}</div>`
|
||||
: calendarHTML;
|
||||
@@ -54,6 +151,8 @@ export function syncCalendarPopoverVisibility({
|
||||
popup,
|
||||
isOpen,
|
||||
chevron,
|
||||
chevronOpenTransform = 'rotate(180deg)',
|
||||
chevronClosedTransform = 'rotate(0deg)',
|
||||
trigger,
|
||||
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
|
||||
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
|
||||
@@ -67,7 +166,7 @@ export function syncCalendarPopoverVisibility({
|
||||
}
|
||||
|
||||
const chevronEl = byId(chevron);
|
||||
if (chevronEl) chevronEl.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
if (chevronEl) chevronEl.style.transform = isOpen ? chevronOpenTransform : chevronClosedTransform;
|
||||
|
||||
setStyles(
|
||||
byId(trigger),
|
||||
@@ -118,6 +217,8 @@ export function createCalendarPopoverController({
|
||||
viewportId,
|
||||
triggerId,
|
||||
chevronId,
|
||||
chevronOpenTransform,
|
||||
chevronClosedTransform,
|
||||
getCalendar,
|
||||
openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
|
||||
closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
|
||||
@@ -131,6 +232,8 @@ export function createCalendarPopoverController({
|
||||
popup: popupId,
|
||||
isOpen,
|
||||
chevron: chevronId,
|
||||
chevronOpenTransform,
|
||||
chevronClosedTransform,
|
||||
trigger: triggerId,
|
||||
openTriggerStyle,
|
||||
closedTriggerStyle,
|
||||
|
||||
75
js/ui/filterPopover.js
Normal file
75
js/ui/filterPopover.js
Normal 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}`;
|
||||
}
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
updateKitchenItemAmount,
|
||||
} from '../services/pantryShopping.js?v=2';
|
||||
import { showAppToast } from './toast.js';
|
||||
import { ensureCalendarPopoverStyles } from './calendarPopover.js';
|
||||
|
||||
const CATEGORY_ICONS = {
|
||||
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';
|
||||
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') {
|
||||
@@ -123,6 +124,11 @@ function formatPackCount(amount, packSize) {
|
||||
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) {
|
||||
const productPackSize = Number(product?.packSize);
|
||||
if (Number.isFinite(productPackSize) && productPackSize > 0) {
|
||||
@@ -152,17 +158,18 @@ function getQtyStepMeta(def, product = null) {
|
||||
export function getIngredientCardHTML({
|
||||
idBase,
|
||||
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);',
|
||||
cardClass = 'relative w-full max-w-xs rounded-2xl shadow-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;',
|
||||
overlayStyle = 'pointer-events:none;',
|
||||
cardClass = 'calendar-liquid-panel relative w-full max-w-xs rounded-2xl overflow-hidden',
|
||||
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');
|
||||
ensureCalendarPopoverStyles();
|
||||
return `
|
||||
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
|
||||
<div id="${idBase}" class="${cardClass}" style="${cardStyle}">
|
||||
<div class="relative px-4 pt-4 pb-2">
|
||||
<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="" />
|
||||
<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>
|
||||
@@ -170,7 +177,7 @@ export function getIngredientCardHTML({
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-0.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>
|
||||
</button>
|
||||
<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>
|
||||
</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>
|
||||
</button>
|
||||
</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>
|
||||
${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(stockSubLabel)}</p>` : ''}
|
||||
</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)}
|
||||
</button>
|
||||
</div>
|
||||
${state.stockEditorOpen ? `
|
||||
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
|
||||
<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>
|
||||
</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));">
|
||||
<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;">
|
||||
<label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
|
||||
<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>
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
${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">
|
||||
<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>`;
|
||||
@@ -420,8 +427,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
|
||||
wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => {
|
||||
state.stockDraftQty = usesPackStep
|
||||
? normalizeQty((Number(event.target.value) || 0) * step)
|
||||
: normalizeQty(event.target.value);
|
||||
? normalizeQty(parseQtyInput(event.target.value) * step)
|
||||
: parseQtyInput(event.target.value);
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const input = wrap.querySelector('.ingredient-card-stock-input');
|
||||
const nextQty = usesPackStep
|
||||
? normalizeQty((Number(input?.value) || 0) * step)
|
||||
: normalizeQty(input?.value ?? state.stockDraftQty ?? qty);
|
||||
? normalizeQty(parseQtyInput(input?.value) * step)
|
||||
: parseQtyInput(input?.value ?? state.stockDraftQty ?? qty);
|
||||
if (product) {
|
||||
setPantryProductQty(def.id, product.id, nextQty);
|
||||
} 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>
|
||||
${shopSubLabel ? `<p class="text-[11px] mt-1" style="color:rgb(var(--text-dim-rgb));">${esc(shopSubLabel)}</p>` : ''}
|
||||
</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)}
|
||||
</button>
|
||||
</div>
|
||||
${state.shopEditorOpen ? `
|
||||
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
|
||||
<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>
|
||||
</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));">
|
||||
<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;">
|
||||
<label class="calendar-liquid-btn flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2">
|
||||
<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>
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
@@ -503,7 +510,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
${hasShoppingItem
|
||||
? '<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>'}
|
||||
<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>`;
|
||||
@@ -531,8 +538,8 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
|
||||
|
||||
wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => {
|
||||
state.shopDraftQty = usesPackStep
|
||||
? normalizeQty((Number(event.target.value) || 0) * step)
|
||||
: normalizeQty(event.target.value);
|
||||
? normalizeQty(parseQtyInput(event.target.value) * step)
|
||||
: parseQtyInput(event.target.value);
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const input = wrap.querySelector('.ingredient-card-shop-input');
|
||||
const nextAmount = usesPackStep
|
||||
? normalizeQty((Number(input?.value) || 0) * step)
|
||||
: normalizeQty(input?.value ?? state.shopDraftQty ?? defaultAmount);
|
||||
? normalizeQty(parseQtyInput(input?.value) * step)
|
||||
: parseQtyInput(input?.value ?? state.shopDraftQty ?? defaultAmount);
|
||||
let toastText = null;
|
||||
if (shoppingItem) {
|
||||
updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);
|
||||
|
||||
@@ -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 { 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_SURFACE = 'rgb(var(--sunken-rgb))';
|
||||
const FILTER_SURFACE_SOFT = 'rgb(var(--app-bg-rgb))';
|
||||
const FILTER_BORDER = 'rgb(var(--border-input-rgb))';
|
||||
const FILTER_CHIP_ACTIVE_BG = 'rgb(var(--card-rgb))';
|
||||
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 FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
|
||||
const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
|
||||
const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
|
||||
const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
|
||||
const PREP_TIME_MIN = 5;
|
||||
const PREP_TIME_MAX = 120;
|
||||
const PREP_TIME_STEP = 5;
|
||||
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
|
||||
const FILTER_CONTEXTS = {
|
||||
recipes: {
|
||||
anchorShellId: 'recipe-topbar',
|
||||
buttonId: 'recipe-filter-btn',
|
||||
anchorShellId: 'recipe-filter-float-btn',
|
||||
buttonId: 'recipe-filter-float-btn',
|
||||
getState: () => getFilterState(),
|
||||
applyState: (nextState) => applyFilters(nextState),
|
||||
showSlots: true,
|
||||
@@ -61,6 +64,15 @@ export function getFilterHTML() {
|
||||
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-fill {
|
||||
border-radius: 9999px;
|
||||
@@ -71,15 +83,27 @@ export function getFilterHTML() {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(var(--text-emphasis-rgb),0.16);
|
||||
background: ${FILTER_TRACK_FILL};
|
||||
box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12);
|
||||
border: 1px solid rgba(255,255,255,0.34);
|
||||
background: rgba(var(--surface-rgb),0.42);
|
||||
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;
|
||||
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>
|
||||
<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-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-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="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">
|
||||
<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>
|
||||
@@ -174,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, 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) {
|
||||
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;
|
||||
}
|
||||
|
||||
function getClosedPanelTransform(panel) {
|
||||
return panel?.dataset.placement === 'below'
|
||||
? 'translateY(-0.5rem) scale(0.98)'
|
||||
: 'translateY(0.65rem) scale(0.98)';
|
||||
}
|
||||
|
||||
function setActiveTimeHandle(activeHandle) {
|
||||
const minHandle = document.getElementById('prep-time-min-handle');
|
||||
const maxHandle = document.getElementById('prep-time-max-handle');
|
||||
@@ -244,19 +264,33 @@ function positionFilterPanel() {
|
||||
|
||||
const viewRect = view.getBoundingClientRect();
|
||||
const anchorRect = (searchShell || button).getBoundingClientRect();
|
||||
const gap = 8;
|
||||
const isRecipeContext = activeFilterContext === 'recipes';
|
||||
const gap = isRecipeContext ? 12 : 8;
|
||||
const margin = 12;
|
||||
const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
|
||||
const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
|
||||
const left = Math.max(
|
||||
margin,
|
||||
Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
|
||||
);
|
||||
const maxHeight = Math.max(220, viewRect.height - top - margin);
|
||||
|
||||
const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
|
||||
const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
|
||||
const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
|
||||
const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
|
||||
const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
|
||||
const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
|
||||
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.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`;
|
||||
if (body) body.style.maxHeight = `${maxHeight - 56}px`;
|
||||
}
|
||||
@@ -276,6 +310,7 @@ function showFilterPanel() {
|
||||
view.style.pointerEvents = 'auto';
|
||||
view.setAttribute('aria-hidden', 'false');
|
||||
positionFilterPanel();
|
||||
panel.style.transform = getClosedPanelTransform(panel);
|
||||
setRecipeAreaBlur(true);
|
||||
|
||||
syncPanelCount();
|
||||
@@ -296,7 +331,7 @@ function hideFilterPanel() {
|
||||
view.style.pointerEvents = 'none';
|
||||
view.setAttribute('aria-hidden', 'true');
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
|
||||
panel.style.transform = getClosedPanelTransform(panel);
|
||||
setRecipeAreaBlur(false);
|
||||
syncPanelCount();
|
||||
|
||||
@@ -315,7 +350,7 @@ function renderSlotChips() {
|
||||
|
||||
wrap.innerHTML = MEAL_SLOTS.map((slot) => {
|
||||
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('');
|
||||
|
||||
wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
|
||||
@@ -337,7 +372,7 @@ function renderTagChips() {
|
||||
const allTags = collectAllTags();
|
||||
wrap.innerHTML = allTags.map((tag) => {
|
||||
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('');
|
||||
|
||||
wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
|
||||
@@ -373,10 +408,17 @@ function syncPanelCount() {
|
||||
|
||||
if (button) {
|
||||
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');
|
||||
if (isRecipeGlassButton) {
|
||||
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"]');
|
||||
if (!badge) return;
|
||||
@@ -397,6 +439,7 @@ function syncLiveFilters() {
|
||||
}
|
||||
|
||||
export function setupFilter() {
|
||||
ensureFilterPopoverStyles();
|
||||
const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
|
||||
const minHandle = document.getElementById('prep-time-min-handle');
|
||||
const maxHandle = document.getElementById('prep-time-max-handle');
|
||||
|
||||
@@ -74,8 +74,7 @@ export function getMealPlannerHTML() {
|
||||
return `
|
||||
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[rgb(var(--app-bg-rgb))] z-10">
|
||||
<div id="planner-cal-bar" class="shrink-0 bg-[rgb(var(--app-bg-rgb))] border-b border-[rgb(var(--card-strong-rgb))] mt-3 relative z-10">
|
||||
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
|
||||
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
|
||||
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-end gap-3 min-w-0">
|
||||
${createCalendarTopbarHTML({
|
||||
todayId: 'cal-go-today',
|
||||
wrapperClass: 'flex shrink-0 items-center justify-end',
|
||||
@@ -84,7 +83,7 @@ export function getMealPlannerHTML() {
|
||||
${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
|
||||
</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 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>
|
||||
@@ -440,8 +439,8 @@ function renderDayContent(state, onMealRemoved = null) {
|
||||
<i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>`
|
||||
: `<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
|
||||
: `<button type="button" class="planner-edit-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
|
||||
<i class="fas fa-pencil text-[10px]" aria-hidden="true"></i>
|
||||
</button>`;
|
||||
return `
|
||||
<div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-white/5' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}>
|
||||
@@ -476,32 +475,32 @@ function renderDayContent(state, onMealRemoved = null) {
|
||||
const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] flex items-center justify-center shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
|
||||
|
||||
const kcalPill = slotKcal > 0
|
||||
? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:rgb(var(--app-bg-rgb)); color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
|
||||
? `<span class="planner-kcal-pill text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
|
||||
: '';
|
||||
|
||||
const filledCard = `
|
||||
<div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2.5 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
|
||||
<div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-4 py-3 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
|
||||
<span class="ml-auto"></span>
|
||||
${kcalPill}
|
||||
${addBtn}
|
||||
</div>
|
||||
${entries.length > 0 ? `<div class="px-2.5 pb-2.5 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.625rem;">${entryCards}</div>` : ''}
|
||||
${entries.length > 0 ? `<div class="px-3 pb-3 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.75rem;">${entryCards}</div>` : ''}
|
||||
</div>`;
|
||||
|
||||
if (entries.length > 0) return filledCard;
|
||||
|
||||
return `
|
||||
<div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-3 py-2.5">
|
||||
<div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
|
||||
<div class="flex items-center gap-2 px-4 py-3">
|
||||
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
|
||||
<span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
|
||||
<span class="ml-auto"></span>
|
||||
${addBtn}
|
||||
</div>
|
||||
<div class="px-3 pb-2.5 -mt-0.5">
|
||||
<div class="px-4 pb-3 -mt-0.5">
|
||||
<p class="text-[11px] text-[rgb(var(--text-faint-rgb))] italic pl-9">Zaplanuj posiłek</p>
|
||||
</div>
|
||||
</div>`;
|
||||
@@ -1096,15 +1095,11 @@ export function setupMealPlanner() {
|
||||
};
|
||||
|
||||
/* ── calendar scroll shadow ─────────────────── */
|
||||
const plannerScroll = document.getElementById('planner-scroll');
|
||||
const calBar = document.getElementById('planner-cal-bar');
|
||||
if (plannerScroll && calBar) {
|
||||
if (calBar) {
|
||||
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;';
|
||||
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);pointer-events:none;';
|
||||
calBar.appendChild(shadow);
|
||||
plannerScroll.addEventListener('scroll', () => {
|
||||
shadow.style.opacity = plannerScroll.scrollTop > 2 ? '1' : '0';
|
||||
});
|
||||
}
|
||||
|
||||
bindCalendarDayClicks(weekGrid, (date) => {
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
syncCalendarPopoverVisibility,
|
||||
} from '../ui/calendarPopover.js';
|
||||
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
|
||||
import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
@@ -50,16 +51,6 @@ function getActivePantryFilterCount() {
|
||||
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 = {
|
||||
pieczywo: 'fa-bread-slice',
|
||||
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 SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
|
||||
const PANTRY_CALENDAR_THEME = {
|
||||
bg: 'rgb(var(--app-bg-rgb))',
|
||||
bg: 'rgba(255,255,255,0.08)',
|
||||
border: 'rgb(var(--card-raised-rgb))',
|
||||
text: 'rgb(var(--text-body-soft-rgb))',
|
||||
dimText: 'rgb(var(--text-faint-rgb))',
|
||||
@@ -101,12 +92,13 @@ const PANTRY_CALENDAR_THEME = {
|
||||
|
||||
let ingredientCard = null;
|
||||
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
|
||||
let isSearchExpanded = false;
|
||||
let isCalendarOpen = false;
|
||||
let isFilterOpen = false;
|
||||
let calendarMonthAnchor = startOfMonth(horizonEndDate);
|
||||
let pantryGlobalListenersBound = false;
|
||||
let pantryCalendar = null;
|
||||
let pantrySearchQuery = '';
|
||||
let pantrySearchOpen = false;
|
||||
let pantryFilters = {
|
||||
categories: [],
|
||||
sections: [],
|
||||
@@ -169,29 +161,68 @@ function photoStripMedia(image, icon, accentBg) {
|
||||
export function getPantryHTML() {
|
||||
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;">
|
||||
<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 ── -->
|
||||
<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;">
|
||||
<div class="pointer-events-auto relative z-[1] w-full">
|
||||
<div id="pantry-topbar" class="relative min-h-12">
|
||||
<div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
|
||||
<h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
|
||||
.dark .pv2-tile {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.22),
|
||||
0 2px 4px rgba(0, 0, 0, 0.24),
|
||||
0 8px 18px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
<div id="pantry-horizon-wrap" class="relative shrink">
|
||||
<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;">
|
||||
.pv2-track {
|
||||
background: rgba(var(--overlay-rgb), 0.12);
|
||||
}
|
||||
|
||||
.dark .pv2-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── floating horizon pill above bottom nav ── -->
|
||||
<div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:var(--catalog-menu-left, 1rem); width:calc(var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width) - 0.5rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-horizon-compact" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3">
|
||||
<span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
||||
<i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
<i id="pantry-horizon-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</button>
|
||||
${createCalendarPopoverHTML({
|
||||
id: 'pantry-calendar-popover',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
|
||||
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
|
||||
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-filter-pill-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
|
||||
<button type="button" id="pantry-filter-pill-btn" class="recipe-glass-btn w-full h-full rounded-full relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
|
||||
<i class="fas fa-sliders-h" aria-hidden="true"></i>
|
||||
<span id="pantry-filter-pill-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pantry-filter-wrap" class="relative shrink-0">
|
||||
<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));">
|
||||
<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>
|
||||
<!-- ── scrollable content ── -->
|
||||
<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>
|
||||
|
||||
<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);">
|
||||
<div class="flex items-center justify-between gap-3 px-0.5 pb-3">
|
||||
<!-- ── 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ść
|
||||
@@ -199,36 +230,28 @@ export function getPantryHTML() {
|
||||
</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));">
|
||||
<i class="fas fa-search text-[13px]"></i>
|
||||
<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>
|
||||
|
||||
|
||||
${createCalendarPopoverHTML({
|
||||
id: 'pantry-calendar-popover',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
|
||||
})}
|
||||
|
||||
<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);">
|
||||
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
<input type="search" id="pantry-search" 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="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
|
||||
<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));">
|
||||
<i class="fas fa-xmark text-[13px]"></i>
|
||||
<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>
|
||||
|
||||
<!-- ── 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-board"></div>
|
||||
</div>
|
||||
</div>
|
||||
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
|
||||
}
|
||||
|
||||
@@ -237,59 +260,63 @@ export function getPantryHTML() {
|
||||
function syncHorizonUI() {
|
||||
ensureValidHorizonDate();
|
||||
|
||||
const defaultRow = document.getElementById('pantry-default-row');
|
||||
const searchShell = document.getElementById('pantry-search-shell');
|
||||
const popover = document.getElementById('pantry-calendar-popover');
|
||||
const filterPopover = document.getElementById('pantry-filter-popover');
|
||||
const filterToggle = document.getElementById('pantry-filter-toggle');
|
||||
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 compactPill = document.getElementById('pantry-horizon-compact');
|
||||
const chevron = document.getElementById('pantry-horizon-chevron');
|
||||
|
||||
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
|
||||
|
||||
const showCalendar = isCalendarOpen && !isSearchExpanded;
|
||||
const showDefault = !isSearchExpanded;
|
||||
const showFilter = isFilterOpen && showDefault;
|
||||
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({
|
||||
popup: popover,
|
||||
isOpen: showCalendar,
|
||||
isOpen: isCalendarOpen,
|
||||
chevron,
|
||||
chevronOpenTransform: 'rotate(180deg)',
|
||||
chevronClosedTransform: 'rotate(0deg)',
|
||||
trigger: compactPill,
|
||||
openTriggerStyle: {},
|
||||
closedTriggerStyle: {},
|
||||
triggerImportant: true,
|
||||
});
|
||||
|
||||
if (filterPopover) {
|
||||
filterPopover.style.opacity = showFilter ? '1' : '0';
|
||||
filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
||||
filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
|
||||
}
|
||||
if (filterToggle) {
|
||||
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');
|
||||
filterPopover.style.opacity = isFilterOpen ? '1' : '0';
|
||||
filterPopover.style.transform = isFilterOpen
|
||||
? 'translateX(-50%) translateY(0) scale(1)'
|
||||
: 'translateX(-50%) translateY(0.5rem) scale(0.98)';
|
||||
filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
|
||||
}
|
||||
if (filterCount) {
|
||||
filterCount.textContent = String(activeFilterCount);
|
||||
filterCount.classList.toggle('hidden', activeFilterCount === 0);
|
||||
filterCount.classList.toggle('flex', activeFilterCount > 0);
|
||||
filterCount.classList.toggle('hidden', true);
|
||||
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) {
|
||||
searchShell.style.opacity = isSearchExpanded ? '1' : '0';
|
||||
searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
||||
searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
|
||||
searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
|
||||
searchShell.style.pointerEvents = pantrySearchOpen ? '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();
|
||||
renderFilterPopover();
|
||||
@@ -379,26 +406,35 @@ function renderFilterPopover() {
|
||||
`;
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
const input = document.getElementById('pantry-search');
|
||||
const hadQuery = Boolean(input?.value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
input.blur();
|
||||
}
|
||||
isSearchExpanded = false;
|
||||
syncHorizonUI();
|
||||
function clearSearchInput() {
|
||||
const hadQuery = Boolean(pantrySearchQuery);
|
||||
pantrySearchQuery = '';
|
||||
if (hadQuery) renderBoard();
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
isSearchExpanded = true;
|
||||
function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
|
||||
const hadQuery = Boolean(pantrySearchQuery);
|
||||
pantrySearchOpen = open;
|
||||
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();
|
||||
window.requestAnimationFrame(() => {
|
||||
document.getElementById('pantry-search')?.focus();
|
||||
});
|
||||
if (clearQuery && hadQuery) renderBoard();
|
||||
}
|
||||
|
||||
function closeCalendar() {
|
||||
@@ -411,7 +447,6 @@ function closeCalendar() {
|
||||
function openCalendar() {
|
||||
ensureValidHorizonDate();
|
||||
calendarMonthAnchor = startOfMonth(horizonEndDate);
|
||||
isSearchExpanded = false;
|
||||
isFilterOpen = false;
|
||||
isCalendarOpen = true;
|
||||
syncHorizonUI();
|
||||
@@ -428,8 +463,8 @@ function closeFilter() {
|
||||
}
|
||||
|
||||
function toggleFilterPanel() {
|
||||
if (pantrySearchOpen) return;
|
||||
isCalendarOpen = false;
|
||||
isSearchExpanded = false;
|
||||
isFilterOpen = !isFilterOpen;
|
||||
syncHorizonUI();
|
||||
}
|
||||
@@ -527,8 +562,8 @@ function classifyIngredients(searchQuery) {
|
||||
/* ══════════════════════ TILE RENDERING ══════════════════════ */
|
||||
|
||||
function tileIconHtml(item, size = 'sm') {
|
||||
const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
|
||||
const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
|
||||
const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
|
||||
const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
|
||||
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>`;
|
||||
}
|
||||
@@ -538,12 +573,12 @@ function tileIconHtml(item, size = 'sm') {
|
||||
function shortfallTileHtml(item) {
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
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')}
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -555,12 +590,12 @@ function shortfallTileHtml(item) {
|
||||
function sufficientTileHtml(item) {
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
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')}
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -573,7 +608,7 @@ function notPlannedChipHtml(item) {
|
||||
const hasStock = item.qty > 0;
|
||||
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
||||
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)}
|
||||
<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>
|
||||
@@ -594,7 +629,7 @@ function renderBoard() {
|
||||
const root = document.getElementById('pantry-board');
|
||||
if (!root) return;
|
||||
|
||||
const q = document.getElementById('pantry-search')?.value || '';
|
||||
const q = pantrySearchQuery;
|
||||
const hasFilters = hasActivePantryFilters();
|
||||
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
|
||||
|
||||
@@ -673,6 +708,8 @@ export function refreshPantry() {
|
||||
}
|
||||
|
||||
export function setupPantry() {
|
||||
ensureFilterPopoverStyles();
|
||||
|
||||
if (!ingredientCard) {
|
||||
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
|
||||
ingredientCard.bind();
|
||||
@@ -681,26 +718,32 @@ export function setupPantry() {
|
||||
syncHorizonUI();
|
||||
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
|
||||
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
||||
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') closeSearch();
|
||||
document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
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) => {
|
||||
event.stopPropagation();
|
||||
pantryFilters = { categories: [], sections: [] };
|
||||
@@ -752,10 +795,30 @@ export function setupPantry() {
|
||||
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
|
||||
closeCalendar();
|
||||
}
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
|
||||
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
|
||||
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;
|
||||
|
||||
@@ -12,8 +12,8 @@ let filterState = {
|
||||
maxMinutes: DEFAULT_MAX_MINUTES,
|
||||
};
|
||||
|
||||
let isSearchExpanded = false;
|
||||
let recipeListDocListenersBound = false;
|
||||
let recipeSearchOpen = false;
|
||||
|
||||
function matchesFilters(recipe) {
|
||||
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
|
||||
@@ -43,53 +43,80 @@ function getFilteredRecipes() {
|
||||
return Object.values(RECIPES).filter(matchesFilters);
|
||||
}
|
||||
|
||||
function syncRecipeScrollShadow() {
|
||||
const searchShell = document.getElementById('recipe-search-shell');
|
||||
if (searchShell) {
|
||||
searchShell.style.boxShadow = 'var(--shadow-shell)';
|
||||
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() {
|
||||
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 showSearch = isSearchExpanded;
|
||||
|
||||
if (defaultRow) {
|
||||
defaultRow.style.opacity = showSearch ? '0' : '1';
|
||||
defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
|
||||
defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
|
||||
}
|
||||
|
||||
const rightWrap = document.getElementById('recipe-filter-wrap');
|
||||
const rightBtn = document.getElementById('recipe-filter-btn');
|
||||
const rightIcon = document.getElementById('recipe-right-btn-icon');
|
||||
const filterCount = document.getElementById('recipe-filter-count');
|
||||
const floatingFilterCount = document.getElementById('recipe-filter-float-count');
|
||||
const dot = document.getElementById('recipe-search-active-dot');
|
||||
const isOpen = recipeSearchOpen;
|
||||
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
|
||||
if (searchShell) {
|
||||
searchShell.style.opacity = showSearch ? '1' : '0';
|
||||
searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
||||
searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
|
||||
searchShell.style.boxShadow = 'var(--shadow-shell)';
|
||||
searchShell.style.opacity = isOpen ? '1' : '0';
|
||||
searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
|
||||
searchShell.style.transform = isOpen ? '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', !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 hadQuery = Boolean(input?.value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
if (open) {
|
||||
input.value = filterState.query;
|
||||
if (focusInput) {
|
||||
input.focus();
|
||||
input.setSelectionRange(input.value.length, input.value.length);
|
||||
}
|
||||
} else {
|
||||
input.blur();
|
||||
}
|
||||
filterState.query = '';
|
||||
isSearchExpanded = false;
|
||||
syncRecipeTopbarUI();
|
||||
if (hadQuery) renderGrid();
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
isSearchExpanded = true;
|
||||
window.closeFilters?.();
|
||||
syncRecipeTopbarUI();
|
||||
window.requestAnimationFrame(() => {
|
||||
document.getElementById('recipe-search-input')?.focus();
|
||||
});
|
||||
if (clearQuery && hadQuery) renderGrid();
|
||||
}
|
||||
|
||||
function renderGrid() {
|
||||
@@ -102,7 +129,7 @@ function renderGrid() {
|
||||
emptyStateEl: emptyState,
|
||||
recipes: getFilteredRecipes(),
|
||||
showSlotLabels: false,
|
||||
cardClassName: 'recipe-list-card',
|
||||
cardClassName: 'recipe-list-card recipe-catalog-card',
|
||||
});
|
||||
syncRecipeTopbarUI();
|
||||
requestAnimationFrame(syncRecipeScrollShadow);
|
||||
@@ -111,46 +138,43 @@ function renderGrid() {
|
||||
export function getRecipeListHTML() {
|
||||
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="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 gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
|
||||
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>
|
||||
|
||||
<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({
|
||||
scrollId: 'recipe-scroll',
|
||||
gridId: 'recipe-grid',
|
||||
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))]',
|
||||
emptyTitle: 'Brak wyników',
|
||||
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>
|
||||
`;
|
||||
}
|
||||
@@ -175,23 +199,28 @@ export function refreshRecipeList() {
|
||||
export function setupRecipeList() {
|
||||
renderGrid();
|
||||
|
||||
document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
setSearchOpen(true, { focusInput: true });
|
||||
});
|
||||
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
|
||||
filterState.query = e.target.value.trim();
|
||||
renderGrid();
|
||||
});
|
||||
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) => {
|
||||
e.stopPropagation();
|
||||
if (isSearchExpanded) {
|
||||
isSearchExpanded = false;
|
||||
syncRecipeTopbarUI();
|
||||
if (recipeSearchOpen) {
|
||||
setSearchOpen(false, { clearQuery: true });
|
||||
}
|
||||
});
|
||||
document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (recipeSearchOpen) return;
|
||||
window.openFilters?.('recipes');
|
||||
});
|
||||
|
||||
@@ -202,24 +231,24 @@ export function setupRecipeList() {
|
||||
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) {
|
||||
recipeListDocListenersBound = true;
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Escape' || !isSearchExpanded) return;
|
||||
if (!document.getElementById('main-view')?.classList.contains('hidden')) {
|
||||
closeSearch();
|
||||
const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
|
||||
if (e.key !== 'Escape') return;
|
||||
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();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
|
||||
import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
|
||||
import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
@@ -118,34 +119,41 @@ function groupByCategory(items) {
|
||||
export function getShoppingListHTML() {
|
||||
return `
|
||||
<div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
|
||||
<!-- ── header ── -->
|
||||
<div class="shrink-0 px-4 pt-5 pb-0">
|
||||
|
||||
<!-- title row + pill + bought button (position:relative anchors the popups) -->
|
||||
<div class="flex items-center gap-2 mb-4" style="position:relative;">
|
||||
<h1 class="flex-1 text-[18px] font-bold" style="color:rgb(var(--text-emphasis-rgb));">Lista zakupów</h1>
|
||||
<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);">
|
||||
<!-- ── floating range pill above bottom nav ── -->
|
||||
<div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
|
||||
<div id="shopping-range-wrap" class="pointer-events-auto absolute bottom-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); position:relative;">
|
||||
<button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
|
||||
<span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
||||
<i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</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>
|
||||
<i id="sl-range-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
||||
</button>
|
||||
|
||||
<!-- popup calendar (absolute, overlays content below) -->
|
||||
<!-- popup calendar (absolute, overlays content above) -->
|
||||
${createCalendarPopoverHTML({
|
||||
id: 'sl-calendar-popup',
|
||||
calendarHTML: createSwipePopoverCalendarHTML({
|
||||
idPrefix: 'sl-cal',
|
||||
weekdays: WEEKDAY_SHORT,
|
||||
}),
|
||||
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup bought (absolute, overlays content below) -->
|
||||
<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 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);">
|
||||
<!-- ── scrollable list ── -->
|
||||
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
|
||||
<div id="sl-board"></div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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));">
|
||||
@@ -157,11 +165,6 @@ export function getShoppingListHTML() {
|
||||
</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>`;
|
||||
}
|
||||
|
||||
@@ -193,7 +196,7 @@ function initShoppingCalendar() {
|
||||
selectedText: 'rgb(var(--text-emphasis-rgb))',
|
||||
selectedDot: 'rgb(var(--text-emphasis-rgb))',
|
||||
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',
|
||||
text: 'rgb(var(--text-body-soft-rgb))',
|
||||
dimmedBg: 'transparent',
|
||||
@@ -207,6 +210,8 @@ function initShoppingCalendar() {
|
||||
viewportId: 'sl-cal-viewport',
|
||||
triggerId: 'sl-range-pill',
|
||||
chevronId: 'sl-range-chevron',
|
||||
chevronOpenTransform: 'rotate(180deg)',
|
||||
chevronClosedTransform: 'rotate(0deg)',
|
||||
getCalendar: () => shoppingCalendar,
|
||||
hideViewportDuringLayout: true,
|
||||
});
|
||||
@@ -256,7 +261,7 @@ function closeBoughtPopup() {
|
||||
if (popup) {
|
||||
popup.style.pointerEvents = 'none';
|
||||
popup.style.opacity = '0';
|
||||
popup.style.transform = 'translateY(-6px) scale(0.98)';
|
||||
popup.style.transform = 'translateY(6px) scale(0.98)';
|
||||
}
|
||||
if (btn) {
|
||||
btn.style.background = 'rgb(var(--card-rgb))';
|
||||
@@ -577,6 +582,8 @@ export function refreshShoppingList() {
|
||||
}
|
||||
|
||||
export function setupShoppingList() {
|
||||
ensureFilterPopoverStyles();
|
||||
|
||||
if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
|
||||
|
||||
updatePillLabel();
|
||||
@@ -617,5 +624,7 @@ export function setupShoppingList() {
|
||||
renderAll();
|
||||
});
|
||||
|
||||
window.closeShoppingCalendar = () => closeCalendar();
|
||||
window.closeShoppingBoughtPopup = () => closeBoughtPopup();
|
||||
window.refreshShoppingList = refreshShoppingList;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user