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

Light mode fixes

Browse Source
This commit is contained in:
Rafał
2026-04-19 10:21:49 +02:00
parent 3055ce53c1
commit 1bca99a6bb
2 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -179,6 +179,8 @@
.text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; } .text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; }
.text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; } .text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; }
.text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; } .text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; }
.text-gray-100 { color: rgb(var(--text-primary-rgb)) !important; }
.text-gray-50 { color: rgb(var(--text-primary-rgb)) !important; }
.text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; } .text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; }
.text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; } .text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; }
.text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; } .text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; }

44
js/views/Pantry.js
View File

@@ -551,26 +551,28 @@ function classifyIngredients(searchQuery) {
/* ══════════════════════ TILE RENDERING ══════════════════════ */ /* ══════════════════════ TILE RENDERING ══════════════════════ */
function tileIconHtml(item) { function tileIconHtml(item, size = 'sm') {
const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
if (item.image) { if (item.image) {
return `<div class="w-6 h-6 rounded-md shrink-0 overflow-hidden" style="background:rgb(var(--card-soft-rgb));"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain" style="padding:1px;"></div>`; return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
} }
return `<div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${item.icon} text-[11px]" style="color:rgb(var(--text-faint-rgb));"></i></div>`; return `<div class="${wrap} flex items-center justify-center shrink-0"><i class="fas ${item.icon} ${iconSize}" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
} }
function shortfallTileHtml(item) { function shortfallTileHtml(item) {
const clamp = item.name.length > 25 ? ' min-w-0' : ''; const clamp = item.name.length > 25 ? ' min-w-0' : '';
return ` return `
<button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}"> <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
<div class="flex items-center gap-1.5 min-w-0"> ${tileIconHtml(item, 'lg')}
${tileIconHtml(item)} <div class="flex-1 min-w-0 flex flex-col gap-1">
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
</div> <div class="flex items-center gap-2">
<div class="w-full flex items-center gap-2"> <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));"> <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
<div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
</button>`; </button>`;
} }
@@ -578,16 +580,16 @@ function shortfallTileHtml(item) {
function sufficientTileHtml(item) { function sufficientTileHtml(item) {
const clamp = item.name.length > 25 ? ' min-w-0' : ''; const clamp = item.name.length > 25 ? ' min-w-0' : '';
return ` return `
<button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}"> <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
<div class="flex items-center gap-1.5 min-w-0"> ${tileIconHtml(item, 'lg')}
${tileIconHtml(item)} <div class="flex-1 min-w-0 flex flex-col gap-1">
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p> <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
</div> <div class="flex items-center gap-2">
<div class="w-full flex items-center gap-2"> <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));"> <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
<div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
</div> </div>
</button>`; </button>`;
} }