synced chart hover, fixed map position across pages
This commit is contained in:
Vincent van der Wal
@@ -1,10 +1,13 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
profile,
|
||||
hoverD = null,
|
||||
onhover,
|
||||
onselect
|
||||
}: {
|
||||
profile: { d: number; ele: number }[];
|
||||
/** shared hover distance controlled by the page, so charts stay in sync */
|
||||
hoverD?: number | null;
|
||||
onhover?: (d: number | null) => void;
|
||||
onselect?: (d: number) => void;
|
||||
} = $props();
|
||||
@@ -49,22 +52,23 @@
|
||||
`${linePath}L${x(totalDist).toFixed(1)},${height - pad.bottom}L${pad.left},${height - pad.bottom}Z`
|
||||
);
|
||||
|
||||
let hover = $state<{ d: number; ele: number } | null>(null);
|
||||
|
||||
function onmove(event: PointerEvent) {
|
||||
const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
|
||||
const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
|
||||
const target = frac * totalDist;
|
||||
// binary search closest point
|
||||
// snap the shared hover distance to this chart's nearest point
|
||||
const hover = $derived.by(() => {
|
||||
if (hoverD === null || profile.length === 0) return null;
|
||||
let lo = 0;
|
||||
let hi = profile.length - 1;
|
||||
while (hi - lo > 1) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (profile[mid].d < target) lo = mid;
|
||||
if (profile[mid].d < hoverD) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
hover = target - profile[lo].d < profile[hi].d - target ? profile[lo] : profile[hi];
|
||||
onhover?.(hover.d);
|
||||
return hoverD - profile[lo].d < profile[hi].d - hoverD ? profile[lo] : profile[hi];
|
||||
});
|
||||
|
||||
function onmove(event: PointerEvent) {
|
||||
const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
|
||||
const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
|
||||
onhover?.(frac * totalDist);
|
||||
}
|
||||
|
||||
const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
|
||||
@@ -105,10 +109,7 @@
|
||||
fill="transparent"
|
||||
onpointermove={onmove}
|
||||
onclick={() => hover && onselect?.(hover.d)}
|
||||
onpointerleave={() => {
|
||||
hover = null;
|
||||
onhover?.(null);
|
||||
}}
|
||||
onpointerleave={() => onhover?.(null)}
|
||||
/>
|
||||
</svg>
|
||||
{#if hover}
|
||||
|
||||
@@ -1,23 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { mapState } from '$lib/map-state.svelte';
|
||||
|
||||
let { height = '440px' }: { height?: string } = $props();
|
||||
let el: HTMLDivElement;
|
||||
|
||||
// move the persistent map into this page's slot; return it on leave
|
||||
// Marker component: pages render this to request the persistent map,
|
||||
// which the layout shows in its fixed spot below the topbar - the same
|
||||
// position on every page, so navigation never moves it.
|
||||
$effect(() => {
|
||||
if (mapState.carrier && el) {
|
||||
mapState.attach(el);
|
||||
return () => mapState.detach();
|
||||
}
|
||||
mapState.setWanted(true);
|
||||
return () => mapState.setWanted(false);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="map-slot" bind:this={el} style:height></div>
|
||||
|
||||
<style>
|
||||
.map-slot {
|
||||
width: 100%;
|
||||
border-radius: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,10 +3,13 @@
|
||||
|
||||
let {
|
||||
timed,
|
||||
hoverD = null,
|
||||
onhover,
|
||||
onselect
|
||||
}: {
|
||||
timed: { d: number; t: number }[];
|
||||
/** shared hover distance controlled by the page, so charts stay in sync */
|
||||
hoverD?: number | null;
|
||||
onhover?: (d: number | null) => void;
|
||||
onselect?: (d: number) => void;
|
||||
} = $props();
|
||||
@@ -82,21 +85,23 @@
|
||||
: ''
|
||||
);
|
||||
|
||||
let hover = $state<{ d: number; v: number } | null>(null);
|
||||
|
||||
function onmove(event: PointerEvent) {
|
||||
const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
|
||||
const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
|
||||
const target = frac * totalDist;
|
||||
// snap the shared hover distance to this chart's nearest point
|
||||
const hover = $derived.by(() => {
|
||||
if (hoverD === null || series.length === 0) return null;
|
||||
let lo = 0;
|
||||
let hi = series.length - 1;
|
||||
while (hi - lo > 1) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (series[mid].d < target) lo = mid;
|
||||
if (series[mid].d < hoverD) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
hover = target - series[lo].d < series[hi].d - target ? series[lo] : series[hi];
|
||||
onhover?.(hover.d);
|
||||
return hoverD - series[lo].d < series[hi].d - hoverD ? series[lo] : series[hi];
|
||||
});
|
||||
|
||||
function onmove(event: PointerEvent) {
|
||||
const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
|
||||
const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
|
||||
onhover?.(frac * totalDist);
|
||||
}
|
||||
|
||||
const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
|
||||
@@ -144,10 +149,7 @@
|
||||
fill="transparent"
|
||||
onpointermove={onmove}
|
||||
onclick={() => hover && onselect?.(hover.d)}
|
||||
onpointerleave={() => {
|
||||
hover = null;
|
||||
onhover?.(null);
|
||||
}}
|
||||
onpointerleave={() => onhover?.(null)}
|
||||
/>
|
||||
</svg>
|
||||
{#if hover}
|
||||
|
||||
@@ -13,6 +13,7 @@ let detailTrack = $state<MapTrack | null>(null);
|
||||
let hoverPoint = $state<{ lat: number; lon: number } | null>(null);
|
||||
let carrier = $state<HTMLElement | null>(null);
|
||||
let active = $state(false);
|
||||
let wanted = $state(false);
|
||||
|
||||
let home: HTMLElement | null = null;
|
||||
let peakClickHandler: ((id: number) => void) | null = null;
|
||||
@@ -42,6 +43,12 @@ export const mapState = {
|
||||
get active() {
|
||||
return active;
|
||||
},
|
||||
get wanted() {
|
||||
return wanted;
|
||||
},
|
||||
setWanted(value: boolean) {
|
||||
wanted = value;
|
||||
},
|
||||
|
||||
setPeaks(value: MapPeak[]) {
|
||||
peaks = value;
|
||||
|
||||
@@ -9,11 +9,20 @@
|
||||
|
||||
let mapHome: HTMLDivElement;
|
||||
let mapCarrier: HTMLDivElement;
|
||||
let layoutSlot: HTMLDivElement;
|
||||
|
||||
$effect(() => {
|
||||
if (mapCarrier && mapHome) mapState.registerCarrier(mapCarrier, mapHome);
|
||||
});
|
||||
|
||||
// show the persistent map in its fixed spot whenever the page asks for it
|
||||
$effect(() => {
|
||||
if (mapState.wanted && layoutSlot && mapState.carrier) {
|
||||
mapState.attach(layoutSlot);
|
||||
return () => mapState.detach();
|
||||
}
|
||||
});
|
||||
|
||||
let mapComponent: Map | undefined = $state();
|
||||
$effect(() => {
|
||||
if (mapComponent) {
|
||||
@@ -136,6 +145,11 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div
|
||||
class="layout-map-slot"
|
||||
bind:this={layoutSlot}
|
||||
style:display={mapState.wanted ? 'block' : 'none'}
|
||||
></div>
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
@@ -378,4 +392,8 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.layout-map-slot {
|
||||
height: min(440px, 52vh);
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,8 +30,7 @@
|
||||
<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
|
||||
</div>
|
||||
|
||||
<h2>Worldmap</h2>
|
||||
<MapSlot height="440px" />
|
||||
<MapSlot />
|
||||
|
||||
<h2>Recent activities</h2>
|
||||
{#if data.activities.length === 0}
|
||||
|
||||
@@ -1,282 +1,328 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import MapSlot from '$lib/components/MapSlot.svelte';
|
||||
import ElevationChart from '$lib/components/ElevationChart.svelte';
|
||||
import SpeedChart from '$lib/components/SpeedChart.svelte';
|
||||
import StatTile from '$lib/components/StatTile.svelte';
|
||||
import { mapState } from '$lib/map-state.svelte';
|
||||
import { fmtDate, fmtDistance, fmtDuration, fmtElevation, fmtSpeed } from '$lib/format';
|
||||
import { enhance } from "$app/forms";
|
||||
import MapSlot from "$lib/components/MapSlot.svelte";
|
||||
import ElevationChart from "$lib/components/ElevationChart.svelte";
|
||||
import SpeedChart from "$lib/components/SpeedChart.svelte";
|
||||
import StatTile from "$lib/components/StatTile.svelte";
|
||||
import { mapState } from "$lib/map-state.svelte";
|
||||
import {
|
||||
fmtDate,
|
||||
fmtDistance,
|
||||
fmtDuration,
|
||||
fmtElevation,
|
||||
fmtSpeed,
|
||||
} from "$lib/format";
|
||||
|
||||
let { data, form } = $props();
|
||||
const a = $derived(data.activity);
|
||||
let { data, form } = $props();
|
||||
const a = $derived(data.activity);
|
||||
|
||||
const avgSpeed = $derived(
|
||||
a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null
|
||||
);
|
||||
const avgSpeed = $derived(
|
||||
a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null,
|
||||
);
|
||||
|
||||
let editing = $state(false);
|
||||
let saving = $state(false);
|
||||
let editing = $state(false);
|
||||
let saving = $state(false);
|
||||
|
||||
// chart hover -> marker on the map at the matching track position
|
||||
function pointAt(d: number): [number, number] {
|
||||
const trackD = data.trackD;
|
||||
let lo = 0;
|
||||
let hi = trackD.length - 1;
|
||||
while (hi - lo > 1) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (trackD[mid] < d) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
return data.latlngs[d - trackD[lo] < trackD[hi] - d ? lo : hi];
|
||||
}
|
||||
// chart hover -> marker on the map at the matching track position
|
||||
function pointAt(d: number): [number, number] {
|
||||
const trackD = data.trackD;
|
||||
let lo = 0;
|
||||
let hi = trackD.length - 1;
|
||||
while (hi - lo > 1) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (trackD[mid] < d) lo = mid;
|
||||
else hi = mid;
|
||||
}
|
||||
return data.latlngs[d - trackD[lo] < trackD[hi] - d ? lo : hi];
|
||||
}
|
||||
|
||||
function chartHover(d: number | null) {
|
||||
if (d === null) {
|
||||
mapState.setHoverPoint(null);
|
||||
return;
|
||||
}
|
||||
const [lat, lon] = pointAt(d);
|
||||
mapState.setHoverPoint({ lat, lon });
|
||||
}
|
||||
let hoverD = $state<number | null>(null);
|
||||
|
||||
// chart click -> fly the map to that spot
|
||||
function chartSelect(d: number) {
|
||||
const [lat, lon] = pointAt(d);
|
||||
mapState.flyTo(lat, lon, 14.5);
|
||||
}
|
||||
function chartHover(d: number | null) {
|
||||
hoverD = d;
|
||||
if (d === null) {
|
||||
mapState.setHoverPoint(null);
|
||||
return;
|
||||
}
|
||||
const [lat, lon] = pointAt(d);
|
||||
mapState.setHoverPoint({ lat, lon });
|
||||
}
|
||||
|
||||
// the persistent map keeps the overview visible, dims the rest,
|
||||
// and animates toward this activity
|
||||
$effect(() => {
|
||||
mapState.setDetailTrack({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
username: a.username,
|
||||
type: a.type,
|
||||
date: a.date,
|
||||
distance_m: a.distance_m,
|
||||
latlngs: data.latlngs
|
||||
});
|
||||
mapState.setHighlight(a.id);
|
||||
mapState.setPeaks(data.bagged);
|
||||
mapState.setFocus(JSON.parse(a.bounds));
|
||||
return () => mapState.reset();
|
||||
});
|
||||
// chart click -> fly the map to that spot
|
||||
function chartSelect(d: number) {
|
||||
const [lat, lon] = pointAt(d);
|
||||
mapState.flyTo(lat, lon);
|
||||
}
|
||||
|
||||
// the persistent map keeps the overview visible, dims the rest,
|
||||
// and animates toward this activity
|
||||
$effect(() => {
|
||||
mapState.setDetailTrack({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
username: a.username,
|
||||
type: a.type,
|
||||
date: a.date,
|
||||
distance_m: a.distance_m,
|
||||
latlngs: data.latlngs,
|
||||
});
|
||||
mapState.setHighlight(a.id);
|
||||
mapState.setPeaks(data.bagged);
|
||||
mapState.setFocus(JSON.parse(a.bounds));
|
||||
return () => mapState.reset();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{a.name} · Streba</title>
|
||||
<title>{a.name} · Streba</title>
|
||||
</svelte:head>
|
||||
|
||||
<a class="back" href="/">← Overview</a>
|
||||
|
||||
<div class="head">
|
||||
{#if editing}
|
||||
<form
|
||||
class="edit-form"
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
saving = true;
|
||||
return async ({ update, result }) => {
|
||||
saving = false;
|
||||
if (result.type === 'success') editing = false;
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input class="edit-name" name="name" required maxlength="120" value={a.name} aria-label="Activity name" />
|
||||
<input
|
||||
class="edit-type"
|
||||
name="type"
|
||||
required
|
||||
maxlength="40"
|
||||
value={a.type}
|
||||
list="activity-types"
|
||||
aria-label="Activity type"
|
||||
/>
|
||||
<datalist id="activity-types">
|
||||
{#each ['hike', 'run', 'ride', 'ski', 'climbing', 'walk', 'snowshoe'] as t (t)}
|
||||
<option value={t}></option>
|
||||
{/each}
|
||||
</datalist>
|
||||
<button class="btn" type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
|
||||
<button class="btn ghost" type="button" onclick={() => (editing = false)}>Cancel</button>
|
||||
{#if form?.error}<span class="edit-error">{form.error}</span>{/if}
|
||||
</form>
|
||||
{:else}
|
||||
<div>
|
||||
<h1>
|
||||
{a.name}
|
||||
{#if data.canDelete}
|
||||
<button class="edit-btn" title="Edit name and type" aria-label="Edit name and type" onclick={() => (editing = true)}>
|
||||
✎
|
||||
</button>
|
||||
{/if}
|
||||
</h1>
|
||||
<p class="page-sub">
|
||||
<a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(a.date)} ·
|
||||
<span class="type">{a.type}</span>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.canDelete && !editing}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/delete"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm('Delete this activity? Peaks it reached stay in your list.')) cancel();
|
||||
}}
|
||||
>
|
||||
<button class="btn danger" type="submit">Delete</button>
|
||||
</form>
|
||||
{/if}
|
||||
{#if editing}
|
||||
<form
|
||||
class="edit-form"
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
saving = true;
|
||||
return async ({ update, result }) => {
|
||||
saving = false;
|
||||
if (result.type === "success") editing = false;
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input
|
||||
class="edit-name"
|
||||
name="name"
|
||||
required
|
||||
maxlength="120"
|
||||
value={a.name}
|
||||
aria-label="Activity name"
|
||||
/>
|
||||
<input
|
||||
class="edit-type"
|
||||
name="type"
|
||||
required
|
||||
maxlength="40"
|
||||
value={a.type}
|
||||
list="activity-types"
|
||||
aria-label="Activity type"
|
||||
/>
|
||||
<datalist id="activity-types">
|
||||
{#each ["hike", "run", "ride", "ski", "climbing", "walk", "snowshoe"] as t (t)}
|
||||
<option value={t}></option>
|
||||
{/each}
|
||||
</datalist>
|
||||
<button class="btn" type="submit" disabled={saving}
|
||||
>{saving ? "Saving…" : "Save"}</button
|
||||
>
|
||||
<button class="btn ghost" type="button" onclick={() => (editing = false)}
|
||||
>Cancel</button
|
||||
>
|
||||
{#if form?.error}<span class="edit-error">{form.error}</span>{/if}
|
||||
</form>
|
||||
{:else}
|
||||
<div>
|
||||
<h1>
|
||||
{a.name}
|
||||
{#if data.canDelete}
|
||||
<button
|
||||
class="edit-btn"
|
||||
title="Edit name and type"
|
||||
aria-label="Edit name and type"
|
||||
onclick={() => (editing = true)}
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
{/if}
|
||||
</h1>
|
||||
<p class="page-sub">
|
||||
<a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(
|
||||
a.date,
|
||||
)} ·
|
||||
<span class="type">{a.type}</span>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.canDelete && !editing}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/delete"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (
|
||||
!confirm("Delete this activity? Peaks it reached stay in your list.")
|
||||
)
|
||||
cancel();
|
||||
}}
|
||||
>
|
||||
<button class="btn danger" type="submit">Delete</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="kpis">
|
||||
<StatTile label="Distance" value={fmtDistance(a.distance_m)} />
|
||||
<StatTile label="Ascent" value={fmtElevation(a.elev_gain_m)} detail="↓ {fmtElevation(a.elev_loss_m)}" />
|
||||
<StatTile
|
||||
label="Moving time"
|
||||
value={fmtDuration(a.moving_s ?? a.duration_s)}
|
||||
detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ''}
|
||||
/>
|
||||
{#if avgSpeed}
|
||||
<StatTile label="Avg moving speed" value={avgSpeed} />
|
||||
{:else}
|
||||
<StatTile label="Highest point" value={fmtElevation(a.elev_max_m)} />
|
||||
{/if}
|
||||
<StatTile label="Distance" value={fmtDistance(a.distance_m)} />
|
||||
<StatTile
|
||||
label="Ascent"
|
||||
value={fmtElevation(a.elev_gain_m)}
|
||||
detail="↓ {fmtElevation(a.elev_loss_m)}"
|
||||
/>
|
||||
<StatTile
|
||||
label="Moving time"
|
||||
value={fmtDuration(a.moving_s ?? a.duration_s)}
|
||||
detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ""}
|
||||
/>
|
||||
{#if avgSpeed}
|
||||
<StatTile label="Avg moving speed" value={avgSpeed} />
|
||||
{:else}
|
||||
<StatTile label="Highest point" value={fmtElevation(a.elev_max_m)} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if data.bagged.length > 0}
|
||||
<div class="card bagged">
|
||||
⛰ Peaks reached:
|
||||
{#each data.bagged as peak, i (peak.id)}{i > 0 ? ', ' : ' '}<strong>{peak.name}</strong> ({peak.elevation_m} m){/each}
|
||||
</div>
|
||||
<div class="card bagged">
|
||||
⛰ Peaks reached:
|
||||
{#each data.bagged as peak, i (peak.id)}{i > 0 ? ", " : " "}<strong
|
||||
>{peak.name}</strong
|
||||
>
|
||||
({peak.elevation_m} m){/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h2>Map</h2>
|
||||
<MapSlot height="440px" />
|
||||
<MapSlot />
|
||||
|
||||
{#if data.profile.length > 1}
|
||||
<h2>Elevation profile</h2>
|
||||
<div class="card chart">
|
||||
<ElevationChart profile={data.profile} onhover={chartHover} onselect={chartSelect} />
|
||||
<div class="chart-meta">
|
||||
<span>Low {fmtElevation(a.elev_min_m)}</span>
|
||||
<span>High {fmtElevation(a.elev_max_m)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Elevation profile</h2>
|
||||
<div class="card chart">
|
||||
<ElevationChart
|
||||
profile={data.profile}
|
||||
{hoverD}
|
||||
onhover={chartHover}
|
||||
onselect={chartSelect}
|
||||
/>
|
||||
<div class="chart-meta">
|
||||
<span>Low {fmtElevation(a.elev_min_m)}</span>
|
||||
<span>High {fmtElevation(a.elev_max_m)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if data.timed.length > 2}
|
||||
<h2>Speed</h2>
|
||||
<div class="card chart">
|
||||
<SpeedChart timed={data.timed} onhover={chartHover} onselect={chartSelect} />
|
||||
</div>
|
||||
<h2>Speed</h2>
|
||||
<div class="card chart">
|
||||
<SpeedChart
|
||||
timed={data.timed}
|
||||
{hoverD}
|
||||
onhover={chartHover}
|
||||
onselect={chartSelect}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.back {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.6rem;
|
||||
margin-left: -0.6rem;
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
.back:hover {
|
||||
background: var(--wash);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
.edit-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.edit-btn:hover {
|
||||
background: var(--wash);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.edit-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.edit-form input {
|
||||
padding: 0.5rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--surface-1);
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
}
|
||||
.edit-name {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.edit-type {
|
||||
width: 120px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.edit-form input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.edit-error {
|
||||
color: var(--critical);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.type {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.who {
|
||||
font-weight: 600;
|
||||
color: var(--accent-strong);
|
||||
text-decoration: none;
|
||||
}
|
||||
.who:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.bagged {
|
||||
margin-top: 1rem;
|
||||
padding: 0.85rem 1.15rem;
|
||||
border-left: 3px solid var(--good);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.bagged strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.chart {
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
.chart-meta {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
padding: 0.5rem 0.25rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.back {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.6rem;
|
||||
margin-left: -0.6rem;
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
.back:hover {
|
||||
background: var(--wash);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
.edit-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.edit-btn:hover {
|
||||
background: var(--wash);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.edit-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.edit-form input {
|
||||
padding: 0.5rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--surface-1);
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
}
|
||||
.edit-name {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.edit-type {
|
||||
width: 120px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.edit-form input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.edit-error {
|
||||
color: var(--critical);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.type {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.who {
|
||||
font-weight: 600;
|
||||
color: var(--accent-strong);
|
||||
text-decoration: none;
|
||||
}
|
||||
.who:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.bagged {
|
||||
margin-top: 1rem;
|
||||
padding: 0.85rem 1.15rem;
|
||||
border-left: 3px solid var(--good);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.bagged strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.chart {
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
.chart-meta {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
padding: 0.5rem 0.25rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -158,7 +158,7 @@
|
||||
Zoom in to reveal less prominent summits; click a peak to cross it off.
|
||||
</p>
|
||||
|
||||
<MapSlot height="480px" />
|
||||
<MapSlot />
|
||||
|
||||
<div class="search">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user