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

Update style
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m16s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-06 22:32:46 +02:00
parent c341e2e813
commit 422b29e3f0
5 changed files with 63 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
js/ui/mealPlanEditor.js
View File

@@ -46,9 +46,6 @@ export function getMealPlanEditorHTML() {
<h2 id="mpe-title" class="text-[15px] font-bold text-gray-900 leading-tight"></h2>
<p id="mpe-subtitle" class="text-[11px] text-gray-500 mt-0.5 truncate"></p>
</div>
<button id="mpe-close-btn" type="button" class="shrink-0 w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors ml-3">
<i class="fas fa-times text-xs"></i>
</button>
</div>
</div>
<div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
@@ -74,17 +71,16 @@ export function getMealPlanEditorHTML() {
</div>
<div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
</div>
<div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
<div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-16 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
<div id="mpe-ing-section" class="mb-4">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
<div id="mpe-ing-list" class="space-y-1.5"></div>
<div id="mpe-add-area" class="mt-2"></div>
</div>
</div>
<div id="mpe-footer-wrap" class="relative z-[1] shrink-0 px-5 pt-2 pb-3 flex justify-center bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
<div id="mpe-footer-shadow" class="pointer-events-none absolute inset-x-0 -top-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
<button id="mpe-confirm-btn" type="button" class="border text-white px-4 py-3 rounded-xl font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important; border-color:#444442 !important;">
<i class="fas fa-check text-xs"></i> <span id="mpe-confirm-label">Dodaj do planu</span>
<div id="mpe-footer-wrap" class="absolute bottom-0 left-0 right-0 z-[2] px-5 pb-3 flex justify-center" style="pointer-events:none; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
<button id="mpe-confirm-btn" type="button" class="border text-white px-6 py-3 rounded-full font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; border-color:#444442 !important; box-shadow:0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);">
<span id="mpe-confirm-label">Dodaj do planu</span>
</button>
</div>
</div>
@@ -247,8 +243,8 @@ export function setupMealPlanEditor() {
el.innerHTML = `
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
<div class="flex items-center pt-2">
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
<div class="flex items-start">
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
<button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
<i class="fas fa-minus text-[10px]"></i>
</button>
@@ -287,7 +283,7 @@ export function setupMealPlanEditor() {
const disp = base * S.servings;
const modified = id in S.overrides;
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
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 shuffleBtn = hasAlts
? `<button type="button" class="mpe-shuffle 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-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
@@ -332,7 +328,7 @@ export function setupMealPlanEditor() {
const def = INGREDIENTS[a.ingredientId];
const name = def?.name || a.ingredientId;
const disp = a.amount * S.servings;
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
html += `<div class="flex items-center gap-2">`;
html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
@@ -374,7 +370,7 @@ export function setupMealPlanEditor() {
<input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
<button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
</div>
<div class="max-h-40 overflow-y-auto space-y-0.5 no-scrollbar" id="mpe-add-results">
<div class="max-h-40 overflow-y-auto space-y-1 no-scrollbar" id="mpe-add-results">
${avail.length === 0
? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
@@ -413,7 +409,7 @@ export function setupMealPlanEditor() {
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
<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="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
<div class="rounded-xl border px-3 py-2" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
<div class="grid grid-flow-col auto-cols-max gap-3 text-left">
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
@@ -542,14 +538,39 @@ export function setupMealPlanEditor() {
savePlans(plans);
closeEditor();
showAppToast(S.mode === 'edit' ? 'Zapisano zmiany!' : 'Dodano do planera!');
window.refreshPlanner?.();
}
/* ── Event bindings ───────────────────────────── */
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
/* ── Swipe-to-dismiss ────────────────────────── */
const header = sheet?.children[0];
if (header && sheet) {
let startY = 0, currentY = 0, dragging = false;
header.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
currentY = 0;
dragging = true;
sheet.style.transition = 'none';
}, { passive: true });
header.addEventListener('touchmove', (e) => {
if (!dragging) return;
currentY = Math.max(0, e.touches[0].clientY - startY);
sheet.style.transform = `translateY(${currentY}px)`;
}, { passive: true });
header.addEventListener('touchend', () => {
if (!dragging) return;
dragging = false;
sheet.style.transition = 'transform 300ms cubic-bezier(0.32,0.72,0,1)';
if (currentY > 120) {
closeEditor();
} else {
sheet.style.transform = 'translateY(0)';
}
});
}
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
S.date = date;