AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Lagebild: Timeline-Dropdown durch horizontale Timeline ersetzt

Quellcode durchsuchen 
- Grid-Dropdown durch horizontale Zeitleiste ersetzt (links alt, rechts neu)
- Goldene Farbgebung: Punkte, Linie, aktiver Punkt pulsierend
- Sichtbare goldene Scrollbar bei vielen Einträgen
- Fester Abstand zwischen Punkten (gap statt flex:1)
- Auto-Scroll zum aktiven (aktuellsten) Punkt
- Andere Tage laden den ältesten Snapshot, aktueller Tag den neuesten
- Labels ausgeschrieben (Artikel, Faktenchecks)
- Timeline immer sichtbar (auch bei nur 1 Snapshot)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-08 13:19:25 +01:00
Ursprung 039c9a6832
Commit f9a0b1b3b9
2 geänderte Dateien mit 189 neuen und 57 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

159
lagebild/lagebild.css
Datei anzeigen

@@ -301,7 +301,7 @@
scroll-behavior: smooth;
padding: 4px 0;
scrollbar-width: thin;
scrollbar-color: var(--lb-border) transparent;
scrollbar-color: rgba(200, 168, 81, 0.4) rgba(200, 168, 81, 0.08);
}
.timeline-strip::-webkit-scrollbar {
height: 4px;
@@ -389,60 +389,137 @@
margin-top: 2px;
}
/* Timeline Dropdown */
/* Timeline Dropdown (Horizontal Timeline) */
.timeline-dropdown {
display: none;
background: var(--lb-bg-secondary);
border: 1px solid var(--lb-border);
border-top: none;
border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
padding: 10px 14px;
padding: 8px 0;
margin-top: 4px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(200, 168, 81, 0.4) rgba(200, 168, 81, 0.08);
}
.timeline-dropdown.open {
display: block;
}
.timeline-dropdown-header {
font-size: 0.78rem;
color: var(--lb-text-sec);
margin-bottom: 8px;
font-weight: 500;
.timeline-dropdown::-webkit-scrollbar {
height: 6px;
}
.timeline-snap-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 6px;
.timeline-dropdown::-webkit-scrollbar-track {
background: rgba(200, 168, 81, 0.08);
border-radius: 3px;
}
.timeline-snap-item {
display: inline-flex;
.timeline-dropdown::-webkit-scrollbar-thumb {
background: rgba(200, 168, 81, 0.35);
border-radius: 3px;
}
.timeline-dropdown::-webkit-scrollbar-thumb:hover {
background: rgba(200, 168, 81, 0.55);
}
.h-timeline-track {
display: flex;
align-items: flex-start;
min-width: min-content;
padding: 4px 24px;
gap: 32px;
}
.h-timeline-point {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-sm, 4px);
border: 1px solid var(--lb-border);
background: transparent;
color: var(--lb-text-sec);
font-size: 0.78rem;
flex: 0 0 auto;
min-width: 70px;
position: relative;
cursor: pointer;
padding: 4px 0;
background: none;
border: none;
font-family: inherit;
transition: all 0.2s;
}
.timeline-snap-item:hover {
background: var(--lb-bg-card);
border-color: rgba(200, 168, 81, 0.4);
/* Connecting line through dot center */
.h-timeline-point::before {
content: '';
position: absolute;
top: 29px;
left: -16px;
right: -16px;
height: 2px;
background: rgba(200, 168, 81, 0.2);
z-index: 0;
}
.h-timeline-point:first-child::before {
left: 50%;
right: -16px;
}
.h-timeline-point:last-child::before {
left: -16px;
right: 50%;
}
.h-timeline-point:only-child::before {
display: none;
}
.h-timeline-time {
font-size: 0.75rem;
font-weight: 600;
color: var(--lb-text-sec);
margin-bottom: 8px;
line-height: 1;
transition: color 0.2s;
}
.h-timeline-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(200, 168, 81, 0.35);
z-index: 1;
position: relative;
transition: all 0.2s;
box-shadow: 0 0 4px rgba(200, 168, 81, 0.1);
}
.h-timeline-meta {
font-size: 0.65rem;
color: var(--lb-text-sec);
line-height: 1.4;
margin-top: 2px;
transition: color 0.2s;
white-space: normal;
text-align: center;
}
.h-timeline-meta:first-of-type {
margin-top: 8px;
}
/* Hover */
.h-timeline-point:hover .h-timeline-time {
color: var(--lb-text);
}
.timeline-snap-item.active {
background: rgba(200, 168, 81, 0.1);
border-color: var(--lb-accent);
.h-timeline-point:hover .h-timeline-dot {
background: var(--lb-accent);
box-shadow: 0 0 8px var(--lb-glow-soft);
transform: scale(1.2);
}
/* Active */
.h-timeline-point.active .h-timeline-time {
color: var(--lb-accent);
}
.timeline-snap-time {
font-weight: 600;
.h-timeline-point.active .h-timeline-dot {
width: 12px;
height: 12px;
margin: -1px 0;
background: var(--lb-accent);
box-shadow: 0 0 12px var(--lb-glow);
animation: h-timeline-pulse 2s infinite;
}
.timeline-snap-meta {
font-size: 0.7rem;
opacity: 0.7;
@keyframes h-timeline-pulse {
0%, 100% { box-shadow: 0 0 12px var(--lb-glow); transform: scale(1); }
50% { box-shadow: 0 0 20px var(--lb-glow), 0 0 6px var(--lb-accent); transform: scale(1.15); }
}
.h-timeline-point.active .h-timeline-meta {
color: var(--lb-accent);
font-weight: 600;
}
/* Tab Navigation */
@@ -1377,15 +1454,19 @@ a.source-detail-article-title:hover {
font-size: 0.95rem;
}
.timeline-dropdown {
padding: 8px 10px;
padding: 6px 0;
}
.timeline-snap-list {
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 4px;
.h-timeline-track {
padding: 4px 12px;
}
.timeline-snap-item {
padding: 5px 10px;
font-size: 0.72rem;
.h-timeline-point {
min-width: 64px;
}
.h-timeline-time {
font-size: 0.68rem;
}
.h-timeline-meta {
font-size: 0.6rem;
}
.tab-nav {
overflow-x: auto;