Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

[FEAT] Responsive UI - Desktop Sidebar + 2-spaltige Layouts #30

New Issue
Open
opened 2026-03-23 21:47:36 +01:00 by Lars · 0 comments
Lars commented 2026-03-23 21:47:36 +01:00
Owner
Copy Link

�berblick

Die App soll vollst�ndig responsive sein und auf allen Bildschirmgr��en optimal funktionieren � vom iPhone �ber iPad bis zum Desktop-Browser.

Breakpoints

Bereich Breite Layout
Mobile < 1024px Bottom Navigation (wie jetzt)
Desktop = 1024px Sidebar Navigation links, Content rechts

Kein separates Tablet-Layout � unterhalb 1024px = Mobile.

Desktop Layout (= 1024px)

Sidebar (220px, fixed left)

+------------------+
�  [Enso-Logo]     �  ? Icon (40px) + "Mitai Jinkendo" Text
�  Mitai Jinkendo  �
+------------------�
�                  �
�  ?? Dashboard    �  ? Icons + Text
�  ?? Erfassung    �  ? Aktive Seite: var(--accent) Hintergrund (leicht)
�  ?? Verlauf      �     + var(--accent) Text + linke Akzent-Linie (3px)
�  ?? Analyse      �
�  ?? Einstellungen�
�  ?? Admin        �  ? nur sichtbar wenn role=admin
�                  �
+------------------�
�  [Avatar]        �  ? Nutzer-Avatar (32px) + Name + Tier-Badge
�  Lars            �
�  selfhosted      �
+------------------+

Aktive Seite hervorheben:

background: var(--accent-light);   /* #E1F5EE leicht gr�ner Hintergrund */
color: var(--accent);              /* #1D9E75 gr�ner Text */
border-left: 3px solid var(--accent);  /* linke Akzent-Linie */
border-radius: 0 8px 8px 0;

Content-Bereich

  • margin-left: 220px (Sidebar-Breite)
  • padding: 24px 32px
  • max-width: 1200px (zentriert)
  • Kein Bottom-Padding f�r Navigation

Seiten-spezifische Desktop-Layouts

Dashboard

Mobile: Alle Karten untereinander
Desktop: 2-spaltig oder 4-spaltig je nach Kartentyp

+----------------------------------------------+
�  Hallo Lars ??              Mo, 20. M�rz 2026 �
+----------------------------------------------�
� Gewicht  � KF       � Mager-   � Kalorien    �
� 86,1 kg  � 19,9%    � masse    � 1.447 kcal  �
+----------------------------------------------�
�  Ziele                    [Details ?]         �
�  ����������  Gewicht: 27%  ��������  KF: 45% �
+----------------------------------------------�
�  Kalorien + Gewicht (Chart � volle Breite)   �
+----------------------------------------------+

Verlauf

Mobile: Tabs oben, Chart/Tabelle darunter
Desktop: Tabs links als vertikale Liste, Chart/Tabelle rechts

+----------------------------------------------+
� Gewicht ?  �  Chart + Tabelle                �
� K�rperfett �  (nimmt volle rechte Breite)    �
� Umf�nge    �                                 �
� Ern�hrung  �                                 �
� Aktivit�t  �                                 �
+----------------------------------------------+

Analyse

Mobile: Prompt-Liste, dann Ergebnis darunter
Desktop: Prompt-Liste links (300px), Ergebnis rechts

+---------------------------------------------+
�  Prompts         �  Ergebnis / Verlauf       �
�  -------------   �                          �
�  ?? Gesamt       �  [Letzte Analyse]        �
�  ?? K�rper  ?    �  [Text der Analyse...]   �
�  ??? Ern�hrung   �                          �
�  ??? Training    �  [�ltere Analysen]       �
�  -------------   �                          �
�  Pipeline ?      �                          �
+---------------------------------------------+

Erfassung

Mobile: Formular volle Breite
Desktop: Formular zentriert, max-width 600px

+----------------------------------------------+
�           Gewicht erfassen                   �
�                                              �
�     +-----------------------------+          �
�     �  Datum    [20.03.2026]      �          �
�     �  Gewicht  [86,1    ] kg     �          �
�     �  Notiz    [         ]       �          �
�     �                             �          �
�     �  [Speichern]                �          �
�     +-----------------------------+          �
+----------------------------------------------+

Admin-Panel

Mobile: Tabellen horizontal scrollbar
Desktop: Tabellen nutzen volle Breite, mehr Spalten sichtbar

�bergangsverhalten

Fenster-Resize

  • Beim Verkleinern unter 1024px: Sidebar verschwindet, Bottom Nav erscheint
  • Beim Vergr��ern �ber 1024px: Bottom Nav verschwindet, Sidebar erscheint
  • Kein Flackern � CSS media queries, kein JavaScript-Resize-Listener

Aktiver Zustand synchronisiert

  • Aktive Seite wird in Sidebar UND Bottom Nav korrekt hervorgehoben
  • Gleiche State-Variable, unterschiedliches Rendering

Was sich nicht �ndert

  • ? Farben, CSS-Variablen, Design-Tokens bleiben identisch
  • ? Alle Funktionen bleiben auf Desktop verf�gbar
  • ? PWA auf iPhone bleibt vollst�ndig funktionsf�hig
  • ? Keine externen CSS-Frameworks (kein Tailwind, kein Bootstrap)
  • ? Inline-Styles + CSS-Variablen-Ansatz bleibt erhalten

Technische Umsetzung

Frontend

  1. App.jsx:

    • Media Query: @media (min-width: 1024px)
    • Conditional Rendering: Sidebar (Desktop) vs Bottom Nav (Mobile)
    • Gleiche Navigation-State f�r beide Varianten

  2. Neue Komponente: Sidebar.jsx

    • Fixed left, 220px Breite
    • Logo oben, Nav-Items Mitte, User-Info unten
    • Aktive Seite hervorheben

  3. CSS in app.css:

    • Media Queries f�r Breakpoint 1024px
    • Grid/Flex Layouts f�r 2-spaltige Seiten
    • max-width: 1200px f�r Content

  4. Seiten anpassen:

    • Dashboard: 4-spaltig (Gewicht, KF, Magermasse, Kalorien)
    • Verlauf: Tabs vertikal links
    • Analyse: Prompts links, Ergebnis rechts
    • Erfassung: zentriert schmal (max-width 600px)

Abh�ngigkeiten

  • Keine � kann parallel zu anderen Features implementiert werden
  • Erweitert: Alle bestehenden Seiten (Dashboard, Verlauf, Analyse, Erfassung, Admin)

Aufwandssch�tzung

  • Sidebar-Komponente: 2h
  • App.jsx Media Queries: 1h
  • Dashboard 4-spaltig: 1h
  • Verlauf 2-spaltig: 2h
  • Analyse 2-spaltig: 2h
  • Erfassung zentriert: 0.5h
  • Admin-Panel Breite: 0.5h
  • Gesamt: ~8-10h

Akzeptanzkriterien

  • Desktop (= 1024px): Sidebar links, Bottom Nav versteckt
  • Mobile (< 1024px): Bottom Nav unten, Sidebar versteckt
  • Aktive Seite in Sidebar hervorgehoben (gr�ner Hintergrund, linke Linie)
  • Dashboard: 4-spaltige Karten auf Desktop
  • Verlauf: Tabs vertikal links, Chart/Tabelle rechts
  • Analyse: Prompts links, Ergebnis rechts
  • Erfassung: Formular zentriert schmal (max-width 600px)
  • Admin: Tabellen nutzen volle Breite
  • Fenster-Resize funktioniert fl�ssig ohne Flackern
  • PWA auf iPhone funktioniert weiterhin perfekt

Dokumentation

?? Vollst�ndige Spec: .claude/docs/functional/RESPONSIVE_UI.md

## �berblick Die App soll vollst�ndig responsive sein und auf allen Bildschirmgr��en optimal funktionieren � vom iPhone �ber iPad bis zum Desktop-Browser. ## Breakpoints | Bereich | Breite | Layout | |---------|--------|--------| | Mobile | < 1024px | Bottom Navigation (wie jetzt) | | Desktop | = 1024px | Sidebar Navigation links, Content rechts | **Kein separates Tablet-Layout** � unterhalb 1024px = Mobile. ## Desktop Layout (= 1024px) ### Sidebar (220px, fixed left) ``` +------------------+ � [Enso-Logo] � ? Icon (40px) + "Mitai Jinkendo" Text � Mitai Jinkendo � +------------------� � � � ?? Dashboard � ? Icons + Text � ?? Erfassung � ? Aktive Seite: var(--accent) Hintergrund (leicht) � ?? Verlauf � + var(--accent) Text + linke Akzent-Linie (3px) � ?? Analyse � � ?? Einstellungen� � ?? Admin � ? nur sichtbar wenn role=admin � � +------------------� � [Avatar] � ? Nutzer-Avatar (32px) + Name + Tier-Badge � Lars � � selfhosted � +------------------+ ``` **Aktive Seite hervorheben:** ```css background: var(--accent-light); /* #E1F5EE leicht gr�ner Hintergrund */ color: var(--accent); /* #1D9E75 gr�ner Text */ border-left: 3px solid var(--accent); /* linke Akzent-Linie */ border-radius: 0 8px 8px 0; ``` ### Content-Bereich - `margin-left: 220px` (Sidebar-Breite) - `padding: 24px 32px` - `max-width: 1200px` (zentriert) - Kein Bottom-Padding f�r Navigation ## Seiten-spezifische Desktop-Layouts ### Dashboard **Mobile:** Alle Karten untereinander **Desktop:** 2-spaltig oder 4-spaltig je nach Kartentyp ``` +----------------------------------------------+ � Hallo Lars ?? Mo, 20. M�rz 2026 � +----------------------------------------------� � Gewicht � KF � Mager- � Kalorien � � 86,1 kg � 19,9% � masse � 1.447 kcal � +----------------------------------------------� � Ziele [Details ?] � � ���������� Gewicht: 27% �������� KF: 45% � +----------------------------------------------� � Kalorien + Gewicht (Chart � volle Breite) � +----------------------------------------------+ ``` ### Verlauf **Mobile:** Tabs oben, Chart/Tabelle darunter **Desktop:** Tabs links als vertikale Liste, Chart/Tabelle rechts ``` +----------------------------------------------+ � Gewicht ? � Chart + Tabelle � � K�rperfett � (nimmt volle rechte Breite) � � Umf�nge � � � Ern�hrung � � � Aktivit�t � � +----------------------------------------------+ ``` ### Analyse **Mobile:** Prompt-Liste, dann Ergebnis darunter **Desktop:** Prompt-Liste links (300px), Ergebnis rechts ``` +---------------------------------------------+ � Prompts � Ergebnis / Verlauf � � ------------- � � � ?? Gesamt � [Letzte Analyse] � � ?? K�rper ? � [Text der Analyse...] � � ??? Ern�hrung � � � ??? Training � [�ltere Analysen] � � ------------- � � � Pipeline ? � � +---------------------------------------------+ ``` ### Erfassung **Mobile:** Formular volle Breite **Desktop:** Formular zentriert, max-width 600px ``` +----------------------------------------------+ � Gewicht erfassen � � � � +-----------------------------+ � � � Datum [20.03.2026] � � � � Gewicht [86,1 ] kg � � � � Notiz [ ] � � � � � � � � [Speichern] � � � +-----------------------------+ � +----------------------------------------------+ ``` ### Admin-Panel **Mobile:** Tabellen horizontal scrollbar **Desktop:** Tabellen nutzen volle Breite, mehr Spalten sichtbar ## �bergangsverhalten ### Fenster-Resize - Beim Verkleinern unter 1024px: Sidebar verschwindet, Bottom Nav erscheint - Beim Vergr��ern �ber 1024px: Bottom Nav verschwindet, Sidebar erscheint - Kein Flackern � CSS media queries, kein JavaScript-Resize-Listener ### Aktiver Zustand synchronisiert - Aktive Seite wird in Sidebar UND Bottom Nav korrekt hervorgehoben - Gleiche State-Variable, unterschiedliches Rendering ## Was sich nicht �ndert - ? Farben, CSS-Variablen, Design-Tokens bleiben identisch - ? Alle Funktionen bleiben auf Desktop verf�gbar - ? PWA auf iPhone bleibt vollst�ndig funktionsf�hig - ? Keine externen CSS-Frameworks (kein Tailwind, kein Bootstrap) - ? Inline-Styles + CSS-Variablen-Ansatz bleibt erhalten ## Technische Umsetzung ### Frontend 1. **App.jsx:** - Media Query: `@media (min-width: 1024px)` - Conditional Rendering: Sidebar (Desktop) vs Bottom Nav (Mobile) - Gleiche Navigation-State f�r beide Varianten 2. **Neue Komponente: Sidebar.jsx** - Fixed left, 220px Breite - Logo oben, Nav-Items Mitte, User-Info unten - Aktive Seite hervorheben 3. **CSS in app.css:** - Media Queries f�r Breakpoint 1024px - Grid/Flex Layouts f�r 2-spaltige Seiten - max-width: 1200px f�r Content 4. **Seiten anpassen:** - Dashboard: 4-spaltig (Gewicht, KF, Magermasse, Kalorien) - Verlauf: Tabs vertikal links - Analyse: Prompts links, Ergebnis rechts - Erfassung: zentriert schmal (max-width 600px) ## Abh�ngigkeiten - **Keine** � kann parallel zu anderen Features implementiert werden - **Erweitert:** Alle bestehenden Seiten (Dashboard, Verlauf, Analyse, Erfassung, Admin) ## Aufwandssch�tzung - **Sidebar-Komponente:** 2h - **App.jsx Media Queries:** 1h - **Dashboard 4-spaltig:** 1h - **Verlauf 2-spaltig:** 2h - **Analyse 2-spaltig:** 2h - **Erfassung zentriert:** 0.5h - **Admin-Panel Breite:** 0.5h - **Gesamt:** ~8-10h ## Akzeptanzkriterien - [ ] Desktop (= 1024px): Sidebar links, Bottom Nav versteckt - [ ] Mobile (< 1024px): Bottom Nav unten, Sidebar versteckt - [ ] Aktive Seite in Sidebar hervorgehoben (gr�ner Hintergrund, linke Linie) - [ ] Dashboard: 4-spaltige Karten auf Desktop - [ ] Verlauf: Tabs vertikal links, Chart/Tabelle rechts - [ ] Analyse: Prompts links, Ergebnis rechts - [ ] Erfassung: Formular zentriert schmal (max-width 600px) - [ ] Admin: Tabellen nutzen volle Breite - [ ] Fenster-Resize funktioniert fl�ssig ohne Flackern - [ ] PWA auf iPhone funktioniert weiterhin perfekt ## Dokumentation ?? Vollst�ndige Spec: `.claude/docs/functional/RESPONSIVE_UI.md`
Lars added the
feature
develop
 labels 2026-03-23 21:47:36 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
bug

Bug/Fehler

  
develop

Betrifft develop Branch

  
feature

Feature Request

  
high

Hohe Priorit�t

  
low

Niedrige Priorit�t

No Label
bug
develop
feature
high
low
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: Lars/mitai-jinkendo#30
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?