fix(scoreboard): drop 'CLUB LOGO' / 'FLAG' placeholder text
The main match scoreboard overlay used to render the literal strings "CLUB LOGO" and "FLAG" inside the per-corner slots whenever the match had no club logo or flag assigned yet. The slots were there as a visual design cue, but the text was leaking into cards (via the mini scorebar overlay that already got removed in Phase 2) and showing up on the scoreboard itself while a match was being set up. Both slots are now empty by default. The script.blade.php logic that replaces them with a real <img> or SVG background on load is unchanged — when real data is present the output is identical. aria-hidden on the empty boxes so a screen reader doesn't announce the gap. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed
1 parent
133ab6e623
commit
4b21886cb9
2 files changed
+11
-8
No files matched your search
@@ -37,10 +37,10 @@
|
|||||||
{{-- RED / AKA --}}
|
{{-- RED / AKA --}}
|
||||||
<div style="flex:1 1 0;min-width:0;transform:skewX(-9deg);overflow:hidden;background:linear-gradient(90deg, rgba(122,26,22,.94), rgba(180,52,44,.9));border-bottom:3px solid #ff6a5e">
|
<div style="flex:1 1 0;min-width:0;transform:skewX(-9deg);overflow:hidden;background:linear-gradient(90deg, rgba(122,26,22,.94), rgba(180,52,44,.9));border-bottom:3px solid #ff6a5e">
|
||||||
<div style="transform:skewX(9deg);height:100%;padding:0 16px;display:flex;align-items:center;gap:12px">
|
<div style="transform:skewX(9deg);height:100%;padding:0 16px;display:flex;align-items:center;gap:12px">
|
||||||
<div data-msb="redClub" data-msb-part="clubs" style="width:46px;height:46px;flex:none;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.05em;color:rgba(255,255,255,.65);text-align:center;line-height:1.25">CLUB<br>LOGO</div>
|
<div data-msb="redClub" data-msb-part="clubs" style="width:46px;height:46px;flex:none;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.05em;color:rgba(255,255,255,.65);text-align:center;line-height:1.25" aria-hidden="true"></div>
|
||||||
<div style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px">
|
<div style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||||||
<div style="display:flex;align-items:center;gap:10px;min-width:0">
|
<div style="display:flex;align-items:center;gap:10px;min-width:0">
|
||||||
<span data-msb="redFlag" data-msb-part="flags" style="width:26px;height:17px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,rgba(255,255,255,.1) 4px 8px);box-shadow:0 0 0 1px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:7px;color:rgba(255,255,255,.85)">FLAG</span>
|
<span data-msb="redFlag" data-msb-part="flags" style="width:26px;height:17px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,rgba(255,255,255,.1) 4px 8px);box-shadow:0 0 0 1px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:7px;color:rgba(255,255,255,.85)" aria-hidden="true"></span>
|
||||||
<span data-msb="redName" style="flex:1 1 auto;min-width:0;font-size:25px;line-height:1;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['red']['name'] ?: 'RED' }}</span>
|
<span data-msb="redName" style="flex:1 1 auto;min-width:0;font-size:25px;line-height:1;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['red']['name'] ?: 'RED' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex;align-items:center;gap:8px;min-width:0">
|
<div style="display:flex;align-items:center;gap:8px;min-width:0">
|
||||||
@@ -76,14 +76,14 @@
|
|||||||
<div style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right">
|
<div style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right">
|
||||||
<div style="display:flex;align-items:center;gap:10px;min-width:0">
|
<div style="display:flex;align-items:center;gap:10px;min-width:0">
|
||||||
<span data-msb="blueName" style="flex:1 1 auto;min-width:0;font-size:25px;line-height:1;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['blue']['name'] ?: 'BLUE' }}</span>
|
<span data-msb="blueName" style="flex:1 1 auto;min-width:0;font-size:25px;line-height:1;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['blue']['name'] ?: 'BLUE' }}</span>
|
||||||
<span data-msb="blueFlag" data-msb-part="flags" style="width:26px;height:17px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,rgba(255,255,255,.1) 4px 8px);box-shadow:0 0 0 1px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:7px;color:rgba(255,255,255,.85)">FLAG</span>
|
<span data-msb="blueFlag" data-msb-part="flags" style="width:26px;height:17px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,rgba(255,255,255,.1) 4px 8px);box-shadow:0 0 0 1px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:7px;color:rgba(255,255,255,.85)" aria-hidden="true"></span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex;align-items:center;gap:8px;min-width:0">
|
<div style="display:flex;align-items:center;gap:8px;min-width:0">
|
||||||
<span data-msb="bluePenalty" data-msb-part="penalties" style="display:none;font-size:10px;letter-spacing:.18em;padding:1px 6px;background:#c8492f;color:#fff;font-weight:700;flex:none">C1</span>
|
<span data-msb="bluePenalty" data-msb-part="penalties" style="display:none;font-size:10px;letter-spacing:.18em;padding:1px 6px;background:#c8492f;color:#fff;font-weight:700;flex:none">C1</span>
|
||||||
<span data-msb="blueClubName" data-msb-part="clubs" style="flex:1 1 auto;min-width:0;font-size:12px;letter-spacing:.03em;color:rgba(226,238,255,.85);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['blue']['club'] ?? '' }}</span>
|
<span data-msb="blueClubName" data-msb-part="clubs" style="flex:1 1 auto;min-width:0;font-size:12px;letter-spacing:.03em;color:rgba(226,238,255,.85);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $msbState['blue']['club'] ?? '' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-msb="blueClub" data-msb-part="clubs" style="width:46px;height:46px;flex:none;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.05em;color:rgba(255,255,255,.65);text-align:center;line-height:1.25">CLUB<br>LOGO</div>
|
<div data-msb="blueClub" data-msb-part="clubs" style="width:46px;height:46px;flex:none;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.05em;color:rgba(255,255,255,.65);text-align:center;line-height:1.25" aria-hidden="true"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -78,8 +78,10 @@
|
|||||||
el.textContent = val || '';
|
el.textContent = val || '';
|
||||||
if (hideIfEmpty) el.toggleAttribute('data-msb-empty', !val);
|
if (hideIfEmpty) el.toggleAttribute('data-msb-empty', !val);
|
||||||
};
|
};
|
||||||
// Replace the placeholder "CLUB LOGO" text with a real <img>
|
// When a club_logo path is set, drop a real <img> into the empty
|
||||||
// (or leave the placeholder if no image). Never touches inline styles.
|
// placeholder box. When it isn't, the box stays empty — the
|
||||||
|
// inline-styled background keeps the slot visible without
|
||||||
|
// showing the stale "CLUB LOGO" text that used to render there.
|
||||||
const setImage = (name, path) => {
|
const setImage = (name, path) => {
|
||||||
const el = $(name); if (!el) return;
|
const el = $(name); if (!el) return;
|
||||||
if (!path) return;
|
if (!path) return;
|
||||||
@@ -90,8 +92,9 @@
|
|||||||
img.style.cssText = 'width:100%;height:100%;object-fit:contain;display:block';
|
img.style.cssText = 'width:100%;height:100%;object-fit:contain;display:block';
|
||||||
el.appendChild(img);
|
el.appendChild(img);
|
||||||
};
|
};
|
||||||
// Swap the placeholder "FLAG" box for a real flag image by pointing
|
// When an ISO2 is set, point the flag box's background-image at
|
||||||
// its background-image at the self-hosted flag-icons SVG.
|
// the self-hosted flag-icons SVG. When it isn't, the empty box
|
||||||
|
// stays empty — no "FLAG" placeholder text.
|
||||||
const setFlag = (name, iso2) => {
|
const setFlag = (name, iso2) => {
|
||||||
const el = $(name); if (!el) return;
|
const el = $(name); if (!el) return;
|
||||||
const code = (iso2 || '').toLowerCase();
|
const code = (iso2 || '').toLowerCase();
|
||||||
|
|||||||
Reference in new issue
Block a user