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

Adjust height of the tab bar

Browse Source
This commit is contained in:
Rafał
2026-05-07 18:07:56 +02:00
parent 53a7212dfe
commit 544df5175d
6 changed files with 49 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/views/MealPlanner.js
View File

@@ -83,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>

6
js/views/Pantry.js
View File

@@ -208,12 +208,12 @@ export function getPantryHTML() {
</div>
<!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
<div id="pantry-board"></div>
</div>
<!-- ── floating bottom controls (search + filter) ── -->
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-control-size, 3.05rem) + 0.75rem); opacity:0;">
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.75rem); 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));">
@@ -223,7 +223,7 @@ export function getPantryHTML() {
<div id="pantry-filter-panel-body" class="space-y-4"></div>
</div>
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
<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>

4
js/views/RecipeList.js
View File

@@ -125,12 +125,12 @@ export function getRecipeListHTML() {
scrollId: 'recipe-scroll',
gridId: 'recipe-grid',
emptyStateId: 'recipe-empty-state',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[rgb(var(--app-bg-rgb))]',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
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.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
<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>

6
js/views/ShoppingList.js
View File

@@ -139,12 +139,12 @@ export function getShoppingListHTML() {
</div>
<!-- ── scrollable list ── -->
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
<div id="sl-board"></div>
</div>
<div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-control-size, 3.05rem));">
<div id="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>