mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 22:54:42 +02:00
e7b08a7dc9
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>
51 lines
993 B
CSS
51 lines
993 B
CSS
@import "tailwindcss";
|
|
|
|
html, body, #root {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
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;
|
|
}
|