2026-04-20 04:47:44 +00:00
|
|
|
@import "tailwindcss";
|
|
|
|
|
|
|
|
|
|
html, body, #root {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
height: 100%;
|
feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* MapLibre popup styling to match dark theme */
|
|
|
|
|
.maplibregl-popup-content {
|
|
|
|
|
background: #1f2937 !important;
|
|
|
|
|
border: 1px solid #374151 !important;
|
|
|
|
|
border-radius: 8px !important;
|
|
|
|
|
padding: 8px 12px !important;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.maplibregl-popup-tip {
|
|
|
|
|
border-top-color: #1f2937 !important;
|
|
|
|
|
border-bottom-color: #1f2937 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.maplibregl-popup-close-button {
|
|
|
|
|
color: #9ca3af !important;
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
padding: 2px 6px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.maplibregl-popup-close-button:hover {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom scrollbar for panels */
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: #4b5563;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: #6b7280;
|
2026-04-20 04:47:44 +00:00
|
|
|
}
|