admin
30397732f9
- 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
81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
---
|
|
plan: 1
|
|
type: quick
|
|
files_modified:
|
|
- 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
|
|
---
|
|
|
|
<objective>
|
|
Fix UI feedback: header branding, navigation collapse, and layout fitting 1024x600
|
|
</objective>
|
|
|
|
<context>
|
|
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
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task>
|
|
<name>Fix Header branding and sizing</name>
|
|
<files>sample_interface/src/app/components/Header.tsx</files>
|
|
<action>
|
|
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
|
|
</action>
|
|
<verify>grep -E "RTU|Data Station" sample_interface/src/app/components/Header.tsx</verify>
|
|
<done>Header shows RTU branding with correct logo and sizing</done>
|
|
</task>
|
|
|
|
<task>
|
|
<name>Fix Sidebar collapse behavior</name>
|
|
<files>sample_interface/src/app/components/Sidebar.tsx</files>
|
|
<action>
|
|
1. Make "Menu" text clickable to toggle collapse (not just the icon)
|
|
2. Ensure collapse/expand works on click
|
|
</action>
|
|
<verify>grep -E "Menu|collapse" sample_interface/src/app/components/Sidebar.tsx | head -5</verify>
|
|
<done>Sidebar Menu text is clickable</done>
|
|
</task>
|
|
|
|
<task>
|
|
<name>Fix RainfallView layout</name>
|
|
<files>sample_interface/src/app/components/views/RainfallView.tsx</files>
|
|
<action>
|
|
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
|
|
</action>
|
|
<verify>grep "p-" RainfallView.tsx | head -5</verify>
|
|
<done>RainfallView fits 1024x600 screen</done>
|
|
</task>
|
|
|
|
<task>
|
|
<name>Fix GraphView layout</name>
|
|
<files>sample_interface/src/app/components/views/GraphView.tsx</files>
|
|
<action>
|
|
1. Adjust layout to fit 1024x600 screen
|
|
2. Reduce padding/margins as needed
|
|
</action>
|
|
<verify>ls -la sample_interface/src/app/components/views/GraphView.tsx</verify>
|
|
<done>GraphView fits 1024x600 screen</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<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>
|