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:
@@ -145,14 +145,19 @@
|
|||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
margin: 0 0 0.5rem;
|
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 Stat Cards */
|
||||||
.hero-stats {
|
.hero-stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
max-width: 820px;
|
max-width: 650px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
@@ -211,9 +216,6 @@
|
|||||||
background: var(--lb-bg-card);
|
background: var(--lb-bg-card);
|
||||||
border-bottom: 1px solid var(--lb-border);
|
border-bottom: 1px solid var(--lb-border);
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
position: sticky;
|
|
||||||
top: 70px;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
}
|
||||||
.control-bar .container {
|
.control-bar .container {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
@@ -338,9 +340,9 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.timeline-snap-list {
|
.timeline-snap-list {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
.timeline-snap-item {
|
.timeline-snap-item {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -997,7 +999,7 @@
|
|||||||
/* Tablet */
|
/* Tablet */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.hero-stats {
|
.hero-stats {
|
||||||
max-width: 600px;
|
max-width: 550px;
|
||||||
}
|
}
|
||||||
.stat-card {
|
.stat-card {
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
@@ -1057,6 +1059,7 @@
|
|||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
}
|
}
|
||||||
.timeline-snap-list {
|
.timeline-snap-list {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
.timeline-snap-item {
|
.timeline-snap-item {
|
||||||
|
|||||||
@@ -58,11 +58,12 @@ var Lagebild = {
|
|||||||
/* ===== HERO ===== */
|
/* ===== HERO ===== */
|
||||||
renderHero: function() {
|
renderHero: function() {
|
||||||
var d = this.data;
|
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">— Stand: ' + this.fmtDateOnly(d.generated_at) + '</span>';
|
||||||
|
|
||||||
// Stat Cards
|
// Stat Cards (3: Artikel, Quellen, Faktenchecks)
|
||||||
var statsHtml = '';
|
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.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.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');
|
statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" data-target="' + d.incident.factcheck_count + '">0</span>', 'Faktenchecks');
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren