From 8d432e5ec9ab7de27746ee9de46c3669dfa8c20c Mon Sep 17 00:00:00 2001 From: Claude Code Date: Sat, 7 Mar 2026 15:08:39 +0100 Subject: [PATCH] Lagebild: Zitate verlinken auf Quell-URL, Quellenverzeichnis kompakter, Em-Dashes entfernt - Zitat-Refs zeigen Quellenname im Tooltip, oeffnen URL in neuem Tab - Quellenverzeichnis: kompaktes 2-Spalten-Layout, nur Name als Link - Alle Em-Dashes durch Bindestriche ersetzt - Stand im Hero zeigt jetzt auch Uhrzeit Co-Authored-By: Claude Opus 4.6 --- lagebild/lagebild.css | 39 ++++++++++++------------- lagebild/lagebild.js | 67 +++++++++++++++++++++---------------------- 2 files changed, 52 insertions(+), 54 deletions(-) diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css index d5904b6..fd153f6 100644 --- a/lagebild/lagebild.css +++ b/lagebild/lagebild.css @@ -563,29 +563,26 @@ padding: 0; margin: 0; counter-reset: src; + columns: 2; + column-gap: 24px; } .sources-list li { counter-increment: src; - padding: 10px 0; - border-bottom: 1px solid var(--lb-border); - font-size: 0.92rem; - display: flex; - align-items: baseline; - gap: 10px; + padding: 4px 0; + font-size: 0.88rem; color: var(--lb-text); + break-inside: avoid; } -.sources-list li:last-child { border-bottom: none; } .sources-list li::before { content: "[" counter(src) "]"; color: var(--lb-accent); font-weight: 700; - font-size: 0.85rem; - flex-shrink: 0; + font-size: 0.82rem; + margin-right: 6px; } .sources-list a { color: var(--lb-accent); text-decoration: none; - word-break: break-all; } .sources-list a:hover { text-decoration: underline; } .source-name { @@ -598,34 +595,31 @@ font-size: 1rem; font-weight: 700; color: var(--lb-text); - margin: 0 0 12px; + margin: 0 0 8px; } .inline-sources-list { list-style: none; padding: 0; margin: 0; + columns: 2; + column-gap: 24px; } .inline-sources-list li { - padding: 6px 0; - font-size: 0.85rem; + padding: 2px 0; + font-size: 0.82rem; color: var(--lb-text-sec); - display: flex; - gap: 8px; - align-items: baseline; + break-inside: avoid; } .inline-sources-list .src-nr { color: var(--lb-accent); font-weight: 700; - min-width: 24px; + margin-right: 4px; } .inline-sources-list a { color: var(--lb-accent); text-decoration: none; } .inline-sources-list a:hover { text-decoration: underline; } -.inline-sources-list strong { - color: var(--lb-text); -} /* ---------- Article Cards ---------- */ .article-card { @@ -1121,4 +1115,9 @@ .status-progression { gap: 4px; } + + .inline-sources-list, + .sources-list { + columns: 1; + } } diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js index 88cdf07..84ba477 100644 --- a/lagebild/lagebild.js +++ b/lagebild/lagebild.js @@ -3,7 +3,7 @@ * Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons */ -/** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */ +/** Feste Zeitzone fuer alle Anzeigen - NIEMALS aendern. */ var TIMEZONE = 'Europe/Berlin'; var Lagebild = { @@ -40,7 +40,6 @@ var Lagebild = { this.render(); this.initTabs(); this.initLangToggle(); - this.initSmoothScroll(); this.initScrollReveal(); } catch (e) { console.error('Lagebild laden fehlgeschlagen:', e); @@ -60,7 +59,7 @@ var Lagebild = { var d = this.data; document.getElementById('incident-title').innerHTML = this.esc(this.fixUmlauts(d.incident.title)) + - ' — Stand: ' + this.fmtDateOnly(d.generated_at) + ''; + ' - Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr'; // Stat Cards (3: Artikel, Quellen, Faktenchecks) var statsHtml = ''; @@ -249,7 +248,7 @@ var Lagebild = { var d = new Date(dateKey + 'T12:00:00Z'); var dateLabel = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' }); - var h = '
' + dateLabel + ' — ' + snaps.length + ' Updates
'; + var h = '
' + dateLabel + ' - ' + snaps.length + ' Updates
'; h += '
'; for (var i = 0; i < snaps.length; i++) { var snap = snaps[i]; @@ -322,7 +321,22 @@ var Lagebild = { document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at); var md = this.fixUmlauts(v.summary || ''); var html = this.mdToHtml(md); - html = html.replace(/\[(\d+)\]/g, '[$1]'); + + // Build source lookup for citation links + var srcMap = {}; + var sources = v.sources_json || []; + for (var i = 0; i < sources.length; i++) { + srcMap[sources[i].nr] = sources[i]; + } + var self = this; + html = html.replace(/\[(\d+)\]/g, function(match, nr) { + var src = srcMap[nr]; + if (src && src.url) { + return '[' + nr + ']'; + } + return '[' + nr + ']'; + }); + document.getElementById('summary-content').innerHTML = html; }, @@ -333,10 +347,13 @@ var Lagebild = { h += '
    '; for (var i = 0; i < sources.length; i++) { var s = sources[i]; - h += '
  • [' + s.nr + ']'; - h += '' + this.esc(s.name || '') + ''; - if (s.url) h += ' — ' + this.esc(s.url) + ''; - h += '
    • '; + h += '
  • [' + s.nr + ']'; + if (s.url) { + h += '' + this.esc(s.name || '') + ''; + } else { + h += '' + this.esc(s.name || '') + ''; + } + h += '
    • '; } h += '
'; document.getElementById('inline-sources').innerHTML = h; @@ -353,9 +370,11 @@ var Lagebild = { h += '
    '; for (var i = 0; i < sources.length; i++) { var s = sources[i]; - h += '
  1. ' + this.esc(s.name || '') + ''; - if (s.url) h += ' — ' + this.esc(s.url) + ''; - h += '
    2. '; + if (s.url) { + h += '
  2. ' + this.esc(s.name || '') + '
    3. '; + } else { + h += '
  3. ' + this.esc(s.name || '') + '
    4. '; + } } h += '
'; } @@ -429,8 +448,8 @@ var Lagebild = { var locs = [ {n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschläge. Über 1.000 Tote nach fünf Tagen Krieg.',ic:redIcon}, {n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschläge auf Beirut und Teheran [6].',ic:redIcon}, - {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis — Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon}, - {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt — Ziel iranischer Gegenangriffe.',ic:orangeIcon}, + {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis - Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon}, + {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt - Ziel iranischer Gegenangriffe.',ic:orangeIcon}, {n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis für israelische Angriffe auf den Iran.',ic:blueIcon}, {n:'Ankara, Türkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf Türkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon}, {n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',ic:blueIcon}, @@ -572,26 +591,6 @@ var Lagebild = { }); }, - /* ===== SMOOTH SCROLL FOR CITATIONS ===== */ - initSmoothScroll: function() { - document.addEventListener('click', function(e) { - var link = e.target.closest('.citation-ref'); - if (!link) return; - e.preventDefault(); - var href = link.getAttribute('href'); - if (!href) return; - var targetId = href.substring(1); - var target = document.getElementById(targetId); - if (!target) return; - - target.scrollIntoView({ behavior: 'smooth', block: 'center' }); - target.classList.add('source-highlight'); - setTimeout(function() { - target.classList.remove('source-highlight'); - }, 1500); - }); - }, - /* ===== SCROLL REVEAL ===== */ initScrollReveal: function() { var cards = document.querySelectorAll('.content-card, .lagebild-cta');