feat(route-builder): stats bar, waypoint detail panel, elevation refactor
Work-in-progress route-builder checkpoint: - New RouteStatsBar and WaypointDetailPanel components. - EditMap / ImageDropzone / WaypointTable / builderStore updates. - Hoist the elevation gain/loss/range helpers out of build-hikes.ts into src/lib/hikes/elevation.ts so the builder and the build share one implementation. Also bundled here (same file, couldn't be split cleanly): build-hikes.ts now detects each hike's country at build time — 'CH' when a Swiss canton matched, otherwise an OSM/Nominatim reverse-geocode — and writes it to the manifest, feeding the new Kanton/Land filter.
This commit is contained in:
@@ -3,10 +3,14 @@
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import EditMap from '$lib/components/hikes/route-builder/EditMap.svelte';
|
||||
import WaypointTable from '$lib/components/hikes/route-builder/WaypointTable.svelte';
|
||||
import WaypointDetailPanel from '$lib/components/hikes/route-builder/WaypointDetailPanel.svelte';
|
||||
import ImageDropzone from '$lib/components/hikes/route-builder/ImageDropzone.svelte';
|
||||
import RouteStatsBar from '$lib/components/hikes/route-builder/RouteStatsBar.svelte';
|
||||
import { assembleTrackPoints, buildGpx, type GpxImageWaypoint } from '$lib/gpx';
|
||||
import {
|
||||
builder,
|
||||
focusWaypoint,
|
||||
mapView,
|
||||
setRoutedSegments,
|
||||
setElevations,
|
||||
clearDraft,
|
||||
@@ -14,6 +18,14 @@
|
||||
densifyLinearSegments,
|
||||
importGpx
|
||||
} from '$lib/components/hikes/route-builder/builderStore.svelte';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import Crosshair from '@lucide/svelte/icons/crosshair';
|
||||
import Download from '@lucide/svelte/icons/download';
|
||||
import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
|
||||
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
|
||||
import CheckCircle2 from '@lucide/svelte/icons/circle-check-big';
|
||||
import Toggle from '$lib/components/Toggle.svelte';
|
||||
|
||||
let busy = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
@@ -202,12 +214,10 @@
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// GPX import: file input is hidden; the visible "GPX laden" button
|
||||
// proxies its click. Imported route REPLACES the current draft, so
|
||||
// confirm first when there's existing work to avoid silent data loss.
|
||||
let gpxFileInput: HTMLInputElement | undefined = $state();
|
||||
|
||||
function openGpxPicker() {
|
||||
// GPX import: handed off to ImageDropzone's FAB picker, which forwards
|
||||
// any `.gpx` file in the picked set here. Imported route REPLACES the
|
||||
// current draft, so confirm first when there's existing work.
|
||||
async function importGpxFile(file: File) {
|
||||
if (
|
||||
builder.waypoints.length > 0 &&
|
||||
!confirm(
|
||||
@@ -216,13 +226,6 @@
|
||||
) {
|
||||
return;
|
||||
}
|
||||
gpxFileInput?.click();
|
||||
}
|
||||
|
||||
async function onGpxSelected(e: Event) {
|
||||
const input = e.currentTarget as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
const xml = await file.text();
|
||||
const result = importGpx(xml);
|
||||
@@ -236,9 +239,6 @@
|
||||
routeRequestId++;
|
||||
} catch (err) {
|
||||
error = `GPX-Import fehlgeschlagen: ${(err as Error).message}`;
|
||||
} finally {
|
||||
// Reset so the same file can be re-selected later.
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -253,8 +253,73 @@
|
||||
function cancelPlacement() {
|
||||
pendingPlacementId = null;
|
||||
}
|
||||
|
||||
// --- Prev / next waypoint navigation -------------------------------------
|
||||
// Derived list of placed-only waypoints (the only ones that can sit on the
|
||||
// map). The nav bar walks this list in display order so jumping with
|
||||
// chevrons follows the table's numbering.
|
||||
const placedWaypoints = $derived(builder.waypoints.filter((w) => !w.unplaced));
|
||||
|
||||
const focusedIdx = $derived.by(() => {
|
||||
if (!mapView.focusId) return -1;
|
||||
return placedWaypoints.findIndex((w) => w.id === mapView.focusId);
|
||||
});
|
||||
|
||||
function focusByIdx(idx: number) {
|
||||
const wp = placedWaypoints[idx];
|
||||
if (!wp) return;
|
||||
focusWaypoint(wp.id);
|
||||
}
|
||||
|
||||
function focusPrev() {
|
||||
if (placedWaypoints.length === 0) return;
|
||||
if (focusedIdx <= 0) {
|
||||
// No focus yet, or already at first → land on the last waypoint
|
||||
// (typical "step backwards through the route" intent).
|
||||
focusByIdx(focusedIdx === -1 ? placedWaypoints.length - 1 : 0);
|
||||
return;
|
||||
}
|
||||
focusByIdx(focusedIdx - 1);
|
||||
}
|
||||
|
||||
function focusNext() {
|
||||
if (placedWaypoints.length === 0) return;
|
||||
if (focusedIdx === -1) {
|
||||
focusByIdx(0);
|
||||
return;
|
||||
}
|
||||
if (focusedIdx >= placedWaypoints.length - 1) {
|
||||
focusByIdx(placedWaypoints.length - 1);
|
||||
return;
|
||||
}
|
||||
focusByIdx(focusedIdx + 1);
|
||||
}
|
||||
|
||||
function refocus() {
|
||||
// Re-center the map on the currently focused waypoint (handy after
|
||||
// the user pans away).
|
||||
if (focusedIdx === -1) focusByIdx(0);
|
||||
else focusByIdx(focusedIdx);
|
||||
}
|
||||
|
||||
// Keyboard shortcuts for power users: ← / → step through waypoints
|
||||
// (when not focused on an input).
|
||||
function onKey(e: KeyboardEvent) {
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
|
||||
if (target?.isContentEditable) return;
|
||||
if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
focusPrev();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
focusNext();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={onKey} />
|
||||
|
||||
<Seo title="Routen-Builder · Wanderungen" description="Eigene Wanderrouten erstellen, exportieren und teilen." lang="de" />
|
||||
|
||||
<svelte:head>
|
||||
@@ -264,241 +329,496 @@
|
||||
|
||||
<section class="builder">
|
||||
<header class="header">
|
||||
<input
|
||||
class="name-input"
|
||||
type="text"
|
||||
placeholder="Name der Tour…"
|
||||
bind:value={builder.name}
|
||||
/>
|
||||
<div class="actions">
|
||||
<select bind:value={builder.profile} disabled={!builder.autoSnap}>
|
||||
<option value="hiking-mountain">Wandern (Berg)</option>
|
||||
<option value="trekking">Trekking</option>
|
||||
<option value="road">Strasse</option>
|
||||
</select>
|
||||
<label class="snap-toggle" class:active={builder.autoSnap}>
|
||||
<input type="checkbox" bind:checked={builder.autoSnap} />
|
||||
<span>Auf Wege snappen</span>
|
||||
</label>
|
||||
<!-- Mode-agnostic busy chip — fires for both the snap-to-route
|
||||
path and the densify+elevate path so the user always knows
|
||||
when the GPX is still incomplete. -->
|
||||
<span class="status" class:busy aria-live="polite" aria-atomic="true">
|
||||
<span class="status-dot" aria-hidden="true"></span>
|
||||
{busy ? 'Berechne Route + Höhenprofil…' : 'Bereit'}
|
||||
</span>
|
||||
<div class="header-primary">
|
||||
<input
|
||||
class="name-input"
|
||||
type="text"
|
||||
placeholder="Name der Tour…"
|
||||
bind:value={builder.name}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="primary"
|
||||
class="download-cta"
|
||||
onclick={downloadGpx}
|
||||
disabled={busy}
|
||||
title={busy ? 'Warten bis Route + Höhenprofil berechnet sind' : ''}
|
||||
title={busy ? 'Warten bis Route + Höhenprofil berechnet sind' : 'GPX herunterladen'}
|
||||
>
|
||||
GPX herunterladen
|
||||
<Download size={16} strokeWidth={2.2} />
|
||||
<span>GPX herunterladen</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="link"
|
||||
onclick={openGpxPicker}
|
||||
title="Eine zuvor exportierte GPX-Datei in den Editor laden"
|
||||
class="reset-btn"
|
||||
onclick={clearDraft}
|
||||
aria-label="Entwurf zurücksetzen"
|
||||
title="Entwurf zurücksetzen"
|
||||
>
|
||||
GPX laden
|
||||
<RotateCcw size={16} strokeWidth={2} />
|
||||
</button>
|
||||
<input
|
||||
bind:this={gpxFileInput}
|
||||
type="file"
|
||||
accept=".gpx,application/gpx+xml,application/xml,text/xml"
|
||||
onchange={onGpxSelected}
|
||||
hidden
|
||||
/>
|
||||
<button type="button" class="link" onclick={clearDraft}>Zurücksetzen</button>
|
||||
</div>
|
||||
<div class="header-settings">
|
||||
<div class="setting">
|
||||
<span class="setting-label">Routing</span>
|
||||
<select
|
||||
class="profile-select"
|
||||
bind:value={builder.profile}
|
||||
disabled={!builder.autoSnap}
|
||||
>
|
||||
<option value="hiking-mountain">Wandern (Berg)</option>
|
||||
<option value="trekking">Trekking</option>
|
||||
<option value="road">Strasse</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting setting-toggle">
|
||||
<Toggle bind:checked={builder.autoSnap} label="Auf Wege snappen" />
|
||||
</div>
|
||||
<!-- Mode-agnostic snap status. Spinner while the route or
|
||||
elevation profile is still resolving; subtle check when idle. -->
|
||||
<span class="snap-status" class:busy aria-live="polite" aria-atomic="true">
|
||||
{#if busy}
|
||||
<LoaderCircle size={14} strokeWidth={2.4} class="spin" />
|
||||
<span>Berechne Route + Höhenprofil…</span>
|
||||
{:else}
|
||||
<CheckCircle2 size={14} strokeWidth={2} />
|
||||
<span>Bereit</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouteStatsBar {busy} />
|
||||
|
||||
{#if error}
|
||||
<p class="err">{error}</p>
|
||||
{/if}
|
||||
|
||||
<div class="grid">
|
||||
<div class="map-col">
|
||||
<div class="map-row">
|
||||
<div class="map-stage">
|
||||
<EditMap
|
||||
{pendingPlacementId}
|
||||
onPlacementCancel={cancelPlacement}
|
||||
onPlacementComplete={cancelPlacement}
|
||||
/>
|
||||
{#if placedWaypoints.length > 0}
|
||||
<div class="map-nav" role="group" aria-label="Wegpunkt-Navigation">
|
||||
<button
|
||||
type="button"
|
||||
onclick={focusPrev}
|
||||
aria-label="Vorheriger Wegpunkt"
|
||||
title="Vorheriger Wegpunkt (←)"
|
||||
>
|
||||
<ChevronLeft size={18} strokeWidth={2.2} />
|
||||
</button>
|
||||
<span class="map-nav-label" aria-live="polite">
|
||||
{focusedIdx === -1 ? '–' : focusedIdx + 1}
|
||||
<span class="sep">/</span>
|
||||
{placedWaypoints.length}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="recenter"
|
||||
onclick={refocus}
|
||||
aria-label="Auf aktuellen Wegpunkt zentrieren"
|
||||
title="Zentrieren"
|
||||
>
|
||||
<Crosshair size={16} strokeWidth={2.2} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={focusNext}
|
||||
aria-label="Nächster Wegpunkt"
|
||||
title="Nächster Wegpunkt (→)"
|
||||
>
|
||||
<ChevronRight size={18} strokeWidth={2.2} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="side">
|
||||
<WaypointTable
|
||||
{pendingPlacementId}
|
||||
onRequestPlacement={startPlacement}
|
||||
onCancelPlacement={cancelPlacement}
|
||||
/>
|
||||
<ImageDropzone />
|
||||
<div class="side-col">
|
||||
{#if placedWaypoints.length > 0}
|
||||
<nav class="step-nav" aria-label="Zwischen Wegpunkten wechseln">
|
||||
<button
|
||||
type="button"
|
||||
onclick={focusPrev}
|
||||
disabled={focusedIdx === 0}
|
||||
aria-label="Vorheriger Wegpunkt"
|
||||
>
|
||||
<ChevronLeft size={16} strokeWidth={2} />
|
||||
<span>Zurück</span>
|
||||
</button>
|
||||
<span class="step-pos">
|
||||
{focusedIdx === -1 ? '–' : focusedIdx + 1}
|
||||
<span class="sep">/</span>
|
||||
{placedWaypoints.length}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={focusNext}
|
||||
disabled={focusedIdx === placedWaypoints.length - 1}
|
||||
aria-label="Nächster Wegpunkt"
|
||||
>
|
||||
<span>Weiter</span>
|
||||
<ChevronRight size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</nav>
|
||||
{/if}
|
||||
<WaypointDetailPanel onCancelPlacement={cancelPlacement} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<WaypointTable
|
||||
{pendingPlacementId}
|
||||
onRequestPlacement={startPlacement}
|
||||
onCancelPlacement={cancelPlacement}
|
||||
/>
|
||||
|
||||
<p class="hint">
|
||||
Tipp: Klicke auf die Karte, um Wegpunkte hinzuzufügen. Bilder mit GPS-EXIF werden
|
||||
automatisch als Wegpunkte verwendet. Der GPX-Export bleibt lokal — eine Veröffentlichung
|
||||
als Wandereintrag erfordert einen Commit der Dateien unter
|
||||
automatisch als Wegpunkte verwendet. Mit den Pfeiltasten ← → kannst du die Wegpunkte
|
||||
nacheinander auf der Karte anspringen. Der GPX-Export bleibt lokal — eine
|
||||
Veröffentlichung als Wandereintrag erfordert einen Commit der Dateien unter
|
||||
<code>src/content/hikes/<slug>/</code>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- FAB lives outside .builder so its fixed-positioning doesn't add a
|
||||
phantom flex item / gap to the page's vertical flow. -->
|
||||
<ImageDropzone onGpxImport={importGpxFile} />
|
||||
|
||||
<style>
|
||||
.builder {
|
||||
max-width: 1300px;
|
||||
max-width: 1400px;
|
||||
margin-inline: auto;
|
||||
padding: 1rem 1rem 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Primary row: name input is the dominant element; download is the
|
||||
* single primary CTA; reset is an icon-only escape hatch. */
|
||||
.header-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
flex: 1 1 240px;
|
||||
font-size: 1.25rem;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
.name-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
.actions select,
|
||||
.actions button {
|
||||
.download-cta {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 0.55rem 1rem;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.download-cta:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover, var(--color-primary));
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0.4em 1em -0.4em color-mix(in oklab, var(--color-primary) 65%, transparent);
|
||||
}
|
||||
|
||||
.download-cta:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-tertiary);
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color var(--transition-fast), border-color var(--transition-fast),
|
||||
background var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
color: var(--red);
|
||||
border-color: color-mix(in oklab, var(--red) 35%, var(--color-border));
|
||||
background: color-mix(in oklab, var(--red) 8%, transparent);
|
||||
}
|
||||
|
||||
/* Secondary row: routing settings grouped on the left, live snap
|
||||
* status on the right. Quieter than the primary row by design. */
|
||||
.header-settings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.25rem 0.15rem 0;
|
||||
}
|
||||
|
||||
.setting {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-tertiary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-select {
|
||||
appearance: none;
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.35rem 1.85rem 0.35rem 0.7rem;
|
||||
background: var(--color-bg-tertiary)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2381a1c1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
|
||||
no-repeat right 0.55rem center;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions button.primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.actions button.link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.actions button:disabled,
|
||||
.actions select:disabled {
|
||||
opacity: 0.6;
|
||||
.profile-select:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.snap-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.setting-toggle :global(.toggle-wrapper label) {
|
||||
font-size: 0.85rem;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.snap-toggle.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.snap-toggle input {
|
||||
accent-color: var(--color-primary);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* Live busy chip — sits between the snap toggle and the download
|
||||
* button so the user can't miss it when GPX export would land
|
||||
* without elevations yet. Quiet green dot when idle, pulsing
|
||||
* amber dot when fetching. */
|
||||
.status {
|
||||
.snap-status {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--color-text-tertiary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
flex: 0 0 auto;
|
||||
box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 40%, transparent);
|
||||
.snap-status :global(svg) {
|
||||
color: var(--green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status.busy {
|
||||
color: var(--orange);
|
||||
.snap-status.busy {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.status.busy .status-dot {
|
||||
background: var(--orange);
|
||||
animation: status-pulse 1.1s ease-out infinite;
|
||||
.snap-status.busy :global(svg) {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 color-mix(in oklab, var(--orange) 70%, transparent);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.55rem color-mix(in oklab, var(--orange) 0%, transparent);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 color-mix(in oklab, var(--orange) 0%, transparent);
|
||||
}
|
||||
.snap-status :global(.spin) {
|
||||
animation: snap-spin 0.85s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes snap-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.status.busy .status-dot {
|
||||
.snap-status :global(.spin) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
.map-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid {
|
||||
@media (max-width: 1024px) {
|
||||
.map-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.map-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.side-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Stand-alone Zurück/Weiter slider sitting above the detail-panel card,
|
||||
* not inside it — gives the user the same step controls as the floating
|
||||
* map-nav, but with full labels in the side column. */
|
||||
.step-nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
padding: 0.3rem;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.step-nav button {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-text-primary);
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.step-nav button:first-child {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.step-nav button:last-child {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.step-nav button:hover:not(:disabled) {
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.step-nav button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.step-pos {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 3.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-pos .sep {
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0 0.2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Floating prev/next navigator anchored to the top-right of the map.
|
||||
* Sits above Leaflet's own zoom controls (z-index 1000); we use 600 to
|
||||
* stay above markers/polylines (400) but below modal-ish UI. */
|
||||
.map-nav {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
z-index: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.25rem;
|
||||
background: color-mix(in oklab, var(--color-surface) 92%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: var(--shadow-md);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.map-nav button {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-text-primary);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.map-nav button:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.map-nav button:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.map-nav button.recenter {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.map-nav-label {
|
||||
padding: 0 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--color-text-primary);
|
||||
min-width: 3.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nav-label .sep {
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0 0.15rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.err {
|
||||
margin: 0 0 1rem;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: color-mix(in oklab, var(--red) 12%, transparent);
|
||||
color: var(--red);
|
||||
@@ -506,7 +826,7 @@
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 0.25rem;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user