split obs overlay i vänster/höger

Race-namn, logga och klocka till vänster, förarstats-tabellen
för sig till höger. Samma inställningar (rows/showClock/
showFastest/showLaps/showResult/showBest/showGap) styr
fortfarande innehållet, bara positioneringen är ändrad
This commit is contained in:
larssand
2026-09-07 17:56:26 +02:00
parent 1376169cb0
commit 6e91f921c2
2 changed files with 30 additions and 15 deletions

View File

@@ -315,21 +315,23 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
return `
<section class="overlay-obs-tower">
<div class="overlay-obs-tower-head">
<div class="overlay-obs-tower-brand">
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
<div>
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
<h2>${escapeHtml(active.name)}</h2>
<div class="overlay-obs-tower-left">
<div class="overlay-obs-tower-head">
<div class="overlay-obs-tower-brand">
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
<div>
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
<h2>${escapeHtml(active.name)}</h2>
</div>
</div>
${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
</div>
<div class="overlay-obs-tower-meta">
<span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
<span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
</div>
${obsConfig.showClock ? `<div class="overlay-obs-tower-clock" data-overlay-clock>${elapsedOrRemaining}</div>` : ""}
</div>
<div class="overlay-obs-tower-meta">
<span>${escapeHtml(getSessionTypeLabel(active.type))}</span>
<span>${escapeHtml(getStartModeLabel(active.startMode))}</span>
${showStartGrid ? `<span>${t("events.start_grid")}</span>` : ""}
${!showStartGrid && obsConfig.showFastest ? `<span>${t("overlay.fastest_lap")}: ${formatLap(fastestRow?.bestLapMs)}</span>` : ""}
</div>
<section class="overlay-obs-tower-standings">
${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`}

View File

@@ -3659,15 +3659,23 @@ select:focus {
align-items: start;
}
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout,
.overlay-shell-obs-layout-leaderboard .overlay-obs-tower {
.overlay-shell-obs-layout-leaderboard .overlay-obs-layout {
max-width: 430px;
margin-left: auto;
}
.overlay-obs-tower {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.overlay-obs-tower-left {
display: grid;
gap: 6px;
max-width: 320px;
min-width: 0;
}
.overlay-obs-tower-head,
@@ -3679,6 +3687,11 @@ select:focus {
box-shadow: var(--shadow);
}
.overlay-obs-tower-standings {
max-width: 340px;
min-width: 0;
}
.overlay-obs-tower-head {
display: flex;
align-items: center;