Public/Live_RC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split obs overlay i vänster/höger

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
src/overlays.js
View File

@@ -315,21 +315,23 @@ export function renderObsOverlay(active, leaderboard, result, sessionTiming, bra
return ` return `
<section class="overlay-obs-tower"> <section class="overlay-obs-tower">
<div class="overlay-obs-tower-head"> <div class="overlay-obs-tower-left">
<div class="overlay-obs-tower-brand"> <div class="overlay-obs-tower-head">
${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""} <div class="overlay-obs-tower-brand">
<div> ${branding.logoDataUrl ? `<img class="overlay-logo overlay-obs-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
<p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p> <div>
<h2>${escapeHtml(active.name)}</h2> <p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
<h2>${escapeHtml(active.name)}</h2>
</div>
</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> </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> </div>
<section class="overlay-obs-tower-standings"> <section class="overlay-obs-tower-standings">
${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`} ${towerRowsHtml || `<p>${t("timing.no_laps")}</p>`}

17
src/styles.css
View File

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