Move ACARS panel to left of map in adsb/dashboard

- Reorder HTML: ACARS sidebar now comes before main-display
- Update grid: auto 1fr 300px (ACARS, Map, Sidebar)
- Swap borders: right border on sidebar, left border on button
- Button now on right side of ACARS panel (bordering map)
- Icon changed to left arrow (collapse direction)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-13 23:03:30 +00:00
parent 536b762f97
commit 6149427753
2 changed files with 19 additions and 19 deletions
+4 -4
View File
@@ -185,17 +185,17 @@ body {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr auto 300px;
grid-template-columns: auto 1fr 300px;
grid-template-rows: 1fr auto;
gap: 0;
height: calc(100vh - 60px);
min-height: 500px;
}
/* ACARS sidebar (between map and main sidebar) - Collapsible */
/* ACARS sidebar (left of map) - Collapsible */
.acars-sidebar {
background: var(--bg-panel);
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: row;
}
@@ -205,7 +205,7 @@ body {
min-width: 28px;
background: var(--bg-card);
border: none;
border-right: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
color: var(--accent-cyan);
cursor: pointer;
display: flex;
+15 -15
View File
@@ -43,22 +43,8 @@
</header>
<main class="dashboard">
<!-- Main Display (Map or Radar Scope) -->
<div class="main-display">
<div class="display-container">
<div id="radarMap"></div>
<div id="radarScope">
<canvas id="radarCanvas"></canvas>
</div>
</div>
</div>
<!-- ACARS Panel (right of map) - Collapsible -->
<!-- ACARS Panel (left of map) - Collapsible -->
<div class="acars-sidebar" id="acarsSidebar">
<button class="acars-collapse-btn" id="acarsCollapseBtn" onclick="toggleAcarsSidebar()" title="Toggle ACARS Panel">
<span id="acarsCollapseIcon"></span>
<span class="acars-collapse-label">ACARS</span>
</button>
<div class="acars-sidebar-content" id="acarsSidebarContent">
<div class="panel acars-panel">
<div class="panel-header">
@@ -97,6 +83,20 @@
</div>
</div>
</div>
<button class="acars-collapse-btn" id="acarsCollapseBtn" onclick="toggleAcarsSidebar()" title="Toggle ACARS Panel">
<span id="acarsCollapseIcon"></span>
<span class="acars-collapse-label">ACARS</span>
</button>
</div>
<!-- Main Display (Map or Radar Scope) -->
<div class="main-display">
<div class="display-container">
<div id="radarMap"></div>
<div id="radarScope">
<canvas id="radarCanvas"></canvas>
</div>
</div>
</div>
<!-- Sidebar -->