marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(planner): improve DesktopDayTile visual polish

Browse Source 
- Add dark gradient scrim on card front so recipe name is always readable
  over images and protein/cuisine gradients
- Style card-back actions as proper buttons (border, padding, border-radius)
  instead of unstyled browser defaults
- Add meta chips for cookTimeMin and effort
- Scope Entfernen inside isPlanner guard alongside Gericht tauschen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 11:23:05 +02:00
parent f97cf49bd0
commit 358edb9a12
1 changed files with 91 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/lib/planner/DesktopDayTile.svelte
View File

@@ -102,51 +102,59 @@
class="card-front"
style="background: {gradientBackground}; background-size: cover; background-position: center;"
>
<p style="font-family: var(--font-display); font-size: 13px; padding: 8px; margin: 0; color: var(--color-text);">
{slot.recipe.name}
</p>
<div class="card-front-scrim">
<p style="font-family: var(--font-display); font-size: 13px; margin: 0; color: #fff;">
{slot.recipe.name}
</p>
</div>
</div>
<div class="card-back" aria-hidden={!isFlipped}>
<button
type="button"
aria-label="Schließen"
class="btn-close"
onclick={(e) => { e.stopPropagation(); onclose?.(); }}
>
×
</button>
{#if slot.recipe.cookTimeMin}
<span style="font-size: 12px;">{slot.recipe.cookTimeMin} min</span>
{#if slot.recipe.cookTimeMin || slot.recipe.effort}
<div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;">
{#if slot.recipe.cookTimeMin}
<span class="meta-chip">{slot.recipe.cookTimeMin} min</span>
{/if}
{#if slot.recipe.effort}
<span class="meta-chip">{slot.recipe.effort}</span>
{/if}
</div>
{/if}
{#if slot.recipe.effort}
<span style="font-size: 12px; margin-left: 4px;">{slot.recipe.effort}</span>
{/if}
<div style="margin-top: 8px; display: flex; flex-direction: column; gap: 4px;">
<a href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
<a href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
<div style="display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;">
<a class="btn-action" href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
<a class="btn-action" href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
</div>
{#if isPlanner}
<button
type="button"
onclick={(e) => { e.stopPropagation(); onswap?.(); }}
style="margin-top: 8px; display: block;"
>
Gericht tauschen
</button>
{/if}
<div style="display: flex; flex-direction: column; gap: 4px;">
<button
type="button"
class="btn-action"
onclick={(e) => { e.stopPropagation(); onswap?.(); }}
>
Gericht tauschen
</button>
{#if isPlanner && slot.id}
<button
type="button"
onclick={(e) => { e.stopPropagation(); onremove?.(); }}
style="margin-top: 4px; display: block;"
>
Entfernen
</button>
{#if slot.id}
<button
type="button"
class="btn-action btn-danger"
onclick={(e) => { e.stopPropagation(); onremove?.(); }}
>
Entfernen
</button>
{/if}
</div>
{/if}
</div>
</div>
@@ -195,6 +203,61 @@
padding: 10px;
overflow-y: auto;
}
.card-front-scrim {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 8px 8px;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
border-radius: 0 0 10px 10px;
}
.btn-close {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: var(--color-text-muted);
padding: 2px 6px;
float: right;
margin: -4px -4px 4px 4px;
}
.btn-close:hover {
color: var(--color-text);
}
.meta-chip {
font-size: 11px;
padding: 2px 7px;
border-radius: 99px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
}
.btn-action {
display: block;
width: 100%;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font-size: 12px;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
.btn-action:hover {
background: var(--color-border);
}
.btn-danger {
color: var(--color-destructive, #dc2626);
border-color: var(--color-destructive, #dc2626);
}
.btn-danger:hover {
background: color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;