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

13
js/ui/bottomNav.js
View File

@@ -70,15 +70,15 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const expandedDockHeight = controlSize;
const bottomControlSize = controlSize * 1.28;
const controlGap = 0.5 * rootFontSize;
const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
const collapsedDockWidth = controlSize;
const controlsLift = 0;
const collapsedDockWidth = bottomControlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const controlCluster = controlSize + controlGap;
const controlCluster = bottomControlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const filterLeft = dockLeft + dockWidth - controlSize;
const searchButtonLeft = filterLeft - controlGap - controlSize;
const filterLeft = dockLeft + dockWidth - bottomControlSize;
const searchButtonLeft = filterLeft - controlGap - bottomControlSize;
const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
@@ -93,6 +93,7 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}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-controls-lift', `${controlsLift}px`);
};