UX: save-meal knop naar header icon + portie als zichtbare badge
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)
This commit is contained in:
cas
parent
94ce6954ff
commit
2077cb060b
3 changed files with 80 additions and 57 deletions
|
|
@ -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-
|
|||
<div class="eetmoment-item-info">
|
||||
<div class="eetmoment-item-name">${escapeHtml(displayNaam(mealItem.item.naam))}</div>
|
||||
<div class="eetmoment-item-portion">
|
||||
<span class="portion-display" title="Portie wijzigen"
|
||||
<span class="portion-badge" title="Portie wijzigen"
|
||||
data-action="edit-portie"
|
||||
data-moment="${moment.id}"
|
||||
data-entry="${i}"
|
||||
|
|
@ -3345,7 +3352,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<div class="eetmoment-item-info">
|
||||
<div class="eetmoment-item-name">${escapeHtml(displayNaam(entry.item.naam))}</div>
|
||||
<div class="eetmoment-item-portion">
|
||||
<span class="portion-display" title="Portie wijzigen"
|
||||
<span class="portion-badge" title="Portie wijzigen"
|
||||
data-action="edit-portie"
|
||||
data-moment="${moment.id}"
|
||||
data-entry="${i}">
|
||||
|
|
@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="eetmoment-name">${moment.name}</span>
|
||||
</div>
|
||||
<span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
|
||||
${items.length > 0 ? '<span class=\"save-meal-btn\" data-moment=\"' + moment.id + '\"><i class=\"fas fa-star\"></i></span>' : ''}
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
|
||||
</div>
|
||||
${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
|
||||
|
|
@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<div class="eetmoment-add-btn" data-moment="${moment.id}">
|
||||
<span>+</span> Voedingsmiddel toevoegen
|
||||
</div>
|
||||
${items.length > 0 ? `
|
||||
<div class="save-meal-btn" data-moment="${moment.id}">
|
||||
<i class="fas fa-star"></i> Opslaan als maaltijd
|
||||
</div>` : ''}
|
||||
</li>
|
||||
`;
|
||||
}).join('');
|
||||
|
|
|
|||
60
index.html
60
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-
|
|||
<div class="eetmoment-item-info">
|
||||
<div class="eetmoment-item-name">${escapeHtml(displayNaam(mealItem.item.naam))}</div>
|
||||
<div class="eetmoment-item-portion">
|
||||
<span class="portion-display" title="Portie wijzigen"
|
||||
<span class="portion-badge" title="Portie wijzigen"
|
||||
data-action="edit-portie"
|
||||
data-moment="${moment.id}"
|
||||
data-entry="${i}"
|
||||
|
|
@ -3345,7 +3352,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<div class="eetmoment-item-info">
|
||||
<div class="eetmoment-item-name">${escapeHtml(displayNaam(entry.item.naam))}</div>
|
||||
<div class="eetmoment-item-portion">
|
||||
<span class="portion-display" title="Portie wijzigen"
|
||||
<span class="portion-badge" title="Portie wijzigen"
|
||||
data-action="edit-portie"
|
||||
data-moment="${moment.id}"
|
||||
data-entry="${i}">
|
||||
|
|
@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<span class="eetmoment-name">${moment.name}</span>
|
||||
</div>
|
||||
<span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
|
||||
${items.length > 0 ? '<span class=\"save-meal-btn\" data-moment=\"' + moment.id + '\"><i class=\"fas fa-star\"></i></span>' : ''}
|
||||
<span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
|
||||
</div>
|
||||
${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
|
||||
|
|
@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
|
|||
<div class="eetmoment-add-btn" data-moment="${moment.id}">
|
||||
<span>+</span> Voedingsmiddel toevoegen
|
||||
</div>
|
||||
${items.length > 0 ? `
|
||||
<div class="save-meal-btn" data-moment="${moment.id}">
|
||||
<i class="fas fa-star"></i> Opslaan als maaltijd
|
||||
</div>` : ''}
|
||||
</li>
|
||||
`;
|
||||
}).join('');
|
||||
|
|
|
|||
|
|
@ -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 } },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue