From bc505d6b4c9351407e68221c8b4f12c8448167c2 Mon Sep 17 00:00:00 2001 From: ulfrxdev Date: Wed, 22 Apr 2026 18:08:20 +0200 Subject: [PATCH] Redesign controls in recipe list --- index.html | 44 ++++++++++++++++++++++++++++-------------- js/ui/bottomNav.js | 5 ++--- js/views/RecipeList.js | 2 +- 3 files changed, 32 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index e7f26c9..387e63b 100644 --- a/index.html +++ b/index.html @@ -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; diff --git a/js/ui/bottomNav.js b/js/ui/bottomNav.js index 454185d..b94969f 100644 --- a/js/ui/bottomNav.js +++ b/js/ui/bottomNav.js @@ -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, diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js index cb35b10..b8611fd 100644 --- a/js/views/RecipeList.js +++ b/js/views/RecipeList.js @@ -101,7 +101,7 @@ export function getRecipeListHTML() { -