Theme-Toggle als Schalter + Karten-Vollbild + Zoom-Begrenzung

- Theme-Toggle: Button durch Sun/Moon-Slider ersetzt (Dark Mode Standard)
- Karte: Fullscreen-Overlay mit Expand-Icon, Escape zum Schließen
- Karte: Zoom-Limits (minZoom:2, maxBounds, noWrap)
- Karte: Button 'Orte erkennen' -> 'Orte einlesen', rechts ausgerichtet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
claude-dev
2026-03-08 13:18:04 +01:00
Ursprung 7734eefd35
Commit bcad3e9f3c
4 geänderte Dateien mit 234 neuen und 13 gelöschten Zeilen

Datei anzeigen

@@ -28,7 +28,13 @@
<h1 class="sr-only">AegisSight Monitor Dashboard</h1>
</div>
<div class="header-right">
<button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
<div class="theme-switch" id="theme-toggle" onclick="ThemeManager.toggle()" role="switch" aria-checked="true" aria-label="Dark Mode" title="Theme wechseln">
<span class="theme-switch-icon theme-switch-sun">☀︎</span>
<div class="theme-switch-track">
<div class="theme-switch-knob"></div>
</div>
<span class="theme-switch-icon theme-switch-moon"></span>
</div>
<div class="header-user-info">
<button class="header-user-btn" id="header-user-btn" aria-expanded="false" aria-haspopup="true">
<span class="header-user" id="header-user"></span>
@@ -275,7 +281,12 @@
<div class="card-header">
<div class="card-title">Geografische Verteilung</div>
<span class="map-stats" id="map-stats"></span>
<button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln erkennen">Orte erkennen</button>
<div class="card-header-actions">
<button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln einlesen">Orte einlesen</button>
<button class="btn btn-secondary btn-small map-expand-btn" id="map-expand-btn" onclick="UI.toggleMapFullscreen()" title="Vollbild" aria-label="Karte im Vollbild anzeigen">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
</button>
</div>
</div>
<div class="map-container" id="map-container">
<div class="map-empty" id="map-empty">Keine Orte erkannt</div>
@@ -576,5 +587,17 @@
<script src="/static/js/components.js?v=20260304h"></script>
<script src="/static/js/layout.js?v=20260304h"></script>
<script src="/static/js/app.js?v=20260304h"></script>
<!-- Map Fullscreen Overlay -->
<div class="map-fullscreen-overlay" id="map-fullscreen-overlay">
<div class="map-fullscreen-header">
<div class="map-fullscreen-title">Geografische Verteilung</div>
<span class="map-stats map-fullscreen-stats" id="map-fullscreen-stats"></span>
<button class="btn btn-secondary btn-small" onclick="UI.toggleMapFullscreen()" title="Vollbild beenden" aria-label="Vollbild beenden">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
</button>
</div>
<div class="map-fullscreen-container" id="map-fullscreen-container"></div>
</div>
</body>
</html>