From e67022a3c19148a6eb1907d2e347b9b50709b6c9 Mon Sep 17 00:00:00 2001 From: Hermes AI Bot Date: Sat, 27 Jun 2026 09:39:00 +0000 Subject: [PATCH] Karten-Legende einklappbar machen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User-Report: Legende verdeckt die Karte unten rechts. Fix für beide Map-Files (tourenplan.html + tourenplan-mit-tram.html): - Default eingeklappt — nur Header sichtbar (~150x35px statt ~240x340px) - Klick auf Header togglet open/close, Pfeil rotiert - Body scrollbar bei max-height 280px (nicht mehr Viewport-überschreitend) - disableClickPropagation + disableScrollPropagation damit Klicks im Legenden-Panel nicht als Map-Klicks interpretiert werden (vorher: Klick auf Header öffnete versehentlich Hotel-Popup) - Font-size kompakter (12-13px statt 13-14px) - tourenplan.html behält Layer-Toggle (Action/Fun/Sight-Filter), tourenplan-mit-tram.html nicht (ÖPNV-Filter ist eigenes Panel) --- tourenplan-mit-tram.html | 71 ++++++++++++++++++---------------------- tourenplan.html | 56 +++++++++++++++++-------------- 2 files changed, 63 insertions(+), 64 deletions(-) diff --git a/tourenplan-mit-tram.html b/tourenplan-mit-tram.html index 2ad548c..7089060 100644 --- a/tourenplan-mit-tram.html +++ b/tourenplan-mit-tram.html @@ -124,11 +124,15 @@ .layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; } .layer-toggle label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; } .layer-toggle input { cursor: pointer; } - .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); } - .legend h4 { margin: 0 0 8px 0; font-size: 14px; } - .legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } - .legend .emoji { font-size: 18px; } - .legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; } + .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); } + .legend h4 { margin: 0; font-size: 13px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } + .legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; } + .legend.open h4 .toggle { transform: rotate(180deg); } + .legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; } + .legend.open .body { display: block; } + .legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; } + .legend .emoji { font-size: 14px; } + .legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; } .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; } .popup-content .emoji-big { font-size: 28px; margin-right: 8px; } .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; } @@ -916,43 +920,30 @@ const legend = L.control({ position: 'bottomright' }); legend.onAdd = function() { const div = L.DomUtil.create('div', 'legend'); div.innerHTML = ` -

🥳 JGA Prag Tourenplan

-
🏨 Hotel Uno (Basis)
-
🔐 Escape Room
-
🏎️ KartPlanet
-
⛳ Minigolf
-
🎳 Bowling
-
👻 Geister-Tour
-
🎯 Schießstand
-
⛵ Beer Boat
-
🎨 Paintball
-
🔫 Lasertag
-
🔍 Enigma
-
-
Filter
- - - - -
-
- 🚇 Metro: A · - B · - C
- 🚋 Tram: eine Linie zur Zeit wählen (Radio)
- Marker anklicken für Details +

📍 Legende▼

+
+
🏨 Hotel Uno
+
🔐 Escape Room
+
🏎️ KartPlanet
+
⛳ Minigolf
+
🎳 Bowling
+
👻 Geister-Tour
+
🎯 Schießstand
+
⛵ Beer Boat
+
🎨 Paintball
+
🔫 Lasertag
+
🔍 Enigma
+
+ 🚇 Metro: + A · + B · + C +   🚋 Tram: Radio +
`; - setTimeout(() => { - div.querySelectorAll('input[data-layer]').forEach(cb => { - cb.addEventListener('change', () => { - const layer = cb.dataset.layer; - (markersByCategory[layer] || []).forEach(m => { - if (cb.checked) m.addTo(map); else map.removeLayer(m); - }); - }); - }); - }, 10); + L.DomEvent.disableClickPropagation(div); + L.DomEvent.disableScrollPropagation(div); return div; }; legend.addTo(map); diff --git a/tourenplan.html b/tourenplan.html index c4f1d4d..e30c025 100644 --- a/tourenplan.html +++ b/tourenplan.html @@ -139,11 +139,15 @@ .layer-toggle input { cursor: pointer; } /* Legende */ -.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); } -.legend h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); } -.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--text); } -.legend .emoji { font-size: 18px; } -.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; } +.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); } +.legend h4 { margin: 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } +.legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; } +.legend.open h4 .toggle { transform: rotate(180deg); } +.legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; } +.legend.open .body { display: block; } +.legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--text); font-size: 12px; } +.legend .emoji { font-size: 14px; } +.legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; } .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; } .popup-content .emoji-big { font-size: 28px; margin-right: 8px; } .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; } @@ -553,27 +557,31 @@ const legend = L.control({ position: 'bottomright' }); legend.onAdd = function() { const div = L.DomUtil.create('div', 'legend'); div.innerHTML = ` -

🥳 JGA Prag Tourenplan

-
🏨 Hotel Uno (Basis)
-
🔐 Escape Room
-
🏎️ KartPlanet
-
⛳ Minigolf
-
🎳 Bowling
-
👻 Geister-Tour
-
🎯 Schießstand
-
⛵ Beer Boat
-
🎨 Paintball
-
🔫 Lasertag
-
🔍 Enigma
-
-
Filter
- - - - +

📍 Legende▼

+
+
🏨 Hotel Uno
+
🔐 Escape Room
+
🏎️ KartPlanet
+
⛳ Minigolf
+
🎳 Bowling
+
👻 Geister-Tour
+
🎯 Schießstand
+
⛵ Beer Boat
+
🎨 Paintball
+
🔫 Lasertag
+
🔍 Enigma
+
+
Filter
+ + + + +
+
📍 Karten-Zentrum: Hotel
-
📍 Karten-Zentrum: Hotel
`; + L.DomEvent.disableClickPropagation(div); + L.DomEvent.disableScrollPropagation(div); // Layer-Toggle Handler setTimeout(() => { div.querySelectorAll('input[data-layer]').forEach(cb => {