mycket mindre header och klockblock

This commit is contained in:
larssand
2026-03-15 15:08:59 +01:00
parent e842154b3f
commit 506d81a1ed
2 changed files with 130 additions and 105 deletions

View File

@@ -4394,8 +4394,10 @@ function renderOverlay() {
const rotatingPanels = buildOverlayPanels(active, recent);
const activePanel = rotatingPanels.length ? rotatingPanels[overlayRotationIndex % rotatingPanels.length] : null;
const denseOverlay = overlayViewMode === "leaderboard" || overlayViewMode === "tv";
dom.view.innerHTML = `
<section class="overlay-shell ${overlayViewMode === "tv" ? "overlay-shell-tv" : ""}">
<section class="overlay-shell ${overlayViewMode === "tv" ? "overlay-shell-tv" : ""} ${denseOverlay ? "overlay-shell-dense" : ""}">
${
active
? `
@@ -4406,7 +4408,7 @@ function renderOverlay() {
<div class="overlay-kicker-row">
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
<span class="pill">${escapeHtml(getSessionTypeLabel(active.type))}</span>
<span class="pill">${escapeHtml(getStartModeLabel(active.startMode))}</span>
${overlayViewMode !== "tv" ? `<span class="pill">${escapeHtml(getStartModeLabel(active.startMode))}</span>` : ""}
<span class="pill">${escapeHtml(modeLabel)}</span>
</div>
<h1>${escapeHtml(active.name)}</h1>
@@ -4494,30 +4496,16 @@ function renderOverlay() {
: overlayViewMode === "tv"
? `
<section class="overlay-board overlay-board-tv">
<div class="overlay-table-wrap overlay-display-wrap">
<section class="overlay-fastest-banner">
<div>
<div class="overlay-table-wrap overlay-display-wrap overlay-display-wrap-dense">
<section class="overlay-fastest-banner overlay-fastest-banner-dense">
<div class="overlay-fastest-banner-copy">
<span>${t("overlay.fastest_lap")}</span>
<strong>${formatLap(fastestRow?.bestLapMs)}</strong>
</div>
<div class="overlay-fastest-driver">${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")}</div>
<div class="overlay-fastest-meta">${t("table.laps")}: ${topRow?.laps || 0} | ${t("timing.total_passings")}: ${result?.passings.length || 0}</div>
</section>
<section class="overlay-stats-row">
<article class="overlay-stat-card">
<span>${t("table.laps")}</span>
<strong>${topRow?.laps || 0}</strong>
<small>${escapeHtml(topRow?.displayName || topRow?.driverName || "-")}</small>
</article>
<article class="overlay-stat-card">
<span>${t("timing.total_passings")}</span>
<strong>${result?.passings.length || 0}</strong>
<small>${sessionTiming?.untimed ? t("timing.elapsed") : t("timing.remaining")}</small>
</article>
</section>
<div class="overlay-leaderboard-card overlay-leaderboard-card-tv">
<div class="overlay-section-head">
<h3>${t("overlay.leaderboard_live")}</h3>
</div>
<div class="overlay-leaderboard-card overlay-leaderboard-card-tv overlay-leaderboard-card-dense">
${renderOverlayLeaderboard(leaderboard)}
</div>
</div>
@@ -4525,35 +4513,16 @@ function renderOverlay() {
`
: `
<section class="overlay-board">
<div class="overlay-table-wrap overlay-display-wrap">
<section class="overlay-fastest-banner">
<div>
<div class="overlay-table-wrap overlay-display-wrap overlay-display-wrap-dense">
<section class="overlay-fastest-banner overlay-fastest-banner-dense">
<div class="overlay-fastest-banner-copy">
<span>${t("overlay.fastest_lap")}</span>
<strong>${formatLap(fastestRow?.bestLapMs)}</strong>
</div>
<div class="overlay-fastest-driver">${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")}</div>
<div class="overlay-fastest-meta">${t("table.laps")}: ${topRow?.laps || 0} | ${t("timing.total_passings")}: ${result?.passings.length || 0}</div>
</section>
<section class="overlay-stats-row">
<article class="overlay-stat-card">
<span>${t("overlay.fastest_lap")}</span>
<strong>${formatLap(fastestRow?.bestLapMs)}</strong>
<small>${escapeHtml(fastestRow?.displayName || fastestRow?.driverName || "-")}</small>
</article>
<article class="overlay-stat-card">
<span>${t("table.laps")}</span>
<strong>${topRow?.laps || 0}</strong>
<small>${escapeHtml(topRow?.displayName || topRow?.driverName || "-")}</small>
</article>
<article class="overlay-stat-card">
<span>${t("timing.total_passings")}</span>
<strong>${result?.passings.length || 0}</strong>
<small>${sessionTiming?.untimed ? t("timing.elapsed") : t("timing.remaining")}</small>
</article>
</section>
<div class="overlay-leaderboard-card">
<div class="overlay-section-head">
<h3>${t("overlay.leaderboard_live")}</h3>
</div>
<div class="overlay-leaderboard-card overlay-leaderboard-card-dense">
${renderOverlayLeaderboard(leaderboard)}
</div>
</div>