Fix: Karte nicht sichtbar - Container-Hoehe in gridstack korrigiert
- map-card: position absolute + inset 0 (zuverlaessig in gridstack) - map-container: min-height 0 statt 200px (flex-Item braucht das) - map-empty: position absolute statt flex-basiert - invalidateSize mit mehreren Retries (100/300/800ms) - Bounds werden nach invalidateSize erneut gesetzt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -4145,9 +4145,11 @@ a:hover {
|
||||
|
||||
/* === Karten-Kachel (Leaflet) === */
|
||||
.map-card {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-card .card-header {
|
||||
flex-shrink: 0;
|
||||
@@ -4159,16 +4161,16 @@ a:hover {
|
||||
}
|
||||
.map-container {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.map-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
font-family: var(--font-body);
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=20260304e">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=20260304f">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||
@@ -560,10 +560,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||
<script src="/static/js/api.js?v=20260304e"></script>
|
||||
<script src="/static/js/ws.js?v=20260304e"></script>
|
||||
<script src="/static/js/components.js?v=20260304e"></script>
|
||||
<script src="/static/js/layout.js?v=20260304e"></script>
|
||||
<script src="/static/js/app.js?v=20260304e"></script>
|
||||
<script src="/static/js/api.js?v=20260304f"></script>
|
||||
<script src="/static/js/ws.js?v=20260304f"></script>
|
||||
<script src="/static/js/components.js?v=20260304f"></script>
|
||||
<script src="/static/js/layout.js?v=20260304f"></script>
|
||||
<script src="/static/js/app.js?v=20260304f"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -707,8 +707,19 @@ const UI = {
|
||||
}
|
||||
}
|
||||
|
||||
// Resize-Fix fuer gridstack
|
||||
setTimeout(() => { if (this._map) this._map.invalidateSize(); }, 200);
|
||||
// Resize-Fix fuer gridstack (mehrere Versuche, da Container-Hoehe erst spaeter steht)
|
||||
const self = this;
|
||||
[100, 300, 800].forEach(delay => {
|
||||
setTimeout(() => {
|
||||
if (!self._map) return;
|
||||
self._map.invalidateSize();
|
||||
if (bounds.length === 1) {
|
||||
self._map.setView(bounds[0], 8);
|
||||
} else if (bounds.length > 1) {
|
||||
self._map.fitBounds(bounds, { padding: [30, 30], maxZoom: 12 });
|
||||
}
|
||||
}, delay);
|
||||
});
|
||||
},
|
||||
|
||||
_applyMapTiles() {
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren