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

Redesign controls in recipe list

Browse Source
This commit is contained in:
Rafał
2026-04-22 18:08:20 +02:00
parent 7328b6ec4c
commit bc505d6b4c
3 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -437,7 +437,7 @@
bottom: 0;
min-width: 0;
height: var(--recipe-control-size, 3.05rem);
border-radius: 1.25rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
box-shadow:
@@ -483,8 +483,21 @@
color: rgb(var(--text-dim-rgb)) !important;
opacity: 1;
}
#recipe-search-close {
#recipe-search-close,
#recipe-search-close:hover,
#recipe-search-close:focus,
#recipe-search-close:focus-visible,
#recipe-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,
#app-bottom-nav .recipe-nav-toggle {
@@ -528,7 +541,7 @@
border-radius: 999px;
}
#main-view #recipe-filter-btn.recipe-bottom-action {
border-radius: 1.25rem;
border-radius: 999px;
}
#main-view #recipe-filter-wrap {
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
@@ -538,7 +551,7 @@
#main-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem);
height: var(--recipe-control-size, 3.05rem);
border-radius: 1.25rem;
border-radius: 999px;
font-size: 0.95rem;
}
#main-view .recipe-bottom-action i {
@@ -731,12 +744,12 @@
--dock-width: min(calc(100% - 2.4rem), 24.5rem);
--dock-pad: 0.42rem;
--dock-gap: 0.06rem;
--dock-radius: 1.68rem;
--dock-radius: 999px;
--recipe-dock-width: var(--dock-width);
--recipe-collapsed-dock-width: 3.72rem;
--recipe-collapsed-dock-width: 3.05rem;
--recipe-collapsed-dock-height: 3.05rem;
--recipe-collapsed-dock-radius: 1.25rem;
--recipe-toggle-size: 3.72rem;
--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));
@@ -753,7 +766,7 @@
height: auto;
margin: 0;
padding: 0;
border-radius: 1.05rem;
border-radius: 999px;
align-items: center;
justify-content: center;
font-size: 0.95rem;
@@ -884,7 +897,7 @@
height: 2.18rem;
margin: 0;
padding: 0;
border-radius: 1.35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -941,7 +954,7 @@
padding: 0.34rem 0.28rem 0.3rem;
color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 1.05rem;
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;
@@ -975,9 +988,10 @@
--dock-width: min(calc(100% - 1.6rem), 22.5rem);
--dock-pad: 0.38rem;
--dock-gap: 0.05rem;
--dock-radius: 1.56rem;
--dock-radius: 999px;
--recipe-collapsed-dock-width: 2.95rem;
--recipe-collapsed-dock-height: 2.95rem;
--recipe-collapsed-dock-radius: 1.2rem;
--recipe-collapsed-dock-radius: 999px;
}
#app-bottom-nav .bottom-dock {
width: var(--dock-width);
@@ -990,13 +1004,13 @@
#app-bottom-nav .nav-action {
width: 2.02rem;
height: 2.02rem;
border-radius: 1.28rem;
border-radius: 999px;
}
#app-bottom-nav .nav-tab.is-active {
width: min(100%, 4.4rem);
height: 2.65rem;
padding: 0.3rem 0.22rem 0.27rem;
border-radius: 0.96rem;
border-radius: 999px;
}
#app-bottom-nav .nav-label {
font-size: 0.56rem;

5
js/ui/bottomNav.js
View File

@@ -62,14 +62,13 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
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 slotWidth = Math.max(44, (dockWidth - padLeft - padRight - (columnGap * 3)) / 4);
const collapsedSlotWidth = Math.max(42, Math.min(slotWidth, isCompact ? 44 : 46));
const collapsedDockWidth = collapsedSlotWidth + padLeft + padRight;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const expandedDockHeight = (isCompact ? 3.48 : 3.72) * rootFontSize;
const controlGap = 0.5 * rootFontSize;
const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
const collapsedDockWidth = controlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const filterLeft = Math.max(
dockLeft + collapsedDockWidth + controlGap,
dockLeft + dockWidth - padRight - controlSize,

2
js/views/RecipeList.js
View File

@@ -101,7 +101,7 @@ export function getRecipeListHTML() {
<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;">
<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:transparent !important; border:none; color:rgb(var(--text-dim-rgb)); box-shadow:none !important;">
<button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>