Lars 7940dc7560 docs: Struktur .claude/docs versionieren, working/, Gitea-Index, Regeln

- .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

2026-04-08 13:01:49 +02:00

2.7 KiB

Raw Permalink Blame History

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:

Welche CSS-Breakpoints werden eingeführt
Wie ändert sich die Navigation (Bottom ? Sidebar)
Welche Komponenten müssen angepasst werden
Geschätzter Aufwand

Schritt 3: CSS-Variablen und Breakpoints

Neue Breakpoints in app.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:

// Erkennt Screen-Größe und rendert:
// - Mobile/Tablet: Bottom Navigation (wie jetzt)
// - Desktop: Sidebar Navigation + Content-Bereich

Mobile (wie jetzt):

<nav style={{position:'fixed', bottom:0, ...}}>
  {navItems}
</nav>

Desktop (neu):

<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

/* 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

# 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

2.7 KiB Raw Permalink Blame History Unescape Escape