platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile optimization: Compact header and navigation

Browse Source 
- Responsive font sizes with clamp()
- Shorter navigation labels (Explorer, Upload, Console, Health, Pilot, Ready)
- Developer Mode -> Dev
- Flex wrap for mobile screens
- Smaller padding and gaps

Tested on pilot.landvex.com
This commit is contained in:
Bernt
2026-07-02 17:38:31 +00:00
parent 05ed037fe8
commit 430cb24ef0
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/App.tsx
+13 -12
View File
@@ -14,33 +14,34 @@ function App() {
return (
<div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
<header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h1>LandveX {developerMode ? '(Developer Mode)' : ''}</h1>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
<h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
<button
onClick={() => setDeveloperMode(!developerMode)}
style={{
padding: '8px 16px',
padding: '6px 12px',
background: developerMode ? '#ffd700' : '#f0f0f0',
border: '1px solid #ccc',
borderRadius: 4,
cursor: 'pointer',
fontSize: '0.8rem',
}}
>
{developerMode ? '🔓 Developer' : '🔒 Normal'}
{developerMode ? '🔓 Dev' : '🔒 Normal'}
</button>
</div>
<nav style={{ display: 'flex', gap: 20, marginTop: 10 }}>
<Link to="/">Dataset Explorer</Link>
<Link to="/upload">Mission Upload</Link>
<Link to="/console">Field Console</Link>
<nav style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', fontSize: '0.85rem' }}>
<Link to="/">Explorer</Link>
<Link to="/upload">Upload</Link>
<Link to="/console">Console</Link>
<Link to="/health">Health</Link>
<Link to="/pilot">Pilot 001</Link>
<Link to="/readiness">Readiness</Link>
<Link to="/pilot">Pilot</Link>
<Link to="/readiness">Ready</Link>
{developerMode && (
<>
<Link to="/datasets">Datasets</Link>
<Link to="/datasets">Data</Link>
<Link to="/models">Models</Link>
<Link to="/training">Training</Link>
<Link to="/training">Train</Link>
</>
)}
</nav>