Initial commit: WrestleDesk full project
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
This commit is contained in:
Andrej Spielmann
@@ -0,0 +1,220 @@
|
||||
# Leistungstest & UI Modernisierung - Design
|
||||
|
||||
## Status
|
||||
- **Draft** - Needs user review
|
||||
- **Date**: 2026-03-23
|
||||
|
||||
---
|
||||
|
||||
## Teil 1: Backend Fixes
|
||||
|
||||
### Problem 1: Template-Erstellung
|
||||
**Aktuell**: Template wird erstellt, aber Übungen werden in separaten POST-Requests gesendet → Inkonsistenz
|
||||
|
||||
**Lösung**: Die `create()` Methode im ViewSet sollte Übungen direkt mit dem Template speichern
|
||||
|
||||
```python
|
||||
def create(self, request, *args, **kwargs):
|
||||
# 1. Template erstellen
|
||||
# 2. Übungen direkt in derselben Transaktion speichern
|
||||
# 3. Response mit allen Daten zurückgeben
|
||||
```
|
||||
|
||||
### Problem 2: IDs statt Namen
|
||||
**Ursache**: Frontend zeigt `SelectItem key={id} value={String(id)}` - der `value` ist die ID, aber `SelectValue` zeigt `children` nicht korrekt
|
||||
|
||||
**Lösung**: Nach dem Speichern der Übungen muss das Template mit `prefetch_related` neu geladen werden, damit `exercise_name` verfügbar ist
|
||||
|
||||
---
|
||||
|
||||
## Teil 2: UI Modernisierung (Ganze App)
|
||||
|
||||
### Design Philosophy: "Elegant & Clean"
|
||||
- Sanfte, subtile Animationen
|
||||
- Professionelles Erscheinungsbild
|
||||
- Fokus auf Lesbarkeit und Benutzerfreundlichkeit
|
||||
- Keine übertriebenen Effekte
|
||||
|
||||
### Aktuelle Probleme
|
||||
1. **Keine Page Transitions** - Seitenwechsel sind abrupt
|
||||
2. **Statische Hover-Effekte** - Keine sanften Übergänge
|
||||
3. **Cards ohne Tiefe** - Keine subtilen Schatten oder Glows
|
||||
4. **Monochrome Icons** - Keine Farbvariation
|
||||
5. **FadeIn nur auf Hauptelementen** - Inkonsistente Animationen
|
||||
|
||||
### Geplante Verbesserungen
|
||||
|
||||
#### 2.1 Global Page Transitions
|
||||
```tsx
|
||||
// app/(dashboard)/layout.tsx
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
|
||||
// Page-Übergänge mit smooth fade + slide
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
```
|
||||
|
||||
#### 2.2 Subtile Card-Hover-Effekte
|
||||
```tsx
|
||||
// Aktuell
|
||||
<Card>
|
||||
// Neu mit motion
|
||||
<motion.div whileHover={{ y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.1)" }}>
|
||||
<Card>
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
#### 2.3 Button Micro-Interactions
|
||||
```tsx
|
||||
// Scale + subtle glow on hover
|
||||
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
```
|
||||
|
||||
#### 2.4 Staggered List Animations
|
||||
```tsx
|
||||
// Für Listen und Cards mit verzögertem Erscheinen
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ staggerChildren: 0.05 }}
|
||||
>
|
||||
{items.map(item => (
|
||||
<motion.div key={item.id} variants={itemVariant} />
|
||||
))}
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
#### 2.5 Smooth Scrollbar Styling
|
||||
```css
|
||||
/* Modern scrollbar für Webkit-Browser */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 100, 100, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.6 Icon Color Transitions
|
||||
```tsx
|
||||
// Icons mit Farbwechsel bei Hover
|
||||
<motion.div whileHover={{ color: "#1B1A55" }}>
|
||||
<Icon className="transition-colors" />
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Teil 3: Component-Spezifische Änderungen
|
||||
|
||||
### 3.1 Sidebar
|
||||
- Hover-State mit sanftem Slide + Farbwechsel
|
||||
- Active-State mit subtle glow/underline
|
||||
- Smooth expand/collapse für Submenüs
|
||||
|
||||
### 3.2 Cards (Stat Cards, Data Cards)
|
||||
- Subtle lift bei Hover
|
||||
- Border-color transition
|
||||
- Sanfte Schatten-Verstärkung
|
||||
|
||||
### 3.3 Tables
|
||||
- Row hover mit background shift
|
||||
- Smooth row appearance (staggered)
|
||||
- Subtle column highlight
|
||||
|
||||
### 3.4 Forms
|
||||
- Input focus mit border-color + subtle glow
|
||||
- Label animation (float label style optional)
|
||||
- Button loading state mit spinner
|
||||
|
||||
### 3.5 Tabs
|
||||
- Underline indicator mit smooth slide
|
||||
- Active tab mit subtle scale
|
||||
|
||||
---
|
||||
|
||||
## Teil 4: Animations-Token
|
||||
|
||||
```typescript
|
||||
// lib/animations.ts (neu oder erweitern)
|
||||
export const transitions = {
|
||||
fast: "150ms",
|
||||
normal: "250ms",
|
||||
slow: "400ms",
|
||||
}
|
||||
|
||||
export const easing = {
|
||||
default: "easeOut",
|
||||
smooth: [0.4, 0, 0.2, 1], // cubic-bezier
|
||||
bounce: [0.68, -0.55, 0.265, 1.55],
|
||||
}
|
||||
|
||||
export const stagger = {
|
||||
fast: 0.05,
|
||||
normal: 0.1,
|
||||
slow: 0.15,
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Reihenfolge
|
||||
|
||||
1. **Backend Fix** (10 min)
|
||||
- Template create mit embedded exercises
|
||||
- Verify exercise_name wird korrekt zurückgegeben
|
||||
|
||||
2. **Animation Library Setup** (5 min)
|
||||
- Framer Motion installieren/verifizieren
|
||||
- Animation tokens definieren
|
||||
|
||||
3. **Global Layout** (15 min)
|
||||
- Page transitions in layout.tsx
|
||||
- Smooth scrolling CSS
|
||||
|
||||
4. **Sidebar Enhancement** (15 min)
|
||||
- Hover/active animations
|
||||
- Icon transitions
|
||||
|
||||
5. **Card Components** (20 min)
|
||||
- Alle Cards mit hover effects
|
||||
- Stat cards auf Dashboard
|
||||
|
||||
6. **List/Table Enhancements** (20 min)
|
||||
- Staggered animations
|
||||
- Row hover effects
|
||||
|
||||
7. **Form Enhancements** (15 min)
|
||||
- Input focus states
|
||||
- Button micro-interactions
|
||||
|
||||
8. **Tab Enhancements** (10 min)
|
||||
- Slide underline indicator
|
||||
|
||||
---
|
||||
|
||||
## Erfolgskriterien
|
||||
|
||||
- [ ] Template-Erstellung funktioniert vollständig mit Übungen
|
||||
- [ ] Dropdowns zeigen Namen statt IDs
|
||||
- [ ] Seitenwechsel sind smooth (fade + slide)
|
||||
- [ ] Hover-Effekte auf allen interaktiven Elementen
|
||||
- [ ] Listen appear mit staggered animation
|
||||
- [ ] Keine "jarring" Übergänge
|
||||
- [ ] Performance bleibt gut (nicht zu viele Animationen)
|
||||
Reference in New Issue
Block a user