diff --git a/src/lib/components/blocks/WindkarteBlock.svelte b/src/lib/components/blocks/WindkarteBlock.svelte index 39c113e..bb74436 100644 --- a/src/lib/components/blocks/WindkarteBlock.svelte +++ b/src/lib/components/blocks/WindkarteBlock.svelte @@ -23,6 +23,7 @@ let areas = $state([]); let resetMap: (() => void) | null = null; let hiddenStatuses = $state([]); let hiddenRings = $state(["2km", "5km"]); + let mapActive = $state(false); function toggleStatus(status: string) { hiddenStatuses = hiddenStatuses.includes(status) @@ -131,6 +132,24 @@ let areas = $state([]); {/if} + + {#if !mapActive} + + {/if} +
([]); } } + /* Touch-only overlay — hidden on hover-capable devices (desktop/mouse) */ + .map-activate-overlay { + display: none; + } + @media (hover: none) { + .map-activate-overlay { + display: flex; + position: absolute; + inset: 0; + z-index: 490; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.25); + cursor: pointer; + border: none; + padding: 0; + } + } + .map-activate-label { + display: flex; + align-items: center; + gap: 0.5rem; + background: rgba(255, 255, 255, 0.92); + border-radius: 0.5rem; + box-shadow: 0 2px 8px rgba(0,0,0,0.18); + color: #333735; + font-size: 0.875rem; + font-weight: 500; + padding: 0.625rem 1rem; + pointer-events: none; + } + .dashed-line { display: inline-block; width: 18px; diff --git a/src/lib/translations.ts b/src/lib/translations.ts index 9497eac..cc40bb4 100644 --- a/src/lib/translations.ts +++ b/src/lib/translations.ts @@ -198,6 +198,7 @@ const TRANSLATION_KEYS = [ "post_action_reading_time", // Windkarte (WindkarteBlock / WindAreaPanel). "windkarte_loading", + "windkarte_tap_to_activate", "windkarte_panel_close", "windkarte_reset_aria", "windkarte_status_rechtskraeftig",