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" class="card-front"
style="background: {gradientBackground}; background-size: cover; background-position: center;" 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);"> <div class="card-front-scrim">
{slot.recipe.name} <p style="font-family: var(--font-display); font-size: 13px; margin: 0; color: #fff;">
</p> {slot.recipe.name}
</p>
</div>
</div> </div>
<div class="card-back" aria-hidden={!isFlipped}> <div class="card-back" aria-hidden={!isFlipped}>
<button <button
type="button" type="button"
aria-label="Schließen" aria-label="Schließen"
class="btn-close"
onclick={(e) => { e.stopPropagation(); onclose?.(); }} onclick={(e) => { e.stopPropagation(); onclose?.(); }}
> >
× ×
</button> </button>
{#if slot.recipe.cookTimeMin} {#if slot.recipe.cookTimeMin || slot.recipe.effort}
<span style="font-size: 12px;">{slot.recipe.cookTimeMin} min</span> <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}
{#if slot.recipe.effort} <div style="display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;">
<span style="font-size: 12px; margin-left: 4px;">{slot.recipe.effort}</span> <a class="btn-action" href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
{/if} <a class="btn-action" href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
<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> </div>
{#if isPlanner} {#if isPlanner}
<button <div style="display: flex; flex-direction: column; gap: 4px;">
type="button" <button
onclick={(e) => { e.stopPropagation(); onswap?.(); }} type="button"
style="margin-top: 8px; display: block;" class="btn-action"
> onclick={(e) => { e.stopPropagation(); onswap?.(); }}
Gericht tauschen >
</button> Gericht tauschen
{/if} </button>
{#if isPlanner && slot.id} {#if slot.id}
<button <button
type="button" type="button"
onclick={(e) => { e.stopPropagation(); onremove?.(); }} class="btn-action btn-danger"
style="margin-top: 4px; display: block;" onclick={(e) => { e.stopPropagation(); onremove?.(); }}
> >
Entfernen Entfernen
</button> </button>
{/if}
</div>
{/if} {/if}
</div> </div>
</div> </div>
@@ -195,6 +203,61 @@
padding: 10px; padding: 10px;
overflow-y: auto; 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) { @media (prefers-reduced-motion: reduce) {
.card { .card {
transition: none; transition: none;