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:
@@ -477,26 +477,9 @@
|
||||
{#each days as day (day)}
|
||||
{@const slot = slotMap[day] ?? { id: null, slotDate: day, recipe: null }}
|
||||
{@const isTodayDay = day === today}
|
||||
{@const dateNum = day.slice(-2).replace(/^0/, '')}
|
||||
{@const dayAbbr = formatDayAbbr(day, 'narrow')}
|
||||
{@const isThisTileActive = drawerSlotId === day}
|
||||
|
||||
<div class="flex h-full flex-col">
|
||||
<!-- Column header -->
|
||||
<div class="mb-2 flex flex-col items-center gap-1">
|
||||
<p class="font-[var(--font-sans)] text-[9px] uppercase tracking-wide text-[var(--color-text-muted)]">
|
||||
{dayAbbr}
|
||||
</p>
|
||||
<div
|
||||
class="flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium
|
||||
{isTodayDay ? 'bg-[var(--yellow)] text-white' : 'bg-transparent text-[var(--color-text)]'}"
|
||||
>
|
||||
{dateNum}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flip tile -->
|
||||
<div class="min-h-0 flex-1">
|
||||
<div class="h-full">
|
||||
<DesktopDayTile
|
||||
{slot}
|
||||
isToday={isTodayDay}
|
||||
@@ -511,7 +494,6 @@
|
||||
onremove={() => handleTileRemove(slot)}
|
||||
onaddrecipe={() => handleEmptyTileAdd(day)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user