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

Refine ingredient and nutrition card sizing across planner views
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m22s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-10 18:41:10 +02:00
parent 4c4a56a75c
commit 8a8a4ad3fd
5 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/views/RecipeDetailV2.js
View File

@@ -216,21 +216,21 @@ function renderNutritionSummary(recipe) {
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
<div class="flex-1 flex items-center">
<div class="grid grid-cols-4 gap-1.5 w-full">
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${total.kcal}</p>
<p class="text-[9px] text-gray-500 font-medium">kcal</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${total.protein}g</p>
<p class="text-[9px] text-gray-500 font-medium">białko</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${total.fat}g</p>
<p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${total.carbs}g</p>
<p class="text-[9px] text-gray-500 font-medium">węgl.</p>
<p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
</div>
</div>
</div>
@@ -262,13 +262,14 @@ function renderIngredients(recipe) {
const effectiveName = effectiveDef?.name || effectiveId;
const scaledAmount = ing.amount * currentServings;
const isExpanded = expandedAlternatives.has(origId);
const rowClass = 'rd-ing-row rounded-xl px-3 py-3';
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
const toggleBtn = hasAlts
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
: '';
let rowHtml = `<div class="rd-ing-row rounded-xl p-2.5" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
let rowHtml = `<div class="${rowClass}" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
rowHtml += '<div class="flex items-center gap-2">';
rowHtml += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(effectiveName)}</span></div>`;
rowHtml += '<div class="shrink-0 flex items-center gap-2">';