Edward Betts
6927efca54
On narrow screens the sidebar collapses to a 48px handle strip at the bottom of the screen. Tapping the handle slides the panel up to 65vh, revealing the full stop list and controls. The map takes the full viewport width when the panel is closed or peek-visible. The handle label updates dynamically to show the loaded route name. The panel auto-opens when a route or route_master finishes loading. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
133 lines
2.4 KiB
CSS
133 lines
2.4 KiB
CSS
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#main-row {
|
|
height: calc(100vh - 56px); /* subtract navbar height */
|
|
}
|
|
|
|
#sidebar {
|
|
height: 100%;
|
|
min-height: 0; /* flex items default to min-height:auto, preventing overflow scrolling */
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#sidebar-inner {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: 1rem 1rem 0; /* no bottom padding — WebKit ignores it on overflow containers */
|
|
}
|
|
|
|
/* ── Mobile bottom sheet ───────────────────────────────── */
|
|
|
|
#sidebar-handle {
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
background: #fff;
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
|
|
#sidebar-handle-pill {
|
|
width: 36px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: #ced4da;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
#sidebar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
flex: none !important;
|
|
height: 65vh;
|
|
max-height: calc(100vh - 56px);
|
|
min-height: unset;
|
|
transform: translateY(calc(100% - 48px));
|
|
transition: transform 0.3s ease;
|
|
z-index: 1000;
|
|
border-radius: 16px 16px 0 0;
|
|
border-right: none !important;
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
|
|
background: #fff;
|
|
}
|
|
|
|
#sidebar.panel-open {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#map {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
flex: 0 0 100% !important;
|
|
}
|
|
}
|
|
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
.slot-box {
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.6rem;
|
|
cursor: pointer;
|
|
min-height: 2.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.slot-box.active {
|
|
border-color: #0d6efd;
|
|
background: #f0f5ff;
|
|
}
|
|
|
|
.slot-box .placeholder {
|
|
color: #adb5bd;
|
|
font-style: italic;
|
|
}
|
|
|
|
.slot-box .pencil {
|
|
color: #0d6efd;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#stop-list,
|
|
#route-master-list {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
#stop-list .stop-item {
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#stop-list .stop-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
#stop-list .stop-item.is-from {
|
|
background: #d1e7dd;
|
|
}
|
|
|
|
#stop-list .stop-item.is-to {
|
|
background: #f8d7da;
|
|
}
|
|
|
|
.leaflet-container {
|
|
font-family: inherit;
|
|
}
|