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

Redesign recipe list

Browse Source
This commit is contained in:
Rafał
2026-04-06 11:20:25 +02:00
parent 0aa8d12c1e
commit 2b0601956f
7 changed files with 604 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
js/views/RecipeList.js
View File

@@ -10,6 +10,8 @@ function escapeHtml(s) {
}
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
const DEFAULT_MIN_MINUTES = 5;
const DEFAULT_MAX_MINUTES = 120;
function slotLabelsFor(recipe) {
return (recipe.allowedSlots || [])
@@ -21,15 +23,16 @@ let filterState = {
query: '',
slots: [],
tags: [],
maxMinutes: 120,
minMinutes: DEFAULT_MIN_MINUTES,
maxMinutes: DEFAULT_MAX_MINUTES,
};
function matchesFilters(recipe) {
const { query, slots, tags, maxMinutes } = filterState;
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
if (query) {
const q = query.toLowerCase();
const haystack = `${recipe.title} ${recipe.description || ''} ${(recipe.tags || []).join(' ')}`.toLowerCase();
const haystack = `${recipe.title} ${(recipe.tags || []).join(' ')}`.toLowerCase();
if (!haystack.includes(q)) return false;
}
@@ -42,7 +45,8 @@ function matchesFilters(recipe) {
if (!tags.some((t) => recipeTags.includes(t.toLowerCase()))) return false;
}
if (recipe.minutes > maxMinutes) return false;
if (minMinutes > DEFAULT_MIN_MINUTES && recipe.minutes < minMinutes) return false;
if (maxMinutes < DEFAULT_MAX_MINUTES && recipe.minutes > maxMinutes) return false;
return true;
}
@@ -54,22 +58,21 @@ function getFilteredRecipes() {
function renderRecipeCard(recipe) {
const labels = slotLabelsFor(recipe);
return `
<div onclick="openRecipeDetail('${escapeHtml(recipe.id)}')" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
<div onclick="openRecipeDetail('${escapeHtml(recipe.id)}')" class="rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:none !important;">
<div class="h-32 bg-[#d4d4d4] relative overflow-hidden">
${recipe.image
? `<img src="${escapeHtml(recipe.image)}" alt="${escapeHtml(recipe.title)}" class="w-full h-full object-cover">`
: `<span class="absolute inset-0 flex items-center justify-center text-white font-medium text-xs">${escapeHtml(recipe.thumbLabel)}</span>`}
</div>
<div class="p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">${escapeHtml(recipe.title)}</h3>
<p class="text-gray-500 text-xs mb-3 line-clamp-2">${escapeHtml(recipe.description || '')}</p>
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
<div class="mt-auto">
<div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>${recipe.minutes} min</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
<div class="flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2">
<div class="flex items-center gap-1"><i class="fas fa-clock text-[#8f8b84]"></i><span>${recipe.minutes} min</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
</div>
<div class="flex flex-wrap gap-1">
${labels.map((l) => `<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">${escapeHtml(l)}</span>`).join('')}
${labels.map((l) => `<span class="px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(l)}</span>`).join('')}
</div>
</div>
</div>
@@ -98,20 +101,18 @@ function renderGrid() {
export function getRecipeListHTML() {
return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10">
<div class="p-4 border-b border-gray-200 mt-4 bg-white">
<div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
<div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
<input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="flex-1 py-2.5 bg-transparent outline-none text-gray-600 placeholder-gray-400 text-sm">
<div class="w-px h-6 bg-gray-200"></div>
<button onclick="openFilters()" class="px-4 text-gray-700 hover:text-black flex items-center justify-center transition-colors">
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
<div class="px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important;">
<div id="recipe-search-shell" class="relative flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.7rem !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015) !important;">
<input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
<button id="recipe-filter-btn" onclick="openFilters()" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h"></i>
</button>
</div>
</div>
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]">
<div id="recipe-grid" class="grid grid-cols-2 gap-3"></div>
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="recipe-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
</div>
</div>
`;