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

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

Browse Source
This commit is contained in:
Rafał
2026-04-08 22:53:17 +02:00
parent 165f39d0b7
commit 6bf50f67ad
5 changed files with 94 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@@ -11,7 +11,7 @@
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<title>Recipe App - Modular</title> <title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260408-82"> <link rel="manifest" href="./manifest.webmanifest?v=20260408-97">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png"> <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -233,9 +233,16 @@
} }
#main-view, #main-view,
#main-view > div:last-child, #main-view > div:last-child,
#recipe-grid { #recipe-grid,
#planner-picker-grid {
background: #2d2e2b !important; background: #2d2e2b !important;
} }
#recipe-grid,
#planner-picker-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem !important;
align-items: stretch;
}
#planner-view, #planner-view,
#planner-view > div:first-child, #planner-view > div:first-child,
#planner-scroll, #planner-scroll,
@@ -255,24 +262,82 @@
} }
/* Cards and sheets */ /* Cards and sheets */
#recipe-grid > * { #recipe-grid > *,
#planner-picker-grid > * {
background: #393937 !important; background: #393937 !important;
border: none !important; border: none !important;
border-radius: 1.75rem !important; border-radius: 1.75rem !important;
box-shadow: none !important; box-shadow: none !important;
transition: transform 180ms ease, box-shadow 180ms ease !important; transition: transform 180ms ease, box-shadow 180ms ease !important;
} }
#recipe-grid > *:hover { #recipe-grid > .recipe-list-card,
#planner-picker-grid > .recipe-list-card {
border-radius: 1.25rem !important;
height: 11.9rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-media,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-media {
height: 5.25rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-body,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-body {
padding: 0.58rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-title,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-title {
display: -webkit-box;
min-height: 2.76rem;
margin-bottom: 0.55rem;
font-size: 0.66rem;
font-weight: 400 !important;
line-height: 0.92rem;
overflow: hidden;
text-decoration: none !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta {
margin-bottom: 0.45rem;
gap: 0.2rem;
font-size: 0.58rem;
line-height: 0.78rem;
flex-wrap: nowrap;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta > div,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta > div {
min-width: 0;
white-space: nowrap;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta i,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta i {
font-size: 0.52rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-labels,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-labels {
gap: 0.25rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-label,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-label {
padding: 0.14rem 0.36rem;
font-size: 0.54rem;
line-height: 0.72rem;
}
#recipe-grid > *:hover,
#planner-picker-grid > *:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: none !important; box-shadow: none !important;
} }
#recipe-grid > * img { #recipe-grid > * img,
#planner-picker-grid > * img {
transition: transform 240ms ease; transition: transform 240ms ease;
} }
#recipe-grid > *:hover img { #recipe-grid > *:hover img,
#planner-picker-grid > *:hover img {
transform: scale(1.04); transform: scale(1.04);
} }
#recipe-grid > * > div:first-child::after, #recipe-grid > * > div:first-child::after,
#planner-picker-grid > * > div:first-child::after,
#rd-hero::after { #rd-hero::after {
content: ''; content: '';
position: absolute; position: absolute;
@@ -295,7 +360,9 @@
0 5px 10px rgba(0, 0, 0, 0.16), 0 5px 10px rgba(0, 0, 0, 0.16),
0 14px 22px rgba(0, 0, 0, 0.24), 0 14px 22px rgba(0, 0, 0, 0.24),
0 22px 34px rgba(0, 0, 0, 0.18), 0 22px 34px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 2px 6px rgba(0, 0, 0, 0.16),
inset 0 -1px 2px rgba(255, 255, 255, 0.02) !important;
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
} }
@@ -322,7 +389,9 @@
0 6px 12px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.18),
0 16px 24px rgba(0, 0, 0, 0.24), 0 16px 24px rgba(0, 0, 0, 0.24),
0 24px 36px rgba(0, 0, 0, 0.18), 0 24px 36px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 2px 7px rgba(0, 0, 0, 0.18),
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
} }
#recipe-search-input, #recipe-search-input,
#planner-picker-search { #planner-picker-search {
@@ -531,7 +600,7 @@
</div> </div>
<script> <script>
const APP_ASSET_VERSION = '20260408-82'; const APP_ASSET_VERSION = '20260408-97';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version'; const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv'; const APP_VERSION_QUERY_KEY = 'appv';
@@ -565,7 +634,7 @@
})(); })();
</script> </script>
<script type="module"> <script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260408-82'; const appVersion = window.__APP_ASSET_VERSION__ || '20260408-97';
const recoveryKey = `recipe-app-recovery-${appVersion}`; const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) { function renderBootstrapError(message) {

14
js/ui/recipeGrid.js
View File

@@ -34,21 +34,21 @@ function renderRecipeCard(recipe, { showSlotLabels = true, cardClassName = '' }
return ` return `
<button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer text-left transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.28) !important;"> <button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer text-left transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.28) !important;">
<div class="h-32 bg-[#d4d4d4] relative overflow-hidden"> <div class="recipe-browser-card-media h-32 bg-[#d4d4d4] relative overflow-hidden">
${recipe.image ${recipe.image
? `<img src="${escapeHtml(recipe.image)}" alt="${escapeHtml(recipe.title)}" class="w-full h-full object-cover">` ? `<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>`} : `<span class="absolute inset-0 flex items-center justify-center text-white font-medium text-xs">${escapeHtml(recipe.thumbLabel)}</span>`}
</div> </div>
<div class="p-3 flex flex-col flex-1"> <div class="recipe-browser-card-body p-3 flex flex-col flex-1">
<h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3> <h3 class="recipe-browser-card-title 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="recipe-browser-card-footer mt-auto">
<div class="flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2"> <div class="recipe-browser-card-meta 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]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div> <div class="flex items-center gap-1"><i class="fas fa-clock text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div>
<div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div> <div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
</div> </div>
${labels.length > 0 ${labels.length > 0
? `<div class="flex flex-wrap gap-1"> ? `<div class="recipe-browser-card-labels flex flex-wrap gap-1">
${labels.map((label) => `<span class="px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')} ${labels.map((label) => `<span class="recipe-browser-card-label px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
</div>` </div>`
: ''} : ''}
</div> </div>

2
js/ui/recipeSearchField.js
View File

@@ -1,5 +1,5 @@
export const RECIPE_SEARCH_SHELL_BASE_SHADOW = export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
'0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)'; '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 2px 6px rgba(0,0,0,0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';
function escapeHtml(s) { function escapeHtml(s) {
return String(s) return String(s)

6
js/views/MealPlanner.js
View File

@@ -146,7 +146,7 @@ export function getMealPlannerHTML() {
</div> </div>
</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-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 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"> <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> <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>`} : `<span class="w-full h-full flex items-center justify-center text-white text-[8px] font-medium">${escapeHtml(recipe.thumbLabel)}</span>`}
</div> </div>
<div class="min-w-0"> <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"> <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 <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> <span class="mx-1.5 text-[#6d6c67]">·</span>
@@ -772,7 +772,7 @@ function renderPickerGrid(slotId, plans, query = '') {
emptyStateEl: emptyState, emptyStateEl: emptyState,
recipes: sorted, recipes: sorted,
showSlotLabels: false, showSlotLabels: false,
cardClassName: 'planner-picker-recipe-card', cardClassName: 'recipe-list-card',
}); });
} }

6
js/views/RecipeList.js
View File

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