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

Replace ingredients images with SVGs

Browse Source
This commit is contained in:
Rafał
2026-04-17 20:38:57 +02:00
parent 9bd6627fe2
commit 35b8babd0c
91 changed files with 112 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/ui/ingredientCard.js
View File

@@ -5,7 +5,7 @@ import {
getProductsForIngredient,
ingredientHasProducts,
pantryQtyStep,
} from '../data/catalog.js?v=8';
} from '../data/catalog.js?v=9';
import {
addOrMergeShoppingLines,
KITCHEN_LIST_ID,
@@ -76,7 +76,8 @@ function macroLine(n) {
function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg') {
if (image) {
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
const fit = image.endsWith('.svg') ? 'object-contain' : 'object-cover';
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} ${fit} shrink-0">`;
}
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
}
@@ -154,30 +155,35 @@ export function getIngredientCardHTML({
overlayStyle = 'pointer-events:none; background:rgba(0,0,0,0.5);',
cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
cardStyle = 'background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
heroHeightClass = 'h-[180px]',
} = {}) {
if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
return `
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
<div id="${idBase}" class="${cardClass}" style="${cardStyle}">
<div id="${idBase}-hero" class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
<img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
<div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
<div class="relative px-4 pt-4 pb-2">
<div class="flex items-start gap-3 pr-10">
<div id="${idBase}-hero" class="relative w-16 h-16 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:#393937;">
<img id="${idBase}-img" class="w-full h-full hidden" alt="" />
<div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center">
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:#6d6c67;"></i>
</div>
</div>
<div class="flex-1 min-w-0 pt-0.5">
<div class="flex items-center gap-1.5">
<button type="button" id="${idBase}-back" class="hidden w-5 h-5 rounded-full items-center justify-center shrink-0" style="background:#393937; color:#ddd6ca;" aria-label="Wróć do składnika">
<i class="fas fa-chevron-left text-[9px]"></i>
</button>
<p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider truncate" style="color:#6ee7b7;"></p>
</div>
<h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
<p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
</div>
</div>
<button type="button" id="${idBase}-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
<i class="fas fa-chevron-left text-sm"></i>
</button>
<button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
<button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:#393937; color:#ddd6ca;" aria-label="Zamknij">
<i class="fas fa-times text-sm"></i>
</button>
</div>
<div class="px-4 pt-3 pb-4 space-y-3">
<div>
<p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#6ee7b7;"></p>
<h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
<p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
</div>
<div class="px-4 pt-2 pb-4 space-y-3">
<div id="${idBase}-nutrition"></div>
<div id="${idBase}-stock"></div>
<div id="${idBase}-products"></div>
@@ -239,23 +245,22 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
const fallback = el('fallback');
const fallbackIcon = el('fallback-icon');
if (heroEl) {
heroEl.style.height = '';
heroEl.style.background = '#393937';
}
if (img && fallback) {
const image = isListMode ? def.image : (product?.image || def.image);
const altName = isListMode ? def.name : (product?.name || def.name);
if (image) {
img.src = image;
img.alt = altName;
const isSvg = image.endsWith('.svg');
img.classList.toggle('object-contain', isSvg);
img.classList.toggle('object-cover', !isSvg);
img.style.padding = isSvg ? '6px' : '';
img.classList.remove('hidden');
fallback.classList.add('hidden');
} else {
img.classList.add('hidden');
fallback.classList.remove('hidden');
if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-2xl`;
}
}
@@ -286,6 +291,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
if (backBtn) {
backBtn.classList.toggle('hidden', !isBackAvailable);
backBtn.classList.toggle('flex', Boolean(isBackAvailable));
}
}