Lagebild: Stand-Karte entfernt (Datum in Titel), Control-Bar nicht mehr sticky, Timeline-Dropdown Grid-Layout

- Stand stat card entfernt, Datum als Span neben incident-title
- Hero-Stats Grid von 4 auf 3 Spalten, max-width 650px
- Control-Bar: position sticky/top/z-index entfernt
- Timeline-Dropdown: flex -> CSS grid (auto-fill minmax 210px)
- Responsive: Dropdown-Grid für Mobile angepasst (minmax 170px)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-07 14:54:59 +01:00
Ursprung 23b6a7036d
Commit 3429a3fd9e
2 geänderte Dateien mit 15 neuen und 11 gelöschten Zeilen

Datei anzeigen

@@ -145,14 +145,19 @@
color: rgba(255, 255, 255, 0.85);
margin: 0 0 0.5rem;
}
.hero-date-info {
font-size: 0.85em;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
}
/* Hero Stat Cards */
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 2rem;
max-width: 820px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
@@ -211,9 +216,6 @@
background: var(--lb-bg-card);
border-bottom: 1px solid var(--lb-border);
padding: 0 20px;
position: sticky;
top: 70px;
z-index: 50;
}
.control-bar .container {
max-width: 1000px;
@@ -338,9 +340,9 @@
font-weight: 500;
}
.timeline-snap-list {
display: flex;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 6px;
flex-wrap: wrap;
}
.timeline-snap-item {
display: inline-flex;
@@ -997,7 +999,7 @@
/* Tablet */
@media (max-width: 1024px) {
.hero-stats {
max-width: 600px;
max-width: 550px;
}
.stat-card {
padding: 12px 14px;
@@ -1057,6 +1059,7 @@
padding: 8px 10px;
}
.timeline-snap-list {
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 4px;
}
.timeline-snap-item {

Datei anzeigen

@@ -58,11 +58,12 @@ var Lagebild = {
/* ===== HERO ===== */
renderHero: function() {
var d = this.data;
document.getElementById('incident-title').textContent = this.fixUmlauts(d.incident.title);
document.getElementById('incident-title').innerHTML =
this.esc(this.fixUmlauts(d.incident.title)) +
' <span class="hero-date-info">&mdash; Stand: ' + this.fmtDateOnly(d.generated_at) + '</span>';
// Stat Cards
// Stat Cards (3: Artikel, Quellen, Faktenchecks)
var statsHtml = '';
statsHtml += this.statCard(this.icons.clock, this.fmtDateOnly(d.generated_at), 'Stand');
statsHtml += this.statCard(this.icons.fileText, '<span class="count-up" data-target="' + d.incident.article_count + '">0</span>', 'Artikel');
statsHtml += this.statCard(this.icons.globe, '<span class="count-up" data-target="' + d.incident.source_count + '">0</span>', 'Quellen');
statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" data-target="' + d.incident.factcheck_count + '">0</span>', 'Faktenchecks');