mirror of
https://github.com/smittix/intercept.git
synced 2026-06-29 21:52:08 -07:00
Fix ACARS sidebar to collapse outward and expand map
- 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
@@ -194,46 +194,58 @@ 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: hidden;
|
overflow: visible;
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-sidebar.collapsed {
|
.acars-sidebar.collapsed {
|
||||||
width: 32px;
|
width: 0;
|
||||||
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-collapse-btn {
|
.acars-collapse-btn {
|
||||||
width: 32px;
|
position: absolute;
|
||||||
min-width: 32px;
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 24px;
|
||||||
|
height: 80px;
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
border: none;
|
border: 1px solid var(--border-color);
|
||||||
border-right: 1px solid var(--border-color);
|
border-right: none;
|
||||||
|
border-radius: 6px 0 0 6px;
|
||||||
color: var(--accent-cyan);
|
color: var(--accent-cyan);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
padding: 10px 0;
|
padding: 8px 0;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s, right 0.3s ease;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acars-sidebar.collapsed .acars-collapse-btn {
|
||||||
|
right: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-collapse-btn:hover {
|
.acars-collapse-btn:hover {
|
||||||
background: rgba(74, 158, 255, 0.1);
|
background: rgba(74, 158, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-collapse-label {
|
.acars-collapse-label {
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-orientation: mixed;
|
text-orientation: mixed;
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 1px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -246,7 +258,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#acarsCollapseIcon {
|
#acarsCollapseIcon {
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -260,10 +272,13 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-sidebar.collapsed .acars-sidebar-content {
|
.acars-sidebar.collapsed .acars-sidebar-content {
|
||||||
display: none;
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acars-sidebar .panel {
|
.acars-sidebar .panel {
|
||||||
|
|||||||
+29
-13
@@ -1598,47 +1598,60 @@
|
|||||||
50% { opacity: 1; transform: scale(1); }
|
50% { opacity: 1; transform: scale(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main ACARS Sidebar (Collapsible) */
|
/* Main ACARS Sidebar (Collapsible) - collapses outward */
|
||||||
.main-acars-sidebar {
|
.main-acars-sidebar {
|
||||||
|
position: relative;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
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;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
.main-acars-sidebar.collapsed {
|
.main-acars-sidebar.collapsed {
|
||||||
width: 28px;
|
width: 0;
|
||||||
|
border-left: none;
|
||||||
}
|
}
|
||||||
.main-acars-collapse-btn {
|
.main-acars-collapse-btn {
|
||||||
width: 28px;
|
position: absolute;
|
||||||
min-width: 28px;
|
right: 0;
|
||||||
background: rgba(0,0,0,0.3);
|
top: 50%;
|
||||||
border: none;
|
transform: translateY(-50%);
|
||||||
border-right: 1px solid var(--border-color);
|
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);
|
color: var(--accent-cyan);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 5px;
|
||||||
padding: 8px 0;
|
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 {
|
.main-acars-collapse-btn:hover {
|
||||||
background: rgba(74, 158, 255, 0.1);
|
background: rgba(74, 158, 255, 0.2);
|
||||||
}
|
}
|
||||||
.main-acars-collapse-label {
|
.main-acars-collapse-label {
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-orientation: mixed;
|
text-orientation: mixed;
|
||||||
font-size: 9px;
|
font-size: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
.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: 9px;
|
font-size: 8px;
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
}
|
}
|
||||||
.main-acars-sidebar.collapsed #mainAcarsCollapseIcon {
|
.main-acars-sidebar.collapsed #mainAcarsCollapseIcon {
|
||||||
@@ -1650,9 +1663,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
.main-acars-sidebar.collapsed .main-acars-content {
|
.main-acars-sidebar.collapsed .main-acars-content {
|
||||||
display: none;
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.main-acars-messages {
|
.main-acars-messages {
|
||||||
max-height: 350px;
|
max-height: 350px;
|
||||||
|
|||||||
Reference in New Issue
Block a user