Restructure recipe grid
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m11s

This commit is contained in:
2026-04-08 22:53:17 +02:00
parent 165f39d0b7
commit 6bf50f67ad
5 changed files with 94 additions and 23 deletions

View File

@@ -146,7 +146,7 @@ export function getMealPlannerHTML() {
</div>
</div>
<div id="planner-picker-scroll" class="relative min-h-0 flex-1 overflow-y-auto px-4 pt-28 pb-8 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="planner-picker-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
<div id="planner-picker-grid" class="grid grid-cols-3 gap-2 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
<div id="planner-picker-empty-state" class="hidden flex flex-col items-center justify-center py-16 text-center">
<div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
<i class="fas fa-search text-2xl text-gray-300" aria-hidden="true"></i>
@@ -492,7 +492,7 @@ function renderDayContent(state, onMealRemoved = null) {
: `<span class="w-full h-full flex items-center justify-center text-white text-[8px] font-medium">${escapeHtml(recipe.thumbLabel)}</span>`}
</div>
<div class="min-w-0">
<div class="flex items-center"><p class="text-[13px] font-bold text-[#ddd6ca] truncate underline decoration-1 underline-offset-2">${escapeHtml(recipe.title)}</p>${customDot}</div>
<div class="flex items-center"><p class="text-[13px] font-normal text-[#ddd6ca] truncate">${escapeHtml(recipe.title)}</p>${customDot}</div>
<p class="text-[11px] text-[#9b978f] mt-0.5 tabular-nums">
<i class="fas fa-clock text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
<span class="mx-1.5 text-[#6d6c67]">·</span>
@@ -772,7 +772,7 @@ function renderPickerGrid(slotId, plans, query = '') {
emptyStateEl: emptyState,
recipes: sorted,
showSlotLabels: false,
cardClassName: 'planner-picker-recipe-card',
cardClassName: 'recipe-list-card',
});
}

View File

@@ -58,6 +58,8 @@ function renderGrid() {
gridEl: grid,
emptyStateEl: emptyState,
recipes: getFilteredRecipes(),
showSlotLabels: false,
cardClassName: 'recipe-list-card',
});
requestAnimationFrame(syncRecipeScrollShadow);
}
@@ -82,8 +84,8 @@ export function getRecipeListHTML() {
scrollId: 'recipe-scroll',
gridId: 'recipe-grid',
emptyStateId: 'recipe-empty-state',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]',
gridClassName: 'grid grid-cols-2 gap-3 bg-[#2d2e2b]',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-24 pb-24 bg-[#2d2e2b]',
gridClassName: 'grid grid-cols-3 gap-2 bg-[#2d2e2b]',
emptyTitle: 'Brak wyników',
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
})}