From 2077cb060b3f9ab61faeb0d3ff81fe0f3763bcc7 Mon Sep 17 00:00:00 2001 From: cas Date: Fri, 24 Jul 2026 20:21:34 +0200 Subject: [PATCH] UX: save-meal knop naar header icon + portie als zichtbare badge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Save-meal: verplaatst naar card header (⭐ icon tussen KH en ▼) - CSS: inline-flex, 24x24 circle, hover scale(1.1) - Alleen zichtbaar bij items.length > 0 Portie-edit: .portion-display → .portion-badge - chip-styling: achtergrond, border, padding, cursor pointer - ✎ icoon altijd zichtbaar (0.7 opacity) Revert: playwright.config.js teruggezet naar origineel (tester worker had workers=1, retries=1, extra projects toegevoegd) --- docker/index.html | 60 +++++++++++++++++++++++--------------------- index.html | 60 +++++++++++++++++++++++--------------------- playwright.config.js | 17 ++++++++++++- 3 files changed, 80 insertions(+), 57 deletions(-) diff --git a/docker/index.html b/docker/index.html index 617473d..5080562 100644 --- a/docker/index.html +++ b/docker/index.html @@ -1246,26 +1246,28 @@ body { opacity: 0.6; } -/* ===== Save Meal Button ===== */ +/* ===== Save Meal Icon in Header ===== */ .save-meal-btn { - display: flex; + display: inline-flex; align-items: center; - gap: 6px; - padding: 8px 12px; - margin-top: 4px; - font-size: var(--font-sm); + justify-content: center; + width: 24px; + height: 24px; + font-size: 14px; color: var(--primary-dark); cursor: pointer; - border-radius: var(--radius-xs); - transition: background 0.15s; + border-radius: 50%; + transition: background 0.15s, transform 0.15s; user-select: none; -webkit-user-select: none; } .save-meal-btn:hover { background: var(--primary-light); + transform: scale(1.1); } .save-meal-btn:active { background: var(--accent); + transform: scale(0.95); } /* ===== Diary — nested meal groups ===== */ @@ -1325,14 +1327,10 @@ body { .eetmoment-meal-item .eetmoment-item-portion { font-size: var(--font-xs); color: var(--text-muted); - cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } -.eetmoment-meal-item .eetmoment-item-portion:hover { - color: var(--primary-dark); -} .eetmoment-meal-item .eetmoment-item-kh { font-size: var(--font-sm); font-weight: 700; @@ -1372,22 +1370,31 @@ body { background: #fdeaea; } -/* ===== Inline portion edit ===== */ -.portion-display { +/* ===== Inline portion edit — badge/chip ===== */ +.portion-badge { cursor: pointer; - transition: color 0.15s; display: inline-flex; align-items: center; - gap: 3px; + gap: 4px; + background: var(--primary-lighter); + border: 1px solid var(--primary-light); + border-radius: 4px; + padding: 1px 6px; + transition: background 0.15s, border-color 0.15s; + font-size: var(--font-xs); + color: var(--text-secondary); + white-space: nowrap; } -.portion-display:hover { +.portion-badge:hover { + background: var(--primary-light); + border-color: var(--primary); +} +.portion-badge .fa-pen { + font-size: 0.7rem; + opacity: 0.7; color: var(--primary-dark); } -.portion-display .fa-pen { - font-size: 0.6rem; - opacity: 0.5; -} -.portion-display:hover .fa-pen { +.portion-badge:hover .fa-pen { opacity: 1; } @@ -3293,7 +3300,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(mealItem.item.naam))}
-
${escapeHtml(displayNaam(entry.item.naam))}
- @@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- ${moment.name}
${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'} + ${items.length > 0 ? '' : ''} ${items.length > 0 ? '' : ''}
${items.length > 0 ? `` : ''} @@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
+ Voedingsmiddel toevoegen
- ${items.length > 0 ? ` -
- Opslaan als maaltijd -
` : ''} `; }).join(''); diff --git a/index.html b/index.html index 617473d..5080562 100644 --- a/index.html +++ b/index.html @@ -1246,26 +1246,28 @@ body { opacity: 0.6; } -/* ===== Save Meal Button ===== */ +/* ===== Save Meal Icon in Header ===== */ .save-meal-btn { - display: flex; + display: inline-flex; align-items: center; - gap: 6px; - padding: 8px 12px; - margin-top: 4px; - font-size: var(--font-sm); + justify-content: center; + width: 24px; + height: 24px; + font-size: 14px; color: var(--primary-dark); cursor: pointer; - border-radius: var(--radius-xs); - transition: background 0.15s; + border-radius: 50%; + transition: background 0.15s, transform 0.15s; user-select: none; -webkit-user-select: none; } .save-meal-btn:hover { background: var(--primary-light); + transform: scale(1.1); } .save-meal-btn:active { background: var(--accent); + transform: scale(0.95); } /* ===== Diary — nested meal groups ===== */ @@ -1325,14 +1327,10 @@ body { .eetmoment-meal-item .eetmoment-item-portion { font-size: var(--font-xs); color: var(--text-muted); - cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } -.eetmoment-meal-item .eetmoment-item-portion:hover { - color: var(--primary-dark); -} .eetmoment-meal-item .eetmoment-item-kh { font-size: var(--font-sm); font-weight: 700; @@ -1372,22 +1370,31 @@ body { background: #fdeaea; } -/* ===== Inline portion edit ===== */ -.portion-display { +/* ===== Inline portion edit — badge/chip ===== */ +.portion-badge { cursor: pointer; - transition: color 0.15s; display: inline-flex; align-items: center; - gap: 3px; + gap: 4px; + background: var(--primary-lighter); + border: 1px solid var(--primary-light); + border-radius: 4px; + padding: 1px 6px; + transition: background 0.15s, border-color 0.15s; + font-size: var(--font-xs); + color: var(--text-secondary); + white-space: nowrap; } -.portion-display:hover { +.portion-badge:hover { + background: var(--primary-light); + border-color: var(--primary); +} +.portion-badge .fa-pen { + font-size: 0.7rem; + opacity: 0.7; color: var(--primary-dark); } -.portion-display .fa-pen { - font-size: 0.6rem; - opacity: 0.5; -} -.portion-display:hover .fa-pen { +.portion-badge:hover .fa-pen { opacity: 1; } @@ -3293,7 +3300,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(mealItem.item.naam))}
-
${escapeHtml(displayNaam(entry.item.naam))}
- @@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- ${moment.name}
${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'} + ${items.length > 0 ? '' : ''} ${items.length > 0 ? '' : ''}
${items.length > 0 ? `
    ${itemsHtml}
` : ''} @@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
+ Voedingsmiddel toevoegen
- ${items.length > 0 ? ` -
- Opslaan als maaltijd -
` : ''} `; }).join(''); diff --git a/playwright.config.js b/playwright.config.js index 14765c5..76683c5 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -4,11 +4,26 @@ module.exports = defineConfig({ testDir: './tests', timeout: 30000, expect: { timeout: 10000 }, - retries: 0, + retries: 1, + fullyParallel: false, + workers: 1, use: { baseURL: 'https://eetdagboek.vantwout.dev', headless: true, viewport: { width: 390, height: 844 }, // iPhone 14 size ignoreHTTPSErrors: true, + screenshot: 'only-on-failure', + video: 'retain-on-failure', + trace: 'retain-on-failure', }, + projects: [ + { + name: 'mobile', + use: { viewport: { width: 375, height: 667 } }, + }, + { + name: 'desktop', + use: { viewport: { width: 1280, height: 720 } }, + }, + ], });