Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix ACARS sidebar to collapse outward and expand map

Browse Source 
- Change collapsed width from 32px to 0 so map expands fully
- Position collapse button as absolute overlay on map edge
- Button slides to edge of map when collapsed (right: 100%)
- Content fades out smoothly instead of abrupt hide
- Applied same fix to both adsb_dashboard.css and index.html

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-13 22:46:12 +00:00
parent 135390788d
commit c94d0a642d
2 changed files with 58 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/css/adsb_dashboard.css
View File

@@ -194,46 +194,58 @@ body {
/* ACARS sidebar (between map and main sidebar) - Collapsible */
.acars-sidebar {
position: relative;
background: var(--bg-panel);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: row;
overflow: hidden;
overflow: visible;
transition: width 0.3s ease;
width: 280px;
}
.acars-sidebar.collapsed {
width: 32px;
width: 0;
border-left: none;
}
.acars-collapse-btn {
width: 32px;
min-width: 32px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 80px;
background: var(--bg-card);
border: none;
border-right: 1px solid var(--border-color);
border: 1px solid var(--border-color);
border-right: none;
border-radius: 6px 0 0 6px;
color: var(--accent-cyan);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 0;
transition: background 0.2s;
gap: 6px;
padding: 8px 0;
transition: background 0.2s, right 0.3s ease;
z-index: 100;
}
.acars-sidebar.collapsed .acars-collapse-btn {
right: 100%;
}
.acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.1);
background: rgba(74, 158, 255, 0.2);
}
.acars-collapse-label {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 10px;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
letter-spacing: 1px;
text-transform: uppercase;
}
@@ -246,7 +258,7 @@ body {
}
#acarsCollapseIcon {
font-size: 10px;
font-size: 9px;
transition: transform 0.3s;
}
@@ -260,10 +272,13 @@ body {
flex-direction: column;
overflow: hidden;
min-width: 0;
opacity: 1;
transition: opacity 0.2s ease;
}
.acars-sidebar.collapsed .acars-sidebar-content {
display: none;
opacity: 0;
pointer-events: none;
}
.acars-sidebar .panel {

42
templates/index.html
View File

@@ -1598,47 +1598,60 @@
50% { opacity: 1; transform: scale(1); }
}
/* Main ACARS Sidebar (Collapsible) */
/* Main ACARS Sidebar (Collapsible) - collapses outward */
.main-acars-sidebar {
position: relative;
width: 220px;
background: var(--bg-panel);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: row;
overflow: visible;
transition: width 0.3s ease;
}
.main-acars-sidebar.collapsed {
width: 28px;
width: 0;
border-left: none;
}
.main-acars-collapse-btn {
width: 28px;
min-width: 28px;
background: rgba(0,0,0,0.3);
border: none;
border-right: 1px solid var(--border-color);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
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);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 0;
gap: 5px;
padding: 6px 0;
transition: background 0.2s, right 0.3s ease;
z-index: 100;
}
.main-acars-sidebar.collapsed .main-acars-collapse-btn {
right: 100%;
}
.main-acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.1);
background: rgba(74, 158, 255, 0.2);
}
.main-acars-collapse-label {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 9px;
font-size: 8px;
font-weight: 600;
letter-spacing: 1px;
}
.main-acars-sidebar.collapsed .main-acars-collapse-label { display: block; }
.main-acars-sidebar:not(.collapsed) .main-acars-collapse-label { display: none; }
#mainAcarsCollapseIcon {
font-size: 9px;
font-size: 8px;
transition: transform 0.3s;
}
.main-acars-sidebar.collapsed #mainAcarsCollapseIcon {
@@ -1650,9 +1663,12 @@
flex-direction: column;
overflow: hidden;
min-width: 0;
opacity: 1;
transition: opacity 0.2s ease;
}
.main-acars-sidebar.collapsed .main-acars-content {
display: none;
opacity: 0;
pointer-events: none;
}
.main-acars-messages {
max-height: 350px;