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

Fix ACARS toggle button visibility by using flexbox layout

Browse Source 
The parent container has overflow:auto which clipped the absolutely
positioned button. Changed to simple flexbox approach where:
- Button is a normal flex child (always visible)
- Content div collapses to width:0 when collapsed
- Map expands to fill available space via flex

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-13 23:01:17 +00:00
parent 527c67f389
commit 990c5082ea
2 changed files with 21 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/adsb_dashboard.css
+8 -24
View File
@@ -194,32 +194,18 @@ body {
/* ACARS sidebar (between map and main sidebar) - Collapsible */ /* ACARS sidebar (between map and main sidebar) - Collapsible */
.acars-sidebar { .acars-sidebar {
position: relative;
background: var(--bg-panel); background: var(--bg-panel);
border-left: 1px solid var(--border-color); border-left: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: visible;
transition: width 0.3s ease;
width: 280px;
}
.acars-sidebar.collapsed {
width: 0;
border-left: none;
} }
.acars-collapse-btn { .acars-collapse-btn {
position: absolute; width: 28px;
left: 0; min-width: 28px;
top: 50%;
transform: translateX(-100%) translateY(-50%);
width: 24px;
height: 80px;
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border-color); border: none;
border-right: none; border-right: 1px solid var(--border-color);
border-radius: 6px 0 0 6px;
color: var(--accent-cyan); color: var(--accent-cyan);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -229,7 +215,6 @@ body {
gap: 6px; gap: 6px;
padding: 8px 0; padding: 8px 0;
transition: background 0.2s; transition: background 0.2s;
z-index: 100;
} }
.acars-collapse-btn:hover { .acars-collapse-btn:hover {
@@ -254,7 +239,7 @@ body {
} }
#acarsCollapseIcon { #acarsCollapseIcon {
font-size: 9px; font-size: 10px;
transition: transform 0.3s; transition: transform 0.3s;
} }
@@ -263,16 +248,15 @@ body {
} }
.acars-sidebar-content { .acars-sidebar-content {
flex: 1; width: 250px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-width: 0; transition: width 0.3s ease, opacity 0.2s ease;
opacity: 1;
transition: opacity 0.2s ease;
} }
.acars-sidebar.collapsed .acars-sidebar-content { .acars-sidebar.collapsed .acars-sidebar-content {
width: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
templates/index.html
+13 -28
View File
@@ -1555,32 +1555,19 @@
50% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1); }
} }
/* Main ACARS Sidebar (Collapsible) - collapses outward */ /* Main ACARS Sidebar (Collapsible) */
.main-acars-sidebar { .main-acars-sidebar {
position: relative;
width: 220px;
background: var(--bg-panel);
border-left: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: visible; background: var(--bg-panel);
transition: width 0.3s ease; border-left: 1px solid var(--border-color);
}
.main-acars-sidebar.collapsed {
width: 0;
border-left: none;
} }
.main-acars-collapse-btn { .main-acars-collapse-btn {
position: absolute; width: 24px;
left: 0; min-width: 24px;
top: 50%; background: rgba(0,0,0,0.4);
transform: translateX(-100%) translateY(-50%); border: none;
width: 22px; border-right: 1px solid var(--border-color);
height: 70px;
background: rgba(0,0,0,0.6);
border: 1px solid var(--border-color);
border-right: none;
border-radius: 5px 0 0 5px;
color: var(--accent-cyan); color: var(--accent-cyan);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -1590,10 +1577,9 @@
gap: 5px; gap: 5px;
padding: 6px 0; padding: 6px 0;
transition: background 0.2s; transition: background 0.2s;
z-index: 100;
} }
.main-acars-collapse-btn:hover { .main-acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.2); background: rgba(74, 158, 255, 0.15);
} }
.main-acars-collapse-label { .main-acars-collapse-label {
writing-mode: vertical-rl; writing-mode: vertical-rl;
@@ -1605,22 +1591,21 @@
.main-acars-sidebar.collapsed .main-acars-collapse-label { display: block; } .main-acars-sidebar.collapsed .main-acars-collapse-label { display: block; }
.main-acars-sidebar:not(.collapsed) .main-acars-collapse-label { display: none; } .main-acars-sidebar:not(.collapsed) .main-acars-collapse-label { display: none; }
#mainAcarsCollapseIcon { #mainAcarsCollapseIcon {
font-size: 8px; font-size: 10px;
transition: transform 0.3s; transition: transform 0.3s;
} }
.main-acars-sidebar.collapsed #mainAcarsCollapseIcon { .main-acars-sidebar.collapsed #mainAcarsCollapseIcon {
transform: rotate(180deg); transform: rotate(180deg);
} }
.main-acars-content { .main-acars-content {
flex: 1; width: 196px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-width: 0; transition: width 0.3s ease, opacity 0.2s ease;
opacity: 1;
transition: opacity 0.2s ease;
} }
.main-acars-sidebar.collapsed .main-acars-content { .main-acars-sidebar.collapsed .main-acars-content {
width: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }