mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40:00 -07:00
Fix mobile navigation and display issues
- Add APRS to mobile navigation bar (was missing) - Fix CSS that was forcing aircraft visuals to always display - Only apply flex layout to visuals when they are actually visible - Fix ADS-B dashboard mobile layout with proper flex ordering - Reset grid properties on mobile for proper stacking - Hide ACARS sidebar on mobile (desktop only feature)
This commit is contained in:
@@ -1046,27 +1046,35 @@ body {
|
||||
@media (max-width: 767px) {
|
||||
/* Dashboard should be scrollable, not fixed height */
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
min-height: calc(100dvh - 60px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Main display needs explicit height on mobile */
|
||||
/* Main display needs explicit height on mobile - reset grid properties */
|
||||
.main-display {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 300px;
|
||||
flex-shrink: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
/* Map container needs full dimensions */
|
||||
.display-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#radarMap {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@@ -1081,8 +1089,18 @@ body {
|
||||
|
||||
/* Sidebar should not be height restricted */
|
||||
.sidebar {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
max-height: none;
|
||||
flex-shrink: 0;
|
||||
order: 2;
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(74, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Hide ACARS sidebar on mobile */
|
||||
.acars-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Selected aircraft panel - compact on mobile */
|
||||
@@ -1103,6 +1121,9 @@ body {
|
||||
|
||||
/* Controls bar - wrap and stack */
|
||||
.controls-bar {
|
||||
order: 3;
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
|
||||
Reference in New Issue
Block a user