feat(planner): align tile design with spec
Front face: - Full dual gradient overlay (dark top 32% → transparent → dark bottom 55%) - Day abbreviation + date number pill at top of each tile - Recipe name 13px/weight-300 with text-shadow - Meta line (cookTimeMin · effort) below name - Glassmorphism tag pills (protein + cuisine only) - State rings via box-shadow (yellow for today, green for selected) - Dimming (opacity 0.42) on non-selected filled tiles Back face: - Koch-Modus as green primary button - Entfernen as red outline (transparent bg) - All buttons 11px / weight 500 EmptyDayTile: add day header + spec-aligned suggestion list layout Page: remove external column header (now rendered inside each tile) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import EmptyDayTile from './EmptyDayTile.svelte';
|
||||
import { formatDayAbbr } from '$lib/planner/week';
|
||||
|
||||
interface TagItem {
|
||||
id?: string;
|
||||
@@ -57,10 +58,23 @@
|
||||
} = $props();
|
||||
|
||||
const slotId = $derived(slot.id ?? '');
|
||||
|
||||
const isFlipped = $derived(activeSlotId === slot.id && !!slot.recipe);
|
||||
const isDimmed = $derived(activeSlotId !== null && activeSlotId !== slot.id && !!slot.recipe);
|
||||
|
||||
const dayAbbr = $derived(slot.slotDate ? formatDayAbbr(slot.slotDate, 'short') : '');
|
||||
const dateNum = $derived(slot.slotDate ? slot.slotDate.slice(-2).replace(/^0/, '') : '');
|
||||
|
||||
const visibleTags = $derived(
|
||||
(slot.recipe?.tags ?? []).filter((t) => t.tagType === 'protein' || t.tagType === 'cuisine')
|
||||
);
|
||||
|
||||
const metaLine = $derived((() => {
|
||||
const parts: string[] = [];
|
||||
if (slot.recipe?.cookTimeMin) parts.push(`${slot.recipe.cookTimeMin} Min`);
|
||||
if (slot.recipe?.effort) parts.push(slot.recipe.effort);
|
||||
return parts.join(' · ');
|
||||
})());
|
||||
|
||||
function handleFlip() {
|
||||
onflip?.(slotId);
|
||||
}
|
||||
@@ -103,21 +117,49 @@
|
||||
data-flipped={isFlipped}
|
||||
data-dimmed={isDimmed}
|
||||
class="scene"
|
||||
class:scene-today={isToday && !isFlipped}
|
||||
class:scene-selected={isFlipped}
|
||||
class:scene-dimmed={isDimmed}
|
||||
onclick={handleFlip}
|
||||
onkeydown={handleKeydown}
|
||||
>
|
||||
<div class="card" class:flipped={isFlipped}>
|
||||
|
||||
<!-- FRONT -->
|
||||
<div
|
||||
class="card-front"
|
||||
style="background: {gradientBackground}; background-size: cover; background-position: center;"
|
||||
>
|
||||
<div class="card-front-scrim">
|
||||
<p style="font-family: var(--font-display); font-size: 15px; margin: 0; color: #fff;">
|
||||
{slot.recipe.name}
|
||||
</p>
|
||||
<!-- Full-tile dual gradient overlay -->
|
||||
<div class="tile-overlay"></div>
|
||||
|
||||
<!-- Day header -->
|
||||
<div class="tile-head">
|
||||
<span class="tile-day-abbr">{dayAbbr}</span>
|
||||
<span class="tile-day-num" class:dn-today={isToday} class:dn-selected={isFlipped}>
|
||||
{dateNum}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Recipe info at bottom -->
|
||||
<div class="tile-info">
|
||||
<p class="tile-name">{slot.recipe.name}</p>
|
||||
{#if metaLine}
|
||||
<p class="tile-meta">{metaLine}</p>
|
||||
{/if}
|
||||
{#if visibleTags.length > 0}
|
||||
<div class="tile-tags">
|
||||
{#each visibleTags as tag (tag.id)}
|
||||
<span class="tile-tag" class:tag-today={isToday} class:tag-selected={isFlipped}>
|
||||
{tag.name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BACK -->
|
||||
<div class="card-back" aria-hidden={!isFlipped}>
|
||||
<button
|
||||
type="button"
|
||||
@@ -128,24 +170,16 @@
|
||||
×
|
||||
</button>
|
||||
|
||||
{#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>
|
||||
<p class="back-name">{slot.recipe.name}</p>
|
||||
{#if metaLine}
|
||||
<p class="back-meta">{metaLine}</p>
|
||||
{/if}
|
||||
|
||||
<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>
|
||||
<div class="back-actions">
|
||||
<a class="btn-action btn-primary" 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}
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
{#if isPlanner}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-action"
|
||||
@@ -163,9 +197,10 @@
|
||||
Entfernen
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -180,12 +215,34 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* ── Scene (outermost positioned element) ── */
|
||||
.scene {
|
||||
perspective: 900px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 3px rgba(28,28,24,.06), 0 1px 2px rgba(28,28,24,.04);
|
||||
transition: box-shadow .15s, opacity .15s;
|
||||
}
|
||||
.scene:hover {
|
||||
box-shadow: 0 6px 18px rgba(28,28,24,.14), 0 2px 6px rgba(28,28,24,.08);
|
||||
}
|
||||
.scene-today {
|
||||
box-shadow: 0 0 0 2px var(--yellow), 0 1px 3px rgba(28,28,24,.06);
|
||||
}
|
||||
.scene-today:hover {
|
||||
box-shadow: 0 0 0 2px var(--yellow), 0 6px 18px rgba(28,28,24,.14);
|
||||
}
|
||||
.scene-selected {
|
||||
box-shadow: 0 0 0 2px var(--green-dark), 0 6px 18px rgba(28,28,24,.14);
|
||||
}
|
||||
.scene-dimmed {
|
||||
opacity: 0.42;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Card flip ── */
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -205,21 +262,101 @@
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Front face ── */
|
||||
.tile-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,.32) 0%,
|
||||
rgba(0,0,0,0) 30%,
|
||||
rgba(0,0,0,0) 45%,
|
||||
rgba(0,0,0,.55) 100%
|
||||
);
|
||||
border-radius: inherit;
|
||||
}
|
||||
.tile-head {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
.tile-day-abbr {
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
color: rgba(255,255,255,.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tile-day-num {
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,.9);
|
||||
background: rgba(255,255,255,.22);
|
||||
}
|
||||
.dn-today {
|
||||
background: var(--yellow) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.dn-selected {
|
||||
background: var(--green-dark) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.tile-info {
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
padding: 8px 9px 9px;
|
||||
z-index: 2;
|
||||
}
|
||||
.tile-name {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,.4);
|
||||
}
|
||||
.tile-meta {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,.75);
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
.tile-tags {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tile-tag {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255,255,255,.2);
|
||||
color: rgba(255,255,255,.92);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.tag-today { background: rgba(242,193,46,.35); }
|
||||
.tag-selected { background: rgba(46,110,57,.45); }
|
||||
|
||||
/* ── Back face ── */
|
||||
.card-back {
|
||||
transform: rotateY(180deg);
|
||||
background: var(--color-page);
|
||||
border: 1px solid var(--color-border);
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.btn-close {
|
||||
background: none;
|
||||
@@ -229,47 +366,61 @@
|
||||
line-height: 1;
|
||||
color: var(--color-text-muted);
|
||||
padding: 2px 6px;
|
||||
float: right;
|
||||
margin: -4px -4px 4px 4px;
|
||||
align-self: flex-end;
|
||||
margin: -4px -4px 2px 0;
|
||||
}
|
||||
.btn-close:hover {
|
||||
.btn-close:hover { color: var(--color-text); }
|
||||
.back-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
margin: 0 0 2px;
|
||||
line-height: 1.3;
|
||||
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);
|
||||
.back-meta {
|
||||
font-size: 10px;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.back-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.btn-action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
padding: 7px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
background: #fff;
|
||||
color: var(--color-text);
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .04em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn-action:hover {
|
||||
background: var(--color-border);
|
||||
.btn-action:hover { background: var(--color-surface); }
|
||||
.btn-primary {
|
||||
background: var(--green-dark);
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
.btn-primary:hover { background: var(--green-dark); filter: brightness(1.1); }
|
||||
.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);
|
||||
color: #dc4c3e;
|
||||
border-color: #dc4c3e;
|
||||
background: transparent;
|
||||
}
|
||||
.btn-danger:hover { background: rgba(220,76,62,.08); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card {
|
||||
transition: none;
|
||||
}
|
||||
.card { transition: none; }
|
||||
.scene { transition: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user