Responsive Layout & Theme Integration

[Wacken2012]

[Feedback] Responsive Layout & Theme Integration – Bitte testen! 🎉

Ich habe die neue responsive Version der Vereins-App veröffentlicht! 🎉

✅ Features

• Responsive Layout mit 3 Breakpoints (Desktop, Tablet, Mobile)
• Dark-Mode Support via prefers-color-scheme
• Nextcloud Theme-Integration mit CSS-Variablen
• Verbesserte Accessibility (ARIA, Focus, Semantic HTML)
• Neue/Aktualisierte Komponenten:
  • Alert.vue - Theme-aware Benachrichtigungen
  • Statistics.vue - Responsive Dashboard Grid
  • App.vue - Sticky Navigation + Semantic HTML

📋 Bitte testet folgende Punkte:

1. Responsive Darstellung

• Desktop (1024px+): 4-Spalten Grid, volle Navigation
• Tablet (768-1023px): 2-Spalten Grid, kompakte Navigation
• Mobile (<768px): 1-Spalten Layout, Icon-only Tabs

2. Dark-Mode

• Dark-Mode-Toggle in Nextcloud-Einstellungen funktioniert
• Farben wechseln korrekt zwischen Light & Dark
• Text-Kontrast ist ausreichend
• Keine "kaputten" Farben oder unlesbare Elemente

3. Layout in Nextcloud

• App funktioniert mit Sidebar aktiv
• Sticky Tab-Navigation bleibt beim Scrollen sichtbar
• Container maximal 1200px breit und zentriert
• Touch-Targets auf Mobile mindestens 44px groß

4. Komponenten

• Alerts: Error/Success/Warning/Info sehen gut aus
• Charts: Responsive auf allen Bildschirmgrößen
• Forms: Input-Felder haben ausreichende Größe
• Loading-Spinner: Animiert korrekt

🐛 Wenn ihr Probleme findet:

Bitte berichtet:

• Gerät/Browser (z.B. "iPhone 12, Safari")
• Screenshot oder Video
• Welche Komponente betroffen ist
• Reproduktionsschritte

💬 Feedback-Optionen:

1. Kommentar direkt hier im Issue
2. Pull Request mit Verbesserungen
3. GitHub Discussion für allgemeine Fragen

📚 Weitere Informationen:

• Responsive Layout Guide
• Quick Start
• Implementation Status

🎯 Commit-Info:

feat: Add responsive layout & Nextcloud theme integration

- Responsive breakpoints: 1024px (desktop), 768px (tablet), 480px (mobile)
- Dark-mode support via prefers-color-scheme
- CSS variable theme integration
- Improved accessibility with semantic HTML
- Bundle size: +2.75 kB

Commit: a246001

---

Vielen Dank für euer Feedback! 🙏

Wir freuen uns auf eure Erfahrungen und Ideen für die nächste Version! 🚀

[Kenarso]

Bei mir, Windows 11 Auflösung 1920x1080 ist im Dashboard nicht alles zu sehen. ich muss nach rechts scrollen um das letzte Widget zu sehen.