feat(decks): Edit-Icon auf Deck-Karten + Deck-Edit-Page
- DeckStack: Pencil-Icon absolut unten-rechts, erscheint beim Hover (z-index über Card, ausserhalb des <a>-Links zur Detail-Page) - Neuer Route /decks/[id]/edit: Form für Name, Beschreibung, Farbe - i18n deck_edit keys (de + en) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9754718157
commit
03ec7e7b3e
4 changed files with 298 additions and 0 deletions
|
|
@ -5,6 +5,7 @@
|
|||
import { t, tn } from '$lib/i18n/index.svelte.ts';
|
||||
import CardSurface from './CardSurface.svelte';
|
||||
import DeckCategoryIcon from './DeckCategoryIcon.svelte';
|
||||
import { PencilSimple } from '@mana/shared-icons';
|
||||
|
||||
interface Props {
|
||||
deck: Deck;
|
||||
|
|
@ -43,6 +44,16 @@
|
|||
{/each}
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/decks/{deck.id}/edit"
|
||||
class="edit-btn"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
aria-label="Deck bearbeiten"
|
||||
title="Deck bearbeiten"
|
||||
>
|
||||
<PencilSimple size={13} weight="bold" />
|
||||
</a>
|
||||
|
||||
<CardSurface
|
||||
size="md"
|
||||
as={href ? 'a' : 'button'}
|
||||
|
|
@ -170,4 +181,34 @@
|
|||
border-style: dashed;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
position: absolute;
|
||||
bottom: 0.625rem;
|
||||
right: 0.625rem;
|
||||
z-index: 10;
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
border-radius: 0.375rem;
|
||||
background: hsl(var(--color-surface) / 0.92);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, color 0.12s, background 0.12s, border-color 0.12s;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.stack-wrap:hover .edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
color: hsl(var(--color-foreground));
|
||||
background: hsl(var(--color-surface));
|
||||
border-color: hsl(var(--color-primary) / 0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue