Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-07-25 09:18:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix squashed sky view polar plot and eliminate wasted space

Browse Source 
- Remove align-self: start from .polar-container so the grid row's
  minmax(260px, 340px) height is actually respected
- Switch #polarPlot to aspect-ratio: 1/1 so the canvas is always square
- Fix both draw functions to size canvas from getBoundingClientRect on
  the canvas itself (not parent) using min(width, height) for a square plot
- Remove min-height from .dashboard to prevent empty space below content
  on narrow/mobile screens where stacked panels are shorter than 720px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-03-19 23:17:35 +00:00
parent 0bf190c86b
commit 7365bf2e76
2 changed files with 12 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/satellite_dashboard.css
+4 -10
View File
@@ -264,7 +264,6 @@ body {
} }
/* Main dashboard grid */ /* Main dashboard grid */
/* Header ~52px + Nav 44px = ~96px, using 100px for safety */
.dashboard { .dashboard {
position: relative; position: relative;
z-index: 10; z-index: 10;
@@ -273,7 +272,6 @@ body {
grid-template-rows: minmax(0, 1fr) auto auto; grid-template-rows: minmax(0, 1fr) auto auto;
gap: 12px; gap: 12px;
height: auto; height: auto;
min-height: 720px;
padding: 12px; padding: 12px;
} }
@@ -740,25 +738,22 @@ body {
/* Polar plot */ /* Polar plot */
.polar-container { .polar-container {
min-height: 0; min-height: 0;
max-height: 340px;
align-self: start;
} }
.polar-container .panel-content { .polar-container .panel-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 14px; padding: 8px;
height: auto;
overflow: hidden; overflow: hidden;
} }
#polarPlot { #polarPlot {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; max-width: 300px;
max-width: 320px; aspect-ratio: 1 / 1;
max-height: 320px;
min-height: 0;
} }
/* Ground track map */ /* Ground track map */
@@ -1566,7 +1561,6 @@ body {
.dashboard { .dashboard {
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
height: auto; height: auto;
min-height: calc(100vh - 100px);
} }
.primary-layout { .primary-layout {
templates/satellite_dashboard.html
+8 -6
View File
@@ -2289,9 +2289,10 @@
function drawPolarPlot(pass) { function drawPolarPlot(pass) {
const canvas = document.getElementById('polarPlot'); const canvas = document.getElementById('polarPlot');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const rect = canvas.parentElement.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
canvas.width = rect.width; const size = Math.round(Math.min(rect.width, rect.height || rect.width));
canvas.height = rect.height - 20; canvas.width = size;
canvas.height = size;
const cx = canvas.width / 2; const cx = canvas.width / 2;
const cy = canvas.height / 2; const cy = canvas.height / 2;
@@ -2517,9 +2518,10 @@
function drawPolarPlotWithPosition(az, el, color) { function drawPolarPlotWithPosition(az, el, color) {
const canvas = document.getElementById('polarPlot'); const canvas = document.getElementById('polarPlot');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const rect = canvas.parentElement.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
canvas.width = rect.width; const size = Math.round(Math.min(rect.width, rect.height || rect.width));
canvas.height = rect.height - 20; canvas.width = size;
canvas.height = size;
const cx = canvas.width / 2; const cx = canvas.width / 2;
const cy = canvas.height / 2; const cy = canvas.height / 2;