Files
sp80/.planning/quick/3-fix-ui-feedback-header-navigation-and-la/3-PLAN.md
admin 30397732f9 fix(ui): Header branding, sidebar collapse, and layout fitting 1024x600
- Header: Change 'Data Station' to 'RTU', use TCK logo, fix sizing
- Sidebar: MENU text now clickable to collapse/expand
- RainfallView: Fit 1024x600 without scrolling
- GraphView: Fit 1024x600 screen
2026-03-13 11:26:26 +08:00

2.6 KiB

plan, type, files_modified
plan type files_modified
1 quick
sample_interface/src/app/components/Header.tsx
sample_interface/src/app/components/Sidebar.tsx
sample_interface/src/app/components/views/RainfallView.tsx
sample_interface/src/app/components/views/GraphView.tsx
Fix UI feedback: header branding, navigation collapse, and layout fitting 1024x600 User feedback: 1. Header: Change "Data Station" to "RTU", use @logo/[LOGO] TCK.svg for logo, fix Solar/Battery box sizing 2. Navigation: Make "Menu" text clickable to collapse sidebar, not just the icon 3. RainfallView: Remove extra space before title, fit to 1024x600 without scrolling 4. GraphView: Fit to 1024x600 screen Fix Header branding and sizing sample_interface/src/app/components/Header.tsx 1. Change "Data Station" text to "RTU" 2. Use @logo/[LOGO] TCK.svg as logo (need to check correct path) 3. Fix Solar/Battery boxes to match other header items size (same row, consistent height) 4. Ensure all header items fit in 1-2 rows with compact height grep -E "RTU|Data Station" sample_interface/src/app/components/Header.tsx Header shows RTU branding with correct logo and sizing Fix Sidebar collapse behavior sample_interface/src/app/components/Sidebar.tsx 1. Make "Menu" text clickable to toggle collapse (not just the icon) 2. Ensure collapse/expand works on click grep -E "Menu|collapse" sample_interface/src/app/components/Sidebar.tsx | head -5 Sidebar Menu text is clickable Fix RainfallView layout sample_interface/src/app/components/views/RainfallView.tsx 1. Remove extra space/padding before title 2. Reduce padding/margins to fit 1024x600 without scrolling 3. Make Last Update section visible without page down grep "p-" RainfallView.tsx | head -5 RainfallView fits 1024x600 screen Fix GraphView layout sample_interface/src/app/components/views/GraphView.tsx 1. Adjust layout to fit 1024x600 screen 2. Reduce padding/margins as needed ls -la sample_interface/src/app/components/views/GraphView.tsx GraphView fits 1024x600 screen

<success_criteria>

  • Header shows "RTU" with TCK logo
  • Header items (Solar/Battery) same size as Time/Date/Station
  • Sidebar Menu text toggles collapse
  • RainfallView fits 1024x600 without scrolling
  • GraphView fits 1024x600 </success_criteria>