diff --git a/src/static/css/style.css b/src/static/css/style.css index 87f518c..4480a6b 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -2691,22 +2691,16 @@ a.dev-source-pill:hover { height: 4px; background: var(--border); } -/* Bar mit Lagebericht im gleichen Bucket: dezente goldene Top-Linie auf der Fuellung */ -.ht-bar.has-snapshot .ht-bar-fill::before { - content: ''; +.ht-bar-snap-cap { position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; + top: -8px; + left: -2px; + right: -2px; + height: 6px; background: var(--accent); - border-radius: 2px 2px 0 0; + border-radius: 2px; + box-shadow: var(--glow-accent); } -.ht-bar.has-snapshot.snapshot-only .ht-bar-fill::before { - /* Nur Snapshot, keine Artikel: kleiner goldener Strich auf Achse */ - height: 4px; -} -.ht-bar-fill { position: relative; } .ht-bars:has(.ht-bar.active) .ht-bar:not(.active) { opacity: 0.45; } /* Aktiver Bar: dezenter Marker oben */ @@ -2839,24 +2833,17 @@ a.dev-source-pill:hover { bottom: -7px; left: 50%; transform: translateX(-50%); - min-width: 14px; + width: 14px; height: 14px; - padding: 0 2px; background: var(--bg-card); border: 1px solid var(--accent); - border-radius: 7px; + border-radius: 50%; color: var(--accent); display: flex; align-items: center; justify-content: center; z-index: 4; } -.ht-snapshot-line-count { - font-size: 9px; - font-weight: 700; - font-family: var(--font-mono); - line-height: 1; -} /* "Heute"-Linie (nur bei taeglicher/woechentlicher/monatlicher Granularitaet aktiv) */ .ht-today-line { diff --git a/src/static/js/app.js b/src/static/js/app.js index 696f2d9..e5821ed 100644 --- a/src/static/js/app.js +++ b/src/static/js/app.js @@ -1165,30 +1165,19 @@ const App = { }); html += ''; - // Lagebericht-Linien quer durch die Achse (deduplikiert nach Achsen-Position) + // Lagebericht-Linien quer durch die Achse (klickbar, oeffnet Snapshot) html += '
'; - const snapshotsByPos = {}; - entries.filter(e => e.kind === 'snapshot').forEach(snap => { + const snapshots = entries.filter(e => e.kind === 'snapshot'); + snapshots.forEach(snap => { const ts = new Date(snap.timestamp || 0).getTime(); if (rangeEnd === rangeStart) return; const pos = ((ts - rangeStart) / (rangeEnd - rangeStart)) * 100; if (pos < 0 || pos > 100) return; - const posKey = Math.round(pos * 2) / 2; - if (!snapshotsByPos[posKey]) snapshotsByPos[posKey] = { pos: posKey, snapshots: [] }; - snapshotsByPos[posKey].snapshots.push(snap); - }); - Object.values(snapshotsByPos).forEach(group => { - const count = group.snapshots.length; - const first = group.snapshots[0]; - const dateStr = new Date(first.timestamp).toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE }); - const titleAttr = count === 1 - ? `Lagebericht ${dateStr}` - : `${count} Lageberichte ${dateStr}`; - const capInner = count === 1 - ? '' - : `${count}`; - html += `
`; - html += ``; + const dateStr = new Date(snap.timestamp).toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE }); + html += `
`; + html += ``; html += `
`; }); html += '
'; @@ -1240,12 +1229,15 @@ const App = { if (isActive) barClass += ' active'; html += `
`; - // Saeule selbst (gefuellt zur Hoehe). has-snapshot setzt golden Top-Border via CSS. + // Saeule selbst (gefuellt zur Hoehe) if (articleCount > 0) { html += `
`; } else { html += `
`; } + if (snapshotCount > 0) { + html += ``; + } // Hover-Vorschaukarte html += `
${UI.escape(bucket.label)} · ${articleCount + snapshotCount} Eintr${(articleCount + snapshotCount) === 1 ? 'ag' : 'äge'}
`;