mirror of
https://github.com/smittix/intercept.git
synced 2026-06-08 06:01:56 -07:00
Fix satellite dashboard layout - proper 3-column grid
- Simplified grid to single row layout - Fixed sidebar to not span multiple rows - Lowered responsive breakpoint to 1200px - Fixed panel flex-shrink behavior - Better mobile breakpoint at 800px 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
+31
-14
@@ -12476,11 +12476,12 @@ def satellite_dashboard():
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 420px;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 1fr 380px;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 80px);
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
/* Panels */
|
||||
@@ -12539,7 +12540,7 @@ def satellite_dashboard():
|
||||
/* Polar plot */
|
||||
.polar-container {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#polarPlot {
|
||||
@@ -12551,7 +12552,7 @@ def satellite_dashboard():
|
||||
/* Ground track map */
|
||||
.map-container {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#groundMap {
|
||||
@@ -12564,14 +12565,18 @@ def satellite_dashboard():
|
||||
/* Right sidebar */
|
||||
.sidebar {
|
||||
grid-column: 3;
|
||||
grid-row: 1 / 3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.sidebar .panel {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Countdown panel */
|
||||
.countdown-panel {
|
||||
background: linear-gradient(135deg, rgba(0,212,255,0.1) 0%, rgba(0,255,136,0.05) 100%);
|
||||
@@ -12901,10 +12906,21 @@ def satellite_dashboard():
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1600px) {
|
||||
/* Responsive - only kick in on smaller screens */
|
||||
@media (max-width: 1200px) {
|
||||
.dashboard {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.polar-container {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.map-container {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.sidebar {
|
||||
grid-column: 1 / 3;
|
||||
@@ -12915,26 +12931,27 @@ def satellite_dashboard():
|
||||
max-height: none;
|
||||
}
|
||||
.sidebar .panel {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-height: 300px;
|
||||
flex: 1 1 280px;
|
||||
max-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@media (max-width: 800px) {
|
||||
.dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
.polar-container, .map-container {
|
||||
grid-column: 1;
|
||||
min-height: 350px;
|
||||
min-height: 300px;
|
||||
}
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar .panel {
|
||||
flex: none;
|
||||
max-height: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user