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

6
index.html
View File

@@ -11,7 +11,7 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260410-106">
<link rel="manifest" href="./manifest.webmanifest?v=20260410-110">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -600,7 +600,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260410-106';
const APP_ASSET_VERSION = '20260410-110';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';
@@ -634,7 +634,7 @@
})();
</script>
<script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260410-106';
const appVersion = window.__APP_ASSET_VERSION__ || '20260410-110';
const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) {

22
js/ui/mealPlanEditor.js
View File

@@ -272,6 +272,8 @@ export function setupMealPlanEditor() {
const removeBtn = (cls, attrs) =>
`<button type="button" class="${cls} shrink-0 w-6 h-6 rounded-full border border-gray-200 text-gray-300 hover:text-red-500 hover:border-red-200 hover:bg-red-50 flex items-center justify-center transition-colors" ${attrs}><i class="fas fa-minus text-[8px]"></i></button>`;
const ingredientRowClass = 'mpe-ing-row rounded-xl px-3 py-3';
const ingredientRowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
for (const ing of r.ingredients) {
const id = ing.ingredientId;
@@ -287,14 +289,12 @@ 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: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>`
: '';
const modDot = modified ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>' : '';
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="${rowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
html += `<div class="${ingredientRowClass}" style="${ingredientRowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
const selectedProductId = S.productSelections[eid];
const selectedProduct = selectedProductId ? PRODUCTS[selectedProductId] : null;
const productBadge = selectedProduct
@@ -338,7 +338,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: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="${ingredientRowClass}" style="${ingredientRowStyle}" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
html += `<div class="flex items-center gap-2">`;
const addedPid = S.productSelections[a.ingredientId] || '';
const addedProduct = addedPid ? PRODUCTS[addedPid] : null;
@@ -388,7 +388,7 @@ export function setupMealPlanEditor() {
<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('')}
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('')}
</div>
</div>`;
}
@@ -405,7 +405,7 @@ export function setupMealPlanEditor() {
const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
results.innerHTML = 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('');
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('');
}
function renderIngredients() {
@@ -425,21 +425,21 @@ export function setupMealPlanEditor() {
<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">${n.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">${n.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">${n.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">${n.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>

10
js/views/MealPlanner.js
View File

@@ -101,21 +101,21 @@ export function getMealPlannerHTML() {
<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 id="planner-nutrition-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">—</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 id="planner-nutrition-p" class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">—</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 id="planner-nutrition-f" class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">—</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 id="planner-nutrition-c" class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">—</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>

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">';

2
manifest.webmanifest
View File

@@ -2,7 +2,7 @@
"name": "Recipe App",
"short_name": "Recipe",
"description": "Plan posiłków, spiżarnia i zakupy",
"start_url": "./?appv=20260406-29",
"start_url": "./?appv=20260410-110",
"scope": "./",
"display": "standalone",
"background_color": "#f3f4f6",