ulfr/homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify UX

Browse Source
This commit is contained in:
Rafał
2026-03-25 23:57:47 +01:00
parent 2ff7e6f8ce
commit 6e76977ace
4 changed files with 492 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
stacks/recipe/js/views/RecipeDetail.js
View File

@@ -2,144 +2,142 @@ export function getRecipeDetailHTML() {
return `
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
<div class="absolute top-0 w-full p-4 flex justify-between z-40 mt-4">
<button onclick="closeRecipeDetail()" class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
<i class="fas fa-arrow-left"></i>
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
<i class="fas fa-arrow-left text-[13px]"></i>
</button>
<button class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
<i class="far fa-heart"></i>
<button class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
<i class="far fa-heart text-[13px]"></i>
</button>
</div>
<div class="h-[260px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
<span class="text-white font-medium text-lg">Zdjęcie: Serek z owocami</span>
<div class="h-[220px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
<span class="text-white font-medium text-[15px]">Zdjęcie: Serek z owocami</span>
</div>
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-8 flex flex-col flex-1 overflow-hidden">
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
<div class="mb-4 px-6 shrink-0">
<div class="flex justify-between items-start mb-3">
<h1 class="text-2xl font-bold text-gray-900">Serek wiejski z orzechami i owocami</h1>
<div class="mb-3 px-5 shrink-0">
<div class="flex justify-between items-start mb-2.5">
<h1 class="text-xl font-bold text-gray-900">Serek wiejski z orzechami i owocami</h1>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Śniadanie</span>
<span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Wegetariańskie</span>
<span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Słodkie</span>
<div class="flex flex-wrap gap-1.5 mb-3">
<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Śniadanie</span>
<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Wegetariańskie</span>
<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Słodkie</span>
</div>
<div class="flex justify-between items-center text-sm text-gray-600 font-medium">
<div class="flex gap-4">
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400"></i><span>5 min</span></div>
<div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400"></i><span>642 kcal</span></div>
<div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
<div class="flex gap-3.5">
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span>5 min</span></div>
<div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400 text-xs"></i><span>642 kcal</span></div>
</div>
<div class="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
<button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[10px]"></i></button>
<div class="flex items-center gap-1 px-2">
<span id="servings-count" class="font-bold text-gray-900 text-sm w-3 text-center">1</span>
<span class="text-xs text-gray-500"><i class="fas fa-user-friends"></i></span>
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
<button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
<div class="flex items-center gap-1 px-1.5">
<span id="servings-count" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
<span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
</div>
<button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[10px]"></i></button>
<button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
</div>
</div>
</div>
<div class="flex border-b border-gray-200 mb-2 px-6 shrink-0">
<button class="flex-1 pb-3 text-sm font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Składniki</button>
<button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Kroki</button>
<button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Wartości</button>
<div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
<button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Składniki</button>
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Kroki</button>
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Wartości</button>
</div>
<div class="flex-1 overflow-y-auto px-6 pt-2 pb-10 no-scrollbar relative">
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
<div id="tab-ingredients" class="tab-content block animate-fade-in">
<div class="flex justify-between items-end mb-4">
<span class="text-xs text-gray-500 font-medium">Zaznacz, by dodać do listy zakupów</span>
<div class="flex justify-between items-end mb-3">
<span class="text-[11px] text-gray-500 font-medium">Zaznacz, by dodać do listy zakupów</span>
</div>
<ul class="space-y-0 mb-6" id="ingredient-list">
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<ul class="space-y-0 mb-5" id="ingredient-list">
<li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Serek wiejski</span>
<span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="200" data-unit="g">200 g</span>
<span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors">Serek wiejski</span>
<span class="font-medium text-gray-900 text-[13px] ingredient-amount tabular-nums" data-base-amount="200" data-unit="g">200 g</span>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Miód</span>
<span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="10" data-unit="g">10 g</span>
<span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors">Miód</span>
<span class="font-medium text-gray-900 text-[13px] ingredient-amount tabular-nums" data-base-amount="10" data-unit="g">10 g</span>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-orzechy">Orzechy włoskie</span>
<div class="flex items-center gap-3">
<button onclick="event.stopPropagation(); openSwapModal('orzechy')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[10px]"></i>
<span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-orzechy">Orzechy włoskie</span>
<div class="flex items-center gap-2.5">
<button onclick="event.stopPropagation(); openSwapModal('orzechy')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[9px]"></i>
</button>
<span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="50" data-unit="g">50 g</span>
<span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="50" data-unit="g">50 g</span>
</div>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce1">Truskawki</span>
<div class="flex items-center gap-3">
<button onclick="event.stopPropagation(); openSwapModal('owoce1')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[10px]"></i>
<span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce1">Truskawki</span>
<div class="flex items-center gap-2.5">
<button onclick="event.stopPropagation(); openSwapModal('owoce1')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[9px]"></i>
</button>
<span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="100" data-unit="g">100 g</span>
<span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="100" data-unit="g">100 g</span>
</div>
</li>
<li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
<div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
<span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce2">Borówki ameryk.</span>
<div class="flex items-center gap-3">
<button onclick="event.stopPropagation(); openSwapModal('owoce2')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[10px]"></i>
<span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce2">Borówki ameryk.</span>
<div class="flex items-center gap-2.5">
<button onclick="event.stopPropagation(); openSwapModal('owoce2')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
<i class="fas fa-exchange-alt text-[9px]"></i>
</button>
<span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="100" data-unit="g">100 g</span>
<span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="100" data-unit="g">100 g</span>
</div>
</li>
</ul>
<button class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm flex items-center justify-center gap-2 mb-6">
<i class="fas fa-plus"></i> Dodaj do listy zakupów
<button class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold shadow-sm transition-colors text-[13px] flex items-center justify-center gap-2 mb-5">
<i class="fas fa-plus text-xs"></i> Dodaj do listy zakupów
</button>
</div>
<div id="tab-steps" class="tab-content hidden animate-fade-in">
<div class="space-y-6 pb-6">
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">1</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Przełóż serek wiejski do miseczki.</p></div>
<div class="space-y-5 pb-5">
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">1</div>
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Przełóż serek wiejski do miseczki.</p></div>
</div>
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">2</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Dodaj miód i delikatnie wymieszaj.</p></div>
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">2</div>
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Dodaj miód i delikatnie wymieszaj.</p></div>
</div>
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">3</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Orzechy posiekaj na mniejsze kawałki i posyp nimi serek z miodem.</p></div>
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">3</div>
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Orzechy posiekaj na mniejsze kawałki i posyp nimi serek z miodem.</p></div>
</div>
<div class="flex gap-4">
<div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">4</div>
<div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Umyj owoce (ew. pokrój na połówki) i ułóż na wierzchu. Gotowe!</p></div>
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">4</div>
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Umyj owoce (ew. pokrój na połówki) i ułóż na wierzchu. Gotowe!</p></div>
</div>
</div>
</div>
<div id="tab-nutrition" class="tab-content hidden animate-fade-in">
<div class="bg-gray-50 rounded-xl p-5 border border-gray-100 mb-6">
<h3 class="font-bold text-gray-900 border-b border-gray-200 pb-2 mb-2 text-lg">Wartości odżywcze</h3>
<p class="text-xs text-gray-500 mb-4">Dla bazowej porcji (1 porcja)</p>
<div class="bg-gray-50 rounded-xl p-4 border border-gray-100 mb-5">
<ul class="space-y-0 divide-y divide-gray-200">
<li class="flex justify-between py-2.5 font-bold"><span class="text-gray-900 text-sm">Kalorie</span><span class="text-gray-900 text-sm">642 kcal</span></li>
<li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Białko</span><span class="font-medium text-gray-900 text-sm">32 g</span></li>
<li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Tłuszcze</span><span class="font-medium text-gray-900 text-sm">43 g</span></li>
<li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Węglowodany</span><span class="font-medium text-gray-900 text-sm">41 g</span></li>
<li class="flex justify-between py-2 font-bold"><span class="text-gray-900 text-[13px]">Kalorie</span><span class="text-gray-900 text-[13px] tabular-nums">642 kcal</span></li>
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Białko</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">32 g</span></li>
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Tłuszcze</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">43 g</span></li>
<li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Węglowodany</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">41 g</span></li>
</ul>
</div>
</div>
@@ -149,11 +147,11 @@ export function getRecipeDetailHTML() {
<div id="swap-backdrop" onclick="closeSwapModal()" class="absolute inset-0 bg-black/40 z-40 hidden opacity-0 transition-opacity duration-300"></div>
<div id="swap-modal" class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)] z-50 transform translate-y-full transition-transform duration-300 ease-in-out p-6 flex flex-col max-h-[60%]">
<div class="flex justify-between items-center mb-5 shrink-0">
<h3 class="text-xl font-bold text-gray-900">Zmień <span id="swap-title-target" class="text-blue-600">składnik</span></h3>
<button onclick="closeSwapModal()" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 transition-colors">
<i class="fas fa-times text-sm"></i>
<div id="swap-modal" class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)] z-50 transform translate-y-full transition-transform duration-300 ease-in-out p-5 flex flex-col max-h-[60%]">
<div class="flex justify-between items-center mb-4 shrink-0">
<h3 class="text-[15px] font-bold text-gray-900">Zmień <span id="swap-title-target" class="text-blue-600">składnik</span></h3>
<button onclick="closeSwapModal()" class="w-7 h-7 flex items-center justify-center bg-gray-100 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 transition-colors">
<i class="fas fa-times text-xs"></i>
</button>
</div>
@@ -253,9 +251,9 @@ export function setupRecipeDetail() {
if (opt.color === 'green') badgeClass = 'text-green-600 bg-green-100';
return `
<button onclick="confirmSwap('${opt.name}')" class="w-full flex justify-between items-center p-4 border border-gray-200 rounded-xl hover:border-gray-900 hover:shadow-sm transition-all bg-gray-50 hover:bg-white text-left">
<span class="font-medium text-gray-800">${opt.name}</span>
<span class="text-[11px] px-2 py-1 rounded-md font-semibold ${badgeClass}">${opt.hint}</span>
<button onclick="confirmSwap('${opt.name}')" class="w-full flex justify-between items-center p-3 border border-gray-200 rounded-xl hover:border-gray-900 hover:shadow-sm transition-all bg-gray-50 hover:bg-white text-left">
<span class="font-medium text-[13px] text-gray-800">${opt.name}</span>
<span class="text-[10px] px-2 py-0.5 rounded-md font-semibold ${badgeClass}">${opt.hint}</span>
</button>
`;
}).join('');