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

Redesign meal time cards in planner
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m23s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-07 19:45:18 +02:00
parent 62d3ee1ddd
commit 32d387c94b
3 changed files with 46 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
js/views/MealPlanner.js
View File

@@ -421,7 +421,7 @@ function renderDayContent(state) {
</div>`;
}).join('');
const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[#444442] text-[#9b978f] hover:text-[#ddd6ca] hover:border-[#6d6c67] hover:bg-[#3a3a37] flex items-center justify-center transition-colors shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[#444442] text-[#9b978f] flex items-center justify-center shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
const kcalPill = slotKcal > 0
? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:#2d2e2b; color:#d7d2c8;">${slotKcal} kcal</span>`
@@ -442,13 +442,16 @@ function renderDayContent(state) {
if (entries.length > 0) return filledCard;
return `
<div class="rounded-xl overflow-hidden" style="background:transparent !important; border:1.5px dashed #444442; box-shadow:none;" data-slot-id="${slot.id}">
<div class="rounded-xl bg-[#393937] overflow-hidden" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
<div class="flex items-center gap-2 px-3 py-2.5">
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#7d7a74] shrink-0" aria-hidden="true"></i>
<span class="text-[13px] font-semibold text-[#9b978f] truncate min-w-0">${slot.label}</span>
<i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
<span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0">${slot.label}</span>
<span class="ml-auto"></span>
${addBtn}
</div>
<div class="px-3 pb-2.5 -mt-0.5">
<p class="text-[11px] text-[#7d7a74] italic pl-9">Zaplanuj posiłek</p>
</div>
</div>`;
}).join('');
}