Edward Betts
ceea5706b3
Replace the unreliable peek-strip approach with a floating '☰ Controls' button on the map. The button is always clearly visible, hides when the panel is open, and reappears when the panel closes. Also fix two iOS Safari issues that were hiding the sidebar entirely: - overflow:hidden on body clips position:fixed elements in mobile Safari; reset to overflow:visible in the mobile media query - Add viewport-fit=cover and env(safe-area-inset-bottom) padding so the sidebar clears the home indicator / browser toolbar - Use 100dvh instead of 100vh to avoid iOS address-bar overflow Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
166 lines
3.2 KiB
CSS
166 lines
3.2 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) {
|
|
/* overflow:hidden on body clips position:fixed in mobile Safari — reset it */
|
|
html, body {
|
|
overflow: visible;
|
|
}
|
|
|
|
#sidebar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
flex: none !important;
|
|
height: 65vh;
|
|
max-height: calc(100dvh - 56px);
|
|
min-height: unset;
|
|
/* fully off-screen by default; FAB opens it */
|
|
transform: translateY(100%);
|
|
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;
|
|
/* clear of home-indicator / browser chrome */
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
#sidebar.panel-open {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#map {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
flex: 0 0 100% !important;
|
|
position: relative;
|
|
}
|
|
|
|
/* Floating action button */
|
|
#panel-fab {
|
|
position: absolute;
|
|
bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); /* above attribution */
|
|
right: 12px;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: #fff;
|
|
border: none;
|
|
border-radius: 24px;
|
|
padding: 10px 16px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#panel-fab:active {
|
|
background: #f8f9fa;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|