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

64
index.html
View File

@@ -475,7 +475,7 @@
#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-control-size, 3.05rem) !important;
height: var(--recipe-bottom-control-size, 3.9rem) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
@@ -500,10 +500,10 @@
#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-control-size, 3.05rem) + 0.5rem));
right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
bottom: 0;
min-width: 0;
height: var(--recipe-control-size, 3.05rem);
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;
@@ -651,15 +651,15 @@
#main-view .recipe-bottom-action,
#pantry-view .recipe-bottom-action,
#shopping-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem);
height: var(--recipe-control-size, 3.05rem);
width: var(--recipe-bottom-control-size, 3.9rem);
height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px;
font-size: 0.95rem;
font-size: 1rem;
}
#main-view .recipe-bottom-action i,
#pantry-view .recipe-bottom-action i,
#shopping-view .recipe-bottom-action i {
font-size: 0.95rem;
font-size: 1rem;
line-height: 1;
}
.dark #pantry-filter-popover {
@@ -858,8 +858,9 @@
--dock-gap: 0.06rem;
--dock-radius: 999px;
--recipe-dock-width: var(--dock-width);
--recipe-collapsed-dock-width: 3.05rem;
--recipe-collapsed-dock-height: 3.05rem;
--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;
@@ -958,7 +959,7 @@
position: relative;
box-sizing: border-box;
width: var(--dock-width);
height: var(--recipe-control-size, 3.05rem);
height: var(--recipe-bottom-control-size, 3.9rem);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
@@ -1020,8 +1021,8 @@
border: 0;
background: transparent !important;
box-shadow: none !important;
width: 1.82rem;
height: 1.82rem;
width: 2.33rem;
height: 2.33rem;
margin: 0;
padding: 0;
border-radius: 999px;
@@ -1077,8 +1078,8 @@
}
#app-bottom-nav .nav-tab.is-active {
width: min(100%, 4rem);
height: 2.46rem;
padding: 0.24rem 0.2rem 0.22rem;
height: 3.15rem;
padding: 0.32rem 0.22rem 0.28rem;
color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 999px;
@@ -1090,19 +1091,19 @@
display: none;
}
#app-bottom-nav .nav-tab.is-active i {
font-size: 0.78rem;
font-size: 0.88rem;
}
#app-bottom-nav .nav-tab.is-active::after {
font-size: 0.58rem;
font-size: 0.66rem;
line-height: 1.1;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.52rem;
font-size: 0.62rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.54rem;
padding: 0.22rem 0.2rem 0.28rem;
height: 3.25rem;
padding: 0.28rem 0.2rem 0.32rem;
}
.dark #app-bottom-nav .nav-tab.is-active {
color: #fff;
@@ -1128,42 +1129,43 @@
--dock-pad: 0.38rem;
--dock-gap: 0.05rem;
--dock-radius: 999px;
--recipe-collapsed-dock-width: 2.95rem;
--recipe-collapsed-dock-height: 2.95rem;
--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: var(--dock-width);
height: var(--recipe-control-size, 2.95rem);
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: 1.7rem;
height: 1.7rem;
width: 2.18rem;
height: 2.18rem;
border-radius: 999px;
}
#app-bottom-nav .nav-tab.is-active {
width: min(100%, 3.72rem);
height: 2.25rem;
padding: 0.2rem 0.18rem 0.18rem;
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.56rem;
font-size: 0.62rem;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.5rem;
font-size: 0.58rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.3rem;
padding: 0.18rem 0.18rem 0.24rem;
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));
@@ -1217,7 +1219,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260421-nav-labels';
const APP_ASSET_VERSION = '20260507-bottom-nav-size-tune-3';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';