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

Redesign nutrition widgets
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-08 18:46:20 +02:00
parent e2b15956a0
commit 4706430316
2 changed files with 42 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/ui/mealPlanEditor.js
View File

@@ -267,10 +267,8 @@ export function getMealPlanEditorHTML() {
</div> </div>
</div> </div>
<div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;"> <div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
<div class="flex items-stretch gap-3"> <div id="mpe-nutrition-section"></div>
<div id="mpe-nutrition-section" class="flex-1 min-w-0"></div> <div id="mpe-servings-row" class="mt-3"></div>
<div id="mpe-servings-row" class="shrink-0 w-[5.25rem]"></div>
</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 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>
<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-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;">
@@ -449,10 +447,9 @@ export function setupMealPlanEditor() {
const el = document.getElementById('mpe-servings-row'); const el = document.getElementById('mpe-servings-row');
if (!el) return; if (!el) return;
el.innerHTML = ` 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;"> <div class="flex items-center justify-between gap-3">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p> <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
<div class="flex items-start"> <div class="flex h-[2rem] w-[5.25rem] shrink-0 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);">
<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"> <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> <i class="fas fa-minus text-[10px]"></i>
</button> </button>
@@ -461,7 +458,6 @@ export function setupMealPlanEditor() {
<i class="fas fa-plus text-[10px]"></i> <i class="fas fa-plus text-[10px]"></i>
</button> </button>
</div> </div>
</div>
</div>`; </div>`;
} }

14
js/views/RecipeDetailV2.js
View File

@@ -212,8 +212,6 @@ function renderNutritionSummary(recipe) {
return ` return `
<div class="mb-4"> <div class="mb-4">
<div class="flex items-stretch gap-3">
<div class="flex-1 min-w-0">
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;"> <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> <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="flex-1 flex items-center">
@@ -237,12 +235,9 @@ function renderNutritionSummary(recipe) {
</div> </div>
</div> </div>
</div> </div>
</div> <div class="mt-3 flex items-center justify-between gap-3">
<div class="shrink-0 w-[5.25rem]"> <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;"> <div class="flex h-[2rem] w-[5.25rem] shrink-0 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);">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
<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="rd-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"> <button type="button" id="rd-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> <i class="fas fa-minus text-[10px]"></i>
</button> </button>
@@ -252,9 +247,6 @@ function renderNutritionSummary(recipe) {
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>`; </div>`;
} }