From de01ab71fc06b28c916272e0d30b23bb1f12ab77 Mon Sep 17 00:00:00 2001 From: AegisSight Promote-UI Date: Fri, 1 May 2026 15:22:06 +0200 Subject: [PATCH] =?UTF-8?q?Revert=20"Ereignis-Timeline:=20=C3=9Cberlappung?= =?UTF-8?q?en=20oben=20aufl=C3=B6sen"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 58eb1298caf067bd479e7b4b2ddff5295d5552fc. --- src/static/css/style.css | 66 ++++++++++++++++------------------------ src/static/js/app.js | 30 +++++------------- 2 files changed, 35 insertions(+), 61 deletions(-) diff --git a/src/static/css/style.css b/src/static/css/style.css index 4480a6b..d38956a 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -2453,24 +2453,25 @@ a.dev-source-pill:hover { /* Achsen-Container */ .ht-axis { position: relative; + height: 150px; +} + +/* Stündliches Layout: höher wegen Datums-Markern oben */ +.ht-axis--hourly { height: 170px; } -.ht-axis--hourly { - height: 190px; -} - -/* Saeulen-Bereich (ueber der Linie) — verschoben nach unten, damit oben Platz fuer Datums-Marker + Themen-Labels */ +/* Saeulen-Bereich (ueber der Linie) */ .ht-bars { position: absolute; left: 4%; right: 4%; - top: 44px; + top: 22px; bottom: 60px; } .ht-axis--hourly .ht-bars { - top: 64px; + top: 42px; } /* Achsenlinie */ @@ -2478,14 +2479,14 @@ a.dev-source-pill:hover { position: absolute; left: 2%; right: 2%; - top: 120px; + top: 100px; height: 2px; background: var(--border); z-index: 3; } .ht-axis--hourly .ht-axis-line { - top: 140px; + top: 120px; } /* Datums-Marker (vertikale Linie + Datum oben, nur bei Stunden-Granularität) */ @@ -2639,12 +2640,12 @@ a.dev-source-pill:hover { position: absolute; left: 4%; right: 4%; - top: 130px; + top: 110px; height: 20px; } .ht-axis--hourly .ht-axis-labels { - top: 150px; + top: 130px; } .ht-axis-label { @@ -2718,20 +2719,11 @@ a.dev-source-pill:hover { margin-bottom: 4px; } -/* Themen-Labels: eigene Schiene unter den Tagesmarkern, nicht mehr Kind der Bar */ -.ht-bucket-labels { - position: absolute; - left: 4%; - right: 4%; - top: 22px; - height: 18px; - pointer-events: none; - z-index: 6; -} -.ht-axis--hourly .ht-bucket-labels { top: 42px; } +/* Themen-Label ueber aktiven Buckets */ .ht-bucket-label { position: absolute; - top: 0; + bottom: calc(100% + 14px); + left: 50%; transform: translateX(-50%); font-size: 10px; font-family: var(--font-mono); @@ -2742,6 +2734,7 @@ a.dev-source-pill:hover { border-radius: 8px; border: 1px solid var(--tint-accent-strong); white-space: nowrap; + pointer-events: none; opacity: 0.85; } @@ -2800,21 +2793,16 @@ a.dev-source-pill:hover { font-weight: 500; } -/* Lagebericht-Linien quer durch die Achse — gehen vom Bar-Bereich bis zur Achsenlinie, - Cap (Pin-Symbol) sitzt unten direkt an der Achsenlinie. */ +/* Lagebericht-Linien quer durch die Achse */ .ht-snapshot-lines { position: absolute; left: 4%; right: 4%; - top: 44px; - bottom: 50px; + top: 0; + bottom: 38px; pointer-events: none; z-index: 2; } -.ht-axis--hourly .ht-snapshot-lines { - top: 64px; - bottom: 50px; -} .ht-snapshot-line { position: absolute; top: 0; @@ -2830,7 +2818,7 @@ a.dev-source-pill:hover { .ht-snapshot-line:hover { opacity: 0.85; } .ht-snapshot-line-cap { position: absolute; - bottom: -7px; + top: -2px; left: 50%; transform: translateX(-50%); width: 14px; @@ -2842,21 +2830,21 @@ a.dev-source-pill:hover { display: flex; align-items: center; justify-content: center; - z-index: 4; } -/* "Heute"-Linie (nur bei taeglicher/woechentlicher/monatlicher Granularitaet aktiv) */ +/* "Heute"-Linie */ .ht-today-line { position: absolute; left: 4%; - top: 44px; - bottom: 50px; - width: 0; + top: 0; + bottom: 38px; + width: 1px; margin-left: -1px; + background: var(--accent); + opacity: 0.5; border-left: 1px dashed var(--accent); - opacity: 0.6; pointer-events: none; - z-index: 3; + z-index: 4; } .ht-today-label { position: absolute; diff --git a/src/static/js/app.js b/src/static/js/app.js index e5821ed..bae85f8 100644 --- a/src/static/js/app.js +++ b/src/static/js/app.js @@ -1182,35 +1182,15 @@ const App = { }); html += ''; - // "Heute"-Linie nur bei taeglicher/woechentlicher/monatlicher Granularitaet sinnvoll — - // bei "hour" zeigt der Tagesmarker eh schon "Heute, ..." + // "Heute"-Linie wenn heute im sichtbaren Bereich liegt const now = Date.now(); - if (!isHourly && rangeEnd > rangeStart && now >= rangeStart && now <= rangeEnd) { + if (rangeEnd > rangeStart && now >= rangeStart && now <= rangeEnd) { const todayPos = ((now - rangeStart) / (rangeEnd - rangeStart)) * 100; html += ``; } - // Themen-Labels als eigene Schiene (nicht mehr Kind der Bar) — verhindert Ueberlappung mit Datums-Markern - const labelEntries = []; - buckets.forEach((bucket, idx) => { - if (!topActiveIdx.has(idx)) return; - const articleCount = bucket.entries.filter(e => e.kind === 'article').length; - if (articleCount < 2) return; - const kw = this._extractBucketKeyword(bucket); - if (!kw) return; - const pos = this._bucketPositionPercent(bucket, rangeStart, rangeEnd, buckets.length); - labelEntries.push({ pos, text: kw }); - }); - if (labelEntries.length > 0) { - html += '
'; - labelEntries.forEach(le => { - html += `
${UI.escape(le.text)}
`; - }); - html += '
'; - } - // Saeulen pro Bucket html += '
'; buckets.forEach((bucket, idx) => { @@ -1220,6 +1200,8 @@ const App = { // Bar-Hoehe: Anteil articleCount/articleMax, mindestens 6%, maximal 100% const heightPct = articleCount === 0 ? 0 : Math.max(6, Math.round((articleCount / articleMax) * 100)); const isActive = this._activePointIndex === idx; + const showLabel = topActiveIdx.has(idx) && articleCount >= 2; + const keyword = showLabel ? this._extractBucketKeyword(bucket) : null; const top3 = this._topRelevantHeadlines(bucket, 3); const remaining = bucket.entries.filter(e => e.kind === 'article').length - top3.length; @@ -1238,6 +1220,10 @@ const App = { if (snapshotCount > 0) { html += ``; } + // Themen-Label fuer aktivste Buckets + if (keyword) { + html += `
${UI.escape(keyword)}
`; + } // Hover-Vorschaukarte html += `
${UI.escape(bucket.label)} · ${articleCount + snapshotCount} Eintr${(articleCount + snapshotCount) === 1 ? 'ag' : 'äge'}
`;