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

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>