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

Adjust tabbar

Browse Source
This commit is contained in:
Rafał
2026-05-07 18:42:54 +02:00
parent 544df5175d
commit 68e5227db1
4 changed files with 111 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@@ -662,6 +662,27 @@
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));
}
.dark #pantry-filter-popover {
background: rgba(var(--app-bg-rgb), 0.82) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
@@ -870,9 +891,9 @@
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: 0;
opacity: 1;
pointer-events: none;
transform: translateY(0.45rem) scale(0.985);
transform: none;
}
#app-bottom-nav .recipe-nav-toggle {
display: none;
@@ -986,6 +1007,31 @@
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);
background-image: none;
@@ -1174,6 +1220,15 @@
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)
);
}
}
/* Planner and common interactive surfaces */
@@ -1219,7 +1274,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260507-bottom-nav-size-tune-3';
const APP_ASSET_VERSION = '20260507-inline-search-dock';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';