Lars
7940dc7560
- .gitignore: .claude/docs, rules, commands tracken; settings.local weiter ignorieren - DOCUMENTATION.md: verbindliche Ablage functional/technical/working/issues - .claude/README.md: Agent-Einstieg; GITEA_ISSUES_INDEX aus MCP (Stand 2026-04-08) - Arbeitspapiere von docs/ nach .claude/docs/working/ verschoben - docs/MEMBERSHIP_SYSTEM.md als Stub; kanonisch technical/MEMBERSHIP_SYSTEM.md - CLAUDE.md Pflichtlektüre und Links angepasst; docs/README.md vereinfacht Made-with: Cursor
122 lines
2.7 KiB
Markdown
122 lines
2.7 KiB
Markdown
# UI Responsive
|
||
|
||
Mache die App vollständig responsive – Mobile, Tablet und Desktop.
|
||
|
||
## Ziel-Design
|
||
```
|
||
iPhone (<768px): Bottom Navigation, volle Breite (wie jetzt)
|
||
iPad (768-1024px): Bottom Navigation, 2-spaltige Cards
|
||
Desktop (>1024px): Sidebar Navigation links, Content rechts, volle Breite
|
||
```
|
||
|
||
## Wichtige Regel:
|
||
**Erst planen, dann umsetzen.** Zeige den Plan und warte auf Bestätigung.
|
||
|
||
## Schritt 1: Analyse
|
||
Analysiere folgende Dateien:
|
||
- `frontend/src/app.css` – aktuelle CSS-Variablen und globale Styles
|
||
- `frontend/src/App.jsx` – Navigation und Layout-Struktur
|
||
- `frontend/src/pages/Dashboard.jsx` – repräsentative Seite
|
||
|
||
## Schritt 2: Plan vorlegen
|
||
Zeige:
|
||
1. Welche CSS-Breakpoints werden eingeführt
|
||
2. Wie ändert sich die Navigation (Bottom ? Sidebar)
|
||
3. Welche Komponenten müssen angepasst werden
|
||
4. Geschätzter Aufwand
|
||
|
||
## Schritt 3: CSS-Variablen und Breakpoints
|
||
|
||
Neue Breakpoints in `app.css`:
|
||
```css
|
||
/* Breakpoints */
|
||
--bp-mobile: 768px;
|
||
--bp-tablet: 1024px;
|
||
|
||
/* Layout */
|
||
--sidebar-width: 220px;
|
||
--content-max-width: 1200px;
|
||
```
|
||
|
||
## Schritt 4: Layout-Komponente erstellen
|
||
|
||
Neue Datei `frontend/src/components/AppLayout.jsx`:
|
||
```jsx
|
||
// Erkennt Screen-Größe und rendert:
|
||
// - Mobile/Tablet: Bottom Navigation (wie jetzt)
|
||
// - Desktop: Sidebar Navigation + Content-Bereich
|
||
```
|
||
|
||
## Schritt 5: Navigation anpassen
|
||
|
||
**Mobile (wie jetzt):**
|
||
```jsx
|
||
<nav style={{position:'fixed', bottom:0, ...}}>
|
||
{navItems}
|
||
</nav>
|
||
```
|
||
|
||
**Desktop (neu):**
|
||
```jsx
|
||
<aside style={{
|
||
position:'fixed', left:0, top:0,
|
||
width:'var(--sidebar-width)',
|
||
height:'100vh',
|
||
background:'var(--surface)',
|
||
borderRight:'1px solid var(--border)'
|
||
}}>
|
||
{/* Logo */}
|
||
{/* Nav Items vertikal */}
|
||
{/* User Info unten */}
|
||
</aside>
|
||
<main style={{
|
||
marginLeft:'var(--sidebar-width)',
|
||
padding:'24px',
|
||
minHeight:'100vh'
|
||
}}>
|
||
{children}
|
||
</main>
|
||
```
|
||
|
||
## Schritt 6: Cards responsiv machen
|
||
|
||
```css
|
||
/* Mobile: 1 Spalte */
|
||
.metric-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
/* Desktop: 4 Spalten */
|
||
@media (min-width: 1024px) {
|
||
.metric-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
```
|
||
|
||
## Schritt 7: Testen
|
||
```bash
|
||
# Frontend build testen
|
||
cd frontend && npm run build
|
||
```
|
||
|
||
Browser-Test auf:
|
||
- iPhone (375px) – Safari
|
||
- iPad (768px) – Browser DevTools
|
||
- Desktop (1440px) – Browser normal
|
||
|
||
## Jinkendo Design-Regeln beibehalten:
|
||
- Farben: var(--accent) #1D9E75, var(--bg), var(--surface)
|
||
- Border-Radius: 12px Cards, 8px Buttons
|
||
- Keine externen CSS-Frameworks
|
||
- Inline-Styles + globale CSS-Variablen
|
||
- PWA auf iPhone muss weiterhin funktionieren
|
||
|
||
## Nach dem Umbau:
|
||
- Commit mit `feat: responsive layout – sidebar on desktop`
|
||
- Push auf develop
|
||
- Testen auf dev.mitai.jinkendo.de auf verschiedenen Screens
|
||
- Erst nach Freigabe: /merge-to-prod
|