matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 14:44:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix button wrapping and add scale bar control

Browse source 
- Add whiteSpace: nowrap to Get Directions button to prevent text wrap
- Add ScaleControl (imperial units) to bottom-right of map
- Add dark theme styling for scale bar

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-04-28 22:06:35 +00:00
commit 0ba8911100
3 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/MapView.jsx
View file

@ -830,6 +830,12 @@ const MapView = forwardRef(function MapView(_, ref) {
map.addControl(new maplibregl.NavigationControl(), 'top-right') map.addControl(new maplibregl.NavigationControl(), 'top-right')
// Scale bar control
map.addControl(new maplibregl.ScaleControl({
maxWidth: 120,
unit: 'imperial',
}), 'bottom-right')
// Map click — two-click selection model // Map click — two-click selection model
map.on('click', (e) => { map.on('click', (e) => {
// If a stop pin was just clicked, skip // If a stop pin was just clicked, skip

2
src/components/PlaceCard.jsx
View file

@ -420,7 +420,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
<div className="mt-3 pt-3 flex gap-2" style={{ borderTop: "1px solid var(--border)" }}> <div className="mt-3 pt-3 flex gap-2" style={{ borderTop: "1px solid var(--border)" }}>
{variant === "preview" && ( {variant === "preview" && (
<> <>
{stops.length < 2 && <button onClick={handleDirections} className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent)", color: "var(--text-inverse)" }}><Navigation size={13} />Get Directions</button>} {stops.length < 2 && <button onClick={handleDirections} className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent)", color: "var(--text-inverse)", whiteSpace: "nowrap" }}><Navigation size={13} />Get Directions</button>}
{existingStopIndex >= 0 ? ( {existingStopIndex >= 0 ? (
<span className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent-muted)", color: "var(--accent)" }}>Stop {String.fromCharCode(65 + existingStopIndex)}</span> <span className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent-muted)", color: "var(--accent)" }}>Stop {String.fromCharCode(65 + existingStopIndex)}</span>
) : ( ) : (

13
src/index.css
View file

@ -561,3 +561,16 @@ body {
.contact-item:hover { .contact-item:hover {
background: var(--bg-overlay); background: var(--bg-overlay);
} }
/* Scale control - dark theme styling */
.maplibregl-ctrl-scale {
background-color: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: none;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
font-weight: 500;
padding: 0 5px;
line-height: 1.5;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}