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
|