Klima: Glossar-Links via DB-Alias-Map + Graph-Overlay iPad-Höhe
- KLIMA_TO_DB_KEY mappt Klima-Slugs auf DB-key_slug (windpark→windenergie, solaranlage→photovoltaik, erneuerbar→erneuerbare-energie, kohlekraftwerk→fossile-brennstoffe) - GLOSSAR_DB_KNOWN-Set für alle bekannten DB-Slugs - resolveGlossarDbKey: liefert den DB-Key oder null; tote Links werden ausgeblendet statt ins Leere zu führen - ggs-graph-zoom-card iPad: 78dvh statt max-height 400 px, damit SVG + Header reinpassen + safe-area-padding-bottom
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
---
|
||||
von: klima
|
||||
an: logistik
|
||||
datum: 2026-05-02 17:30
|
||||
status: neu
|
||||
betrifft: Glossar-Tote-Links + Graph-Overlay-Höhe gefixt — kann nochmal deployen
|
||||
---
|
||||
|
||||
# Zwei Nachschlag-Fixes
|
||||
|
||||
Hi Logistik,
|
||||
|
||||
Thomas hat zwei weitere Sachen gemeldet beim iPad-Test, sind beide
|
||||
gefixt:
|
||||
|
||||
## 1. Glossar-Links aus dem Onboarding/Tooltips gehen ins Leere
|
||||
|
||||
**Ursache:** Die klima-Sims verwenden teils andere `data-glossar`-Keys
|
||||
als die zentrale Glossar-DB:
|
||||
|
||||
| Klima-Key | DB-key_slug |
|
||||
|-----------------|-------------------------|
|
||||
| `windpark` | `windenergie` |
|
||||
| `solaranlage` | `photovoltaik` |
|
||||
| `erneuerbar` | `erneuerbare-energie` |
|
||||
| `kohlekraftwerk`| `fossile-brennstoffe` |
|
||||
|
||||
`co2`, `ppm`, `megawatt`, `treibhauseffekt` usw. matchen schon vorher.
|
||||
Andere Klima-Begriffe (z. B. `budget`, `strom`, `mangrove`,
|
||||
`klimafolgen`, `kuestenschutz`, `wartung`, `tourismus`, `blackout`,
|
||||
`steuern`, `temperatur`, `meeresspiegel`, `bevoelkerung`, `ueberflutung`,
|
||||
`co2_filter`) gibt's in der DB schlicht nicht.
|
||||
|
||||
**Fix in 2D + 3D:**
|
||||
- `KLIMA_TO_DB_KEY`-Mapping eingebaut (4 Aliasse oben).
|
||||
- `GLOSSAR_DB_KNOWN`-Set mit allen real existierenden DB-key_slugs.
|
||||
- `resolveGlossarDbKey(key)`: liefert den DB-Key, sonst `null`.
|
||||
- Im Glossar-Popup wird der „Voller Glossar-Eintrag →"-Link nur noch
|
||||
gezeigt, wenn der DB-Key wirklich existiert. Ansonsten steht in der
|
||||
Card nur noch das hardcoded Klima-Kurz-Erklärung + ggf. Wikipedia-Link.
|
||||
|
||||
Damit gehen die Links jetzt entweder ins richtige DB-Detail (z. B.
|
||||
`windpark` → `?term=windenergie`), oder sie sind gar nicht mehr da
|
||||
statt tot zu wirken.
|
||||
|
||||
**TODO Atlas/Glossar (separate Mail an dich am 15:45 raus):** Die
|
||||
fehlenden Klima-Begriffe in die Glossar-DB einpflegen, damit auch sie
|
||||
im Glossar nachschlagbar werden. Bis dahin reicht die jetzige Lösung.
|
||||
|
||||
## 2. Graph-Overlay am iPad zu niedrig
|
||||
|
||||
`design-system.css` deckelt `.ggs-graph-zoom-card` mit
|
||||
`max-height: 400px`. Auf iPad-Landscape ist das eng — Header + SVG
|
||||
laufen unten raus.
|
||||
|
||||
**Fix klima-lokal:**
|
||||
```css
|
||||
@media (pointer: coarse) {
|
||||
.ggs-graph-zoom-card {
|
||||
height: 78dvh !important;
|
||||
max-height: 92dvh !important;
|
||||
width: 92vw !important;
|
||||
max-width: 92vw !important;
|
||||
padding-bottom: max(var(--ggs-gap-lg), env(safe-area-inset-bottom)) !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Atlas-Komponente bleibt unangetastet.
|
||||
|
||||
## Wann fertig?
|
||||
|
||||
Jetzt — kannst nochmal deployen.
|
||||
|
||||
— Klima
|
||||
|
||||
## Bestätigen
|
||||
|
||||
- status: gelesen
|
||||
- nach Deploy keine Rückmeldung nötig
|
||||
@@ -574,6 +574,17 @@
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-badges,
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-demolish { display: revert !important; }
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-count { position: static; }
|
||||
|
||||
/* Graph-Zoom-Overlay: design-system kappt auf max-height: 400 px, was am
|
||||
iPad-Landscape (~820 px hoch) den Inhalt unten abschneidet. Lokal
|
||||
größer machen, damit SVG + Header sicher reinpassen. */
|
||||
.ggs-graph-zoom-card {
|
||||
height: 78dvh !important;
|
||||
max-height: 92dvh !important;
|
||||
width: 92vw !important;
|
||||
max-width: 92vw !important;
|
||||
padding-bottom: max(var(--ggs-gap-lg), env(safe-area-inset-bottom)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kw-build-slidein {
|
||||
@@ -4109,6 +4120,32 @@ function resolveGlossarEntry(key) {
|
||||
return GLOSSAR_API_CACHE[key] || GLOSSAR[key] || null;
|
||||
}
|
||||
|
||||
/* Klima-Sim verwendet teils andere data-glossar-Keys als die zentrale
|
||||
Glossar-DB. Damit der „Voller Glossar-Eintrag →"-Link nicht ins
|
||||
Leere führt, hier die Übersetzung Klima-Key → DB-key_slug. Keys ohne
|
||||
Eintrag im KLIMA_TO_DB-Mapping UND ohne Treffer in der API-Cache
|
||||
bekommen keinen Glossar-Link mehr (statt einer toten URL). */
|
||||
const KLIMA_TO_DB_KEY = {
|
||||
windpark: 'windenergie',
|
||||
solaranlage: 'photovoltaik',
|
||||
erneuerbar: 'erneuerbare-energie',
|
||||
kohlekraftwerk: 'fossile-brennstoffe',
|
||||
};
|
||||
const GLOSSAR_DB_KNOWN = new Set([
|
||||
'albedo','biodiversitaet','co2','co2-aequivalent','co2-fussabdruck',
|
||||
'emissionen','energiemix','erneuerbare-energie','fossile-brennstoffe',
|
||||
'fotosynthese','kilowatt','kilowattstunde','kipppunkt','klimaneutralitaet',
|
||||
'klimawandel','kohlenstoffkreislauf','megawatt','methan','nachhaltigkeit',
|
||||
'pariser-abkommen','permafrost','photovoltaik','ppm','treibhauseffekt',
|
||||
'treibhausgas','wasserkraft','watt','windenergie',
|
||||
]);
|
||||
function resolveGlossarDbKey(key) {
|
||||
const aliased = KLIMA_TO_DB_KEY[key] || key;
|
||||
if (GLOSSAR_DB_KNOWN.has(aliased)) return aliased;
|
||||
if (GLOSSAR_API_CACHE[aliased]) return aliased; // dynamisch nachgeladen
|
||||
return null;
|
||||
}
|
||||
|
||||
let _glossarPopup = null;
|
||||
document.addEventListener('click', (e) => {
|
||||
if (_glossarPopup && !_glossarPopup.contains(e.target)) {
|
||||
@@ -4130,10 +4167,14 @@ document.addEventListener('click', (e) => {
|
||||
let html = '<div class="ggs-glossar-title">'+entry.title+'</div>';
|
||||
html += '<div class="ggs-glossar-text">'+entry.text+'</div>';
|
||||
if (entry.unit) html += '<div class="ggs-glossar-unit">'+entry.unit+'</div>';
|
||||
// Voller Eintrag im Glossar — öffnet in neuem Tab
|
||||
html += '<br><a href="'+GLOSSAR_PAGE+'?term='+encodeURIComponent(key)+'" target="_blank" rel="noopener" class="ggs-glossar-link">Voller Glossar-Eintrag →</a>';
|
||||
// Voller Eintrag im Glossar — nur verlinken, wenn der Begriff in der
|
||||
// zentralen Glossar-DB existiert (Alias-Mapping inklusive).
|
||||
const dbKey = resolveGlossarDbKey(key);
|
||||
if (dbKey) {
|
||||
html += '<br><a href="'+GLOSSAR_PAGE+'?term='+encodeURIComponent(dbKey)+'" target="_blank" rel="noopener" class="ggs-glossar-link">Voller Glossar-Eintrag →</a>';
|
||||
}
|
||||
if (entry.link && !entry.fromApi) {
|
||||
html += ' <a href="'+entry.link+'" target="_blank" rel="noopener" class="ggs-glossar-link" style="margin-left:8px">Wikipedia →</a>';
|
||||
html += (dbKey ? ' ' : '<br>') + '<a href="'+entry.link+'" target="_blank" rel="noopener" class="ggs-glossar-link"' + (dbKey ? ' style="margin-left:8px"' : '') + '>Wikipedia →</a>';
|
||||
}
|
||||
popup.innerHTML = html;
|
||||
document.body.appendChild(popup);
|
||||
|
||||
@@ -702,6 +702,17 @@
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-badges,
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-demolish { display: revert !important; }
|
||||
.ggs-zone-actions.kw-build-expanded .ggs-card .ggs-card-count { position: static; }
|
||||
|
||||
/* Graph-Zoom-Overlay: design-system kappt auf max-height: 400 px, was am
|
||||
iPad-Landscape (~820 px hoch) den Inhalt unten abschneidet. Lokal
|
||||
größer machen, damit SVG + Header sicher reinpassen. */
|
||||
.ggs-graph-zoom-card {
|
||||
height: 78dvh !important;
|
||||
max-height: 92dvh !important;
|
||||
width: 92vw !important;
|
||||
max-width: 92vw !important;
|
||||
padding-bottom: max(var(--ggs-gap-lg), env(safe-area-inset-bottom)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kw-build-slidein {
|
||||
@@ -5622,6 +5633,30 @@ function resolveGlossarEntry(key) {
|
||||
return GLOSSAR_API_CACHE[key] || GLOSSAR[key] || null;
|
||||
}
|
||||
|
||||
/* Klima-Sim verwendet teils andere data-glossar-Keys als die zentrale
|
||||
Glossar-DB. Damit der „Voller Glossar-Eintrag →"-Link nicht ins
|
||||
Leere führt, hier die Übersetzung Klima-Key → DB-key_slug. */
|
||||
const KLIMA_TO_DB_KEY = {
|
||||
windpark: 'windenergie',
|
||||
solaranlage: 'photovoltaik',
|
||||
erneuerbar: 'erneuerbare-energie',
|
||||
kohlekraftwerk: 'fossile-brennstoffe',
|
||||
};
|
||||
const GLOSSAR_DB_KNOWN = new Set([
|
||||
'albedo','biodiversitaet','co2','co2-aequivalent','co2-fussabdruck',
|
||||
'emissionen','energiemix','erneuerbare-energie','fossile-brennstoffe',
|
||||
'fotosynthese','kilowatt','kilowattstunde','kipppunkt','klimaneutralitaet',
|
||||
'klimawandel','kohlenstoffkreislauf','megawatt','methan','nachhaltigkeit',
|
||||
'pariser-abkommen','permafrost','photovoltaik','ppm','treibhauseffekt',
|
||||
'treibhausgas','wasserkraft','watt','windenergie',
|
||||
]);
|
||||
function resolveGlossarDbKey(key) {
|
||||
const aliased = KLIMA_TO_DB_KEY[key] || key;
|
||||
if (GLOSSAR_DB_KNOWN.has(aliased)) return aliased;
|
||||
if (GLOSSAR_API_CACHE[aliased]) return aliased;
|
||||
return null;
|
||||
}
|
||||
|
||||
let _glossarPopup = null;
|
||||
document.addEventListener('click', (e) => {
|
||||
if (_glossarPopup && !_glossarPopup.contains(e.target)) {
|
||||
@@ -5643,10 +5678,14 @@ document.addEventListener('click', (e) => {
|
||||
let html = '<div class="ggs-glossar-title">'+entry.title+'</div>';
|
||||
html += '<div class="ggs-glossar-text">'+entry.text+'</div>';
|
||||
if (entry.unit) html += '<div class="ggs-glossar-unit">'+entry.unit+'</div>';
|
||||
// Voller Eintrag im Glossar — öffnet in neuem Tab
|
||||
html += '<br><a href="'+GLOSSAR_PAGE+'?term='+encodeURIComponent(key)+'" target="_blank" rel="noopener" class="ggs-glossar-link">Voller Glossar-Eintrag →</a>';
|
||||
// Voller Eintrag im Glossar — nur verlinken, wenn der Begriff in der
|
||||
// zentralen Glossar-DB existiert (Alias-Mapping inklusive).
|
||||
const dbKey = resolveGlossarDbKey(key);
|
||||
if (dbKey) {
|
||||
html += '<br><a href="'+GLOSSAR_PAGE+'?term='+encodeURIComponent(dbKey)+'" target="_blank" rel="noopener" class="ggs-glossar-link">Voller Glossar-Eintrag →</a>';
|
||||
}
|
||||
if (entry.link && !entry.fromApi) {
|
||||
html += ' <a href="'+entry.link+'" target="_blank" rel="noopener" class="ggs-glossar-link" style="margin-left:8px">Wikipedia →</a>';
|
||||
html += (dbKey ? ' ' : '<br>') + '<a href="'+entry.link+'" target="_blank" rel="noopener" class="ggs-glossar-link"' + (dbKey ? ' style="margin-left:8px"' : '') + '>Wikipedia →</a>';
|
||||
}
|
||||
popup.innerHTML = html;
|
||||
document.body.appendChild(popup);
|
||||
|
||||
Reference in New Issue
Block a user