Remove VS screen; fix cropper + sports edit save + headshot/logo mapping
- Remove VS intro from player and thumbnail VS card from match video cards.
All references (`msb-vs*`, `initVsIntro`, `setVsImg`, `HAS_VS`, `$vs`,
`$msbThumbVs`, `$hasMatchMeta`) are stripped from scoreboard partials,
video-card component, and scoreboard script. Related CSS keyframes
(`msbFadeIn/Out`, `msbDriftA/B`, `msbSweep`) removed.
- Image cropper (resources/views/components/image-cropper.blade.php):
replace unreliable third-party Cropme integration with a DIY cropper.
Pan/zoom/rotate wired directly with pointer + wheel events; on save,
the visible viewport is rendered to an offscreen canvas at the configured
output-width (with circular clip for `shape="circle"`). Also reparent the
overlay to <body> on open to escape any transformed Bootstrap-modal
ancestor's stacking context that clipped it.
- Sports match modal (resources/views/layouts/partials/sports-match-modal.blade.php):
set fighter photo croppers to 3:4 portrait (285x380) to match the VS
card's 228x304 frame; club logos + referee stay 1:1 square.
- SportsMatchController::fillFromRequest (line 174): coerce
`$this->clean($request->input('media', []))` to `[]` when it returns null
so array_merge doesn't crash under PHP 8's stricter types.
- SportsMatch::headerData(): read fighter headshots + club logos from the
canonical media.* keys (participant1_photo / participant2_photo /
club1_logo / club2_logo) that the uploader modal actually saves, with the
older p1_* / p2_* names kept as a secondary fallback.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
1 parent
19741f489b
commit
2b5e480c9a
9 files changed
+235
-323
No files matched your search
@@ -14,14 +14,6 @@
|
||||
!empty($hd['court']) ? ('Tatami '.$hd['court']) : null,
|
||||
], fn ($p) => is_string($p) && trim($p) !== '');
|
||||
|
||||
/* ── Country display names (from Countries::all()) ───────────────── */
|
||||
$countries = \App\Data\Countries::all();
|
||||
$countryName = function (?string $iso2) use ($countries) {
|
||||
if (!$iso2) return null;
|
||||
$key = strtoupper($iso2);
|
||||
return $countries[$key]['name'] ?? null;
|
||||
};
|
||||
|
||||
/* ── Playback-time-driven data (rounds + points) ─────────────────── */
|
||||
$msbRounds = $video->matchRounds()
|
||||
->orderBy('round_number')
|
||||
@@ -75,64 +67,10 @@
|
||||
'rounds' => $msbRounds ?: [['n' => 1, 'name' => '', 'start' => 0]],
|
||||
'points' => $msbPoints,
|
||||
'defaults' => is_array($hd['scoreboard_defaults'] ?? null) ? $hd['scoreboard_defaults'] : [],
|
||||
'vs' => null, // populated below once $vs is built
|
||||
];
|
||||
|
||||
/* ── VS card — only render if there is anything to show ─────────── */
|
||||
$vs = [
|
||||
'event' => $hd['championship'] ?? null,
|
||||
'division' => $hd['division'] ?? null,
|
||||
'category' => $hd['weight_category'] ?? null,
|
||||
'round' => null,
|
||||
'red' => [
|
||||
'name' => $hd['red']['name'] ?? null,
|
||||
'flag' => $hd['red']['flag'] ?? null,
|
||||
'country_name' => $countryName($hd['red']['flag'] ?? null),
|
||||
'club' => $hd['red']['club'] ?? null,
|
||||
'club_logo' => $hd['red']['club_logo'] ?? null,
|
||||
'headshot' => $hd['red']['headshot'] ?? null,
|
||||
],
|
||||
'blue' => [
|
||||
'name' => $hd['blue']['name'] ?? null,
|
||||
'flag' => $hd['blue']['flag'] ?? null,
|
||||
'country_name' => $countryName($hd['blue']['flag'] ?? null),
|
||||
'club' => $hd['blue']['club'] ?? null,
|
||||
'club_logo' => $hd['blue']['club_logo'] ?? null,
|
||||
'headshot' => $hd['blue']['headshot'] ?? null,
|
||||
],
|
||||
'weight_category' => $hd['weight_category'] ?? null,
|
||||
'format_line' => $hd['format'] ?? null,
|
||||
'match_number' => $hd['match_number'] ?? null,
|
||||
'court' => !empty($hd['court']) ? ('Tatami '.$hd['court']) : null,
|
||||
'match_date' => $hd['match_date'] ?? null,
|
||||
'venue_name' => $hd['venue']['name'] ?? null,
|
||||
];
|
||||
|
||||
// Enough metadata for a VS card? Need at least one athlete name or headshot.
|
||||
$hasMatchMeta = ($vs['red']['name'] || $vs['red']['headshot'] ||
|
||||
$vs['blue']['name'] || $vs['blue']['headshot']);
|
||||
|
||||
// Feed image paths (headshot/logo) already routed to media.thumbnail for the
|
||||
// JS to consume — mirror them into $msbState.vs so setVsImg() can use them.
|
||||
$msbState['vs'] = [
|
||||
'red' => [
|
||||
'name' => $vs['red']['name'] ?? null,
|
||||
'flag' => $vs['red']['flag'] ?? null,
|
||||
'club_logo' => !empty($vs['red']['club_logo']) ? route('media.thumbnail', $vs['red']['club_logo']) : null,
|
||||
'headshot' => !empty($vs['red']['headshot']) ? route('media.thumbnail', $vs['red']['headshot']) : null,
|
||||
],
|
||||
'blue' => [
|
||||
'name' => $vs['blue']['name'] ?? null,
|
||||
'flag' => $vs['blue']['flag'] ?? null,
|
||||
'club_logo' => !empty($vs['blue']['club_logo']) ? route('media.thumbnail', $vs['blue']['club_logo']) : null,
|
||||
'headshot' => !empty($vs['blue']['headshot']) ? route('media.thumbnail', $vs['blue']['headshot']) : null,
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@include('videos.partials.match.scoreboard.styles')
|
||||
@include('videos.partials.match.scoreboard.overlay')
|
||||
@if ($hasMatchMeta)
|
||||
@include('videos.partials.match.scoreboard.vs-intro', ['vs' => $vs])
|
||||
@endif
|
||||
@include('videos.partials.match.scoreboard.script', ['msbState' => $msbState, 'hasMatchMeta' => $hasMatchMeta])
|
||||
@include('videos.partials.match.scoreboard.script', ['msbState' => $msbState])
|
||||
@@ -13,10 +13,8 @@
|
||||
<script>
|
||||
(function () {
|
||||
const MSB_STATE = @json($msbState);
|
||||
const HAS_VS = @json($hasMatchMeta);
|
||||
const VIDEO_ID = @json($video->id);
|
||||
const LS_KEY = 'msb_prefs';
|
||||
const SS_VS_KEY = 'msb_vs_shown_v' + VIDEO_ID;
|
||||
|
||||
const RUN = function () {
|
||||
const root = document.getElementById('msbRoot');
|
||||
@@ -130,31 +128,6 @@
|
||||
setFlag('blueFlag', MSB_STATE.blue.flag);
|
||||
setImage('redClub', MSB_STATE.red.club_logo);
|
||||
setImage('blueClub', MSB_STATE.blue.club_logo);
|
||||
|
||||
// ── VS card image slots (photo, crest, flag) ────────────────
|
||||
// If data exists, swap the placeholder for a real image.
|
||||
// If no data, hide the placeholder box entirely (never leave
|
||||
// "FIGHTER PHOTO" / "CLUB LOGO" / "FLAG" text visible in prod).
|
||||
const VS = (MSB_STATE.vs || {});
|
||||
const setVsImg = (name, path, hideWhenEmpty = true) => {
|
||||
const el = $(name); if (!el) return;
|
||||
if (path) {
|
||||
el.textContent = '';
|
||||
el.style.background = '#0d0d10';
|
||||
const img = document.createElement('img');
|
||||
img.src = path; img.alt = '';
|
||||
img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block';
|
||||
el.appendChild(img);
|
||||
} else if (hideWhenEmpty) {
|
||||
el.style.display = 'none';
|
||||
}
|
||||
};
|
||||
setVsImg('vsRedPhoto', VS.red && VS.red.headshot);
|
||||
setVsImg('vsBluePhoto', VS.blue && VS.blue.headshot);
|
||||
setVsImg('vsRedCrest', VS.red && VS.red.club_logo);
|
||||
setVsImg('vsBlueCrest', VS.blue && VS.blue.club_logo);
|
||||
setFlag('vsRedFlag', VS.red && VS.red.flag);
|
||||
setFlag('vsBlueFlag', VS.blue && VS.blue.flag);
|
||||
}
|
||||
|
||||
// ── Playback-time-driven render (memoised) ────────────────────────
|
||||
@@ -291,48 +264,6 @@
|
||||
}
|
||||
tryInject(30);
|
||||
|
||||
// ── VS intro lifecycle ────────────────────────────────────────────
|
||||
function initVsIntro() {
|
||||
if (!HAS_VS) return;
|
||||
const vs = document.getElementById('msbVs');
|
||||
const v = player();
|
||||
if (!vs || !v) return;
|
||||
|
||||
let alreadyShown = false;
|
||||
try { alreadyShown = sessionStorage.getItem(SS_VS_KEY) === '1'; } catch (e) {}
|
||||
if (alreadyShown) return;
|
||||
|
||||
let shown = false;
|
||||
const show = () => {
|
||||
if (shown) return;
|
||||
shown = true;
|
||||
try { sessionStorage.setItem(SS_VS_KEY, '1'); } catch (e) {}
|
||||
vs.hidden = false;
|
||||
vs.dataset.visible = 'true';
|
||||
try { v.pause(); } catch (e) {}
|
||||
|
||||
const dismiss = (playToo = true) => {
|
||||
if (!vs || vs.classList.contains('msb-vs-out')) return;
|
||||
vs.classList.add('msb-vs-out');
|
||||
if (playToo) { try { v.play(); } catch (e) {} }
|
||||
setTimeout(() => { if (vs && vs.parentNode) vs.parentNode.removeChild(vs); }, 520);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
};
|
||||
vs.addEventListener('click', () => dismiss(true));
|
||||
vs.addEventListener('touchstart', () => dismiss(true), { passive: true });
|
||||
const onKey = () => dismiss(true);
|
||||
document.addEventListener('keydown', onKey);
|
||||
setTimeout(() => dismiss(true), 2000);
|
||||
};
|
||||
|
||||
// Trigger on the first play attempt (autoplay-friendly).
|
||||
const onPlay = () => { v.removeEventListener('play', onPlay); v.removeEventListener('playing', onPlay); show(); };
|
||||
v.addEventListener('play', onPlay, { once: true });
|
||||
v.addEventListener('playing', onPlay, { once: true });
|
||||
// If autoplay is already firing when we arrive:
|
||||
if (!v.paused && v.currentTime < 0.5) show();
|
||||
}
|
||||
|
||||
// ── Overlay scaling to a fixed 1150 px design canvas ──────────────
|
||||
// Keeps the score bar, ticker, and identity at their pixel-perfect
|
||||
// proportions no matter how wide the actual player is.
|
||||
@@ -372,7 +303,6 @@
|
||||
v.addEventListener('loadedmetadata', tick);
|
||||
v.addEventListener('ratechange', tick);
|
||||
tick();
|
||||
initVsIntro();
|
||||
}
|
||||
attachPlayer();
|
||||
};
|
||||
|
||||
@@ -12,16 +12,6 @@
|
||||
/* ────────────────────────────── keyframes ────────────────────────────── */
|
||||
@keyframes msbRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes msbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
|
||||
@keyframes msbFadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes msbFadeOut { from { opacity: 1; } to { opacity: 0; } }
|
||||
@keyframes msbDriftA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
|
||||
50% { transform: translate3d(60px, -28px, 0) scale(1.14); } }
|
||||
@keyframes msbDriftB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
|
||||
50% { transform: translate3d(-54px, 26px, 0) scale(1); } }
|
||||
@keyframes msbSweep { 0% { transform: translateX(-60%) skewX(-14deg); opacity: 0; }
|
||||
25% { opacity: .5; }
|
||||
60% { opacity: 0; }
|
||||
100% { transform: translateX(160%) skewX(-14deg); opacity: 0; } }
|
||||
|
||||
/* ────────────────────────────── root layer ─────────────────────────────
|
||||
No z-index on the root: source order inside #ytpWrap places the video
|
||||
@@ -128,19 +118,6 @@ body.msb-off-penalties [data-msb-part="penalties"] { display: none !important; }
|
||||
body.msb-small .msb-info,
|
||||
body.msb-small .msb-feed { display: none !important; }
|
||||
|
||||
/*
|
||||
* VS intro card — visuals are entirely inline styles on the verbatim markup
|
||||
* from drafts/vs-screen.html. Only the outer wrapper + fade in/out lives
|
||||
* here; keyframes (msbDriftA/B, msbSweep, msbFadeIn/Out) are up top.
|
||||
*/
|
||||
.msb-vs {
|
||||
position: absolute; inset: 0; z-index: 12;
|
||||
background: #08080a; overflow: hidden;
|
||||
pointer-events: auto;
|
||||
animation: msbFadeIn .3s ease both;
|
||||
}
|
||||
.msb-vs.msb-vs-out { animation: msbFadeOut .5s ease both; }
|
||||
|
||||
/* ────────────────────────────── injected gear rows ──────────────────── */
|
||||
/* Matches the design prototype's custom look (26×14 track, 10 px bone knob),
|
||||
scoped so it never touches the platform's other rows. */
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
{{--
|
||||
VS SCREEN — verbatim markup from drafts/vs-screen.html. Only {{ }} holes
|
||||
filled with Blade data. `data-msb` hooks on the photo, crest, and flag
|
||||
boxes let the script swap in real images at runtime. Missing fields are
|
||||
hidden by inline display:none (never substituted with placeholder text).
|
||||
--}}
|
||||
@php
|
||||
$rc = strtoupper(trim($vs['red']['flag'] ?? ''));
|
||||
$bc = strtoupper(trim($vs['blue']['flag'] ?? ''));
|
||||
|
||||
$eventName = $vs['event'] ?? '';
|
||||
$category = $vs['category'] ?? '';
|
||||
$division = $vs['division'] ?? '';
|
||||
$roundName = $vs['round'] ?? '';
|
||||
$redName = $vs['red']['name'] ?? '';
|
||||
$redCountry = $vs['red']['country_name'] ?? '';
|
||||
$redClub = $vs['red']['club'] ?? '';
|
||||
$blueName = $vs['blue']['name'] ?? '';
|
||||
$blueCountry= $vs['blue']['country_name'] ?? '';
|
||||
$blueClub = $vs['blue']['club'] ?? '';
|
||||
$weightClass= $vs['weight_category'] ?? '';
|
||||
$format = $vs['format_line'] ?? '';
|
||||
$bout = !empty($vs['match_number']) ? ('Bout '.$vs['match_number']) : '';
|
||||
$tatami = $vs['court'] ?? '';
|
||||
$dateVenue = trim(($vs['match_date'] ?? '').' '.($vs['venue_name'] ? '· '.$vs['venue_name'] : ''));
|
||||
|
||||
$hide = fn($v) => (is_string($v) && trim($v) === '') ? 'display:none;' : '';
|
||||
@endphp
|
||||
|
||||
<div class="msb-vs" id="msbVs" hidden data-visible="false">
|
||||
<div style="position:relative;width:100%;height:100%;overflow:hidden;background:#08080a">
|
||||
|
||||
<div style="position:absolute;inset:-12%;width:70%;left:-6%;background:radial-gradient(closest-side, rgba(168,42,34,.62), rgba(8,8,10,0) 72%);animation:msbDriftA 19s ease-in-out infinite"></div>
|
||||
<div style="position:absolute;inset:-12%;width:70%;left:36%;background:radial-gradient(closest-side, rgba(28,64,136,.62), rgba(8,8,10,0) 72%);animation:msbDriftB 23s ease-in-out infinite"></div>
|
||||
<div style="position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0));animation:msbSweep 11s linear infinite"></div>
|
||||
<div style="position:absolute;top:0;bottom:0;left:0;width:54%;clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%);background:linear-gradient(120deg, rgba(122,26,22,.5), rgba(8,8,10,0) 76%)"></div>
|
||||
<div style="position:absolute;top:0;bottom:0;right:0;width:54%;clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);background:linear-gradient(300deg, rgba(24,52,110,.5), rgba(8,8,10,0) 76%)"></div>
|
||||
|
||||
{{-- event header --}}
|
||||
<div style="position:absolute;top:34px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px">
|
||||
<div style="font-family:'Zen Old Mincho',serif;font-size:24px;letter-spacing:.44em;color:#efe9e0;text-transform:uppercase;text-indent:.44em;{{ $hide($eventName) }}">{{ $eventName }}</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.34em;color:#8f8a83;text-transform:uppercase">
|
||||
<span style="{{ $hide($category) }}">{{ $category }}</span>
|
||||
<span style="width:4px;height:4px;background:#e8534a;{{ $hide($category).$hide($division) }}"></span>
|
||||
<span style="{{ $hide($division) }}">{{ $division }}</span>
|
||||
<span style="width:4px;height:4px;background:#6aa6ff;{{ $hide($division).$hide($roundName) }}"></span>
|
||||
<span style="{{ $hide($roundName) }}">{{ $roundName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute;inset:96px 0 54px;display:grid;grid-template-columns:1fr 200px 1fr;align-items:start">
|
||||
|
||||
{{-- RED fighter --}}
|
||||
<div style="display:flex;flex-direction:column;align-items:center;padding:34px 24px 0;min-width:0">
|
||||
<div style="position:relative;width:228px;height:304px">
|
||||
<div data-msb="vsRedPhoto" style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 6px,rgba(255,255,255,.03) 6px 12px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)">FIGHTER PHOTO</div>
|
||||
<div data-msb="vsRedCrest" style="position:absolute;bottom:-26px;right:-26px;width:104px;height:104px;border-radius:50%;background:#0d0d10;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-align:center;line-height:1.35">CLUB<br>LOGO</div>
|
||||
</div>
|
||||
<div style="margin-top:34px;padding-top:12px;border-top:3px solid #e8534a;display:flex;flex-direction:column;align-items:center;gap:8px">
|
||||
<div style="font-size:42px;line-height:.95;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap">{{ $redName ?: 'RED' }}</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;{{ $hide($redCountry).($rc ? '' : $hide('')) }}">
|
||||
<span data-msb="vsRedFlag" style="width:40px;height:27px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 5px,rgba(255,255,255,.1) 5px 10px);box-shadow:0 0 0 1px rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;color:rgba(255,255,255,.85)">FLAG</span>
|
||||
<span style="font-size:14px;letter-spacing:.3em;color:#d3b3ad;text-transform:uppercase;{{ $hide($redCountry) }}">{{ $redCountry }}</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:2px;{{ $hide($redClub) }}">
|
||||
<span style="font-size:13px;letter-spacing:.18em;color:#9d9691;text-transform:uppercase">{{ $redClub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- centre --}}
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:96px">
|
||||
<span style="font-family:'Zen Old Mincho',serif;font-size:88px;line-height:.8;font-weight:700;color:#efe9e0;text-shadow:0 8px 34px rgba(0,0,0,.75)">VS</span>
|
||||
<span style="padding:7px 16px;border:1px solid rgba(255,255,255,.3);font-size:14px;letter-spacing:.32em;color:#efe9e0;text-transform:uppercase;{{ $hide($weightClass) }}">{{ $weightClass }}</span>
|
||||
<span style="font-size:11px;letter-spacing:.34em;color:#8f8a83;text-transform:uppercase;{{ $hide($format) }}">{{ $format }}</span>
|
||||
</div>
|
||||
|
||||
{{-- BLUE fighter — mirror --}}
|
||||
<div style="display:flex;flex-direction:column;align-items:center;padding:34px 24px 0;min-width:0">
|
||||
<div style="position:relative;width:228px;height:304px">
|
||||
<div data-msb="vsBluePhoto" style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 6px,rgba(255,255,255,.03) 6px 12px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)">FIGHTER PHOTO</div>
|
||||
<div data-msb="vsBlueCrest" style="position:absolute;bottom:-26px;left:-26px;width:104px;height:104px;border-radius:50%;background:#0d0d10;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-align:center;line-height:1.35">CLUB<br>LOGO</div>
|
||||
</div>
|
||||
<div style="margin-top:34px;padding-top:12px;border-top:3px solid #6aa6ff;display:flex;flex-direction:column;align-items:center;gap:8px">
|
||||
<div style="font-size:42px;line-height:.95;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap">{{ $blueName ?: 'BLUE' }}</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;{{ $hide($blueCountry) }}">
|
||||
<span style="font-size:14px;letter-spacing:.3em;color:#a8b6cf;text-transform:uppercase;{{ $hide($blueCountry) }}">{{ $blueCountry }}</span>
|
||||
<span data-msb="vsBlueFlag" style="width:40px;height:27px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 5px,rgba(255,255,255,.1) 5px 10px);box-shadow:0 0 0 1px rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;color:rgba(255,255,255,.85)">FLAG</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:2px;{{ $hide($blueClub) }}">
|
||||
<span style="font-size:13px;letter-spacing:.18em;color:#9d9691;text-transform:uppercase">{{ $blueClub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- bout line --}}
|
||||
<div style="position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;font-size:11px;letter-spacing:.32em;color:#8f8a83;text-transform:uppercase">
|
||||
<span style="{{ $hide($bout) }}">{{ $bout }}</span>
|
||||
<span style="width:4px;height:4px;background:#e8534a;{{ $hide($bout).$hide($tatami) }}"></span>
|
||||
<span style="{{ $hide($tatami) }}">{{ $tatami }}</span>
|
||||
<span style="width:4px;height:4px;background:#6aa6ff;{{ $hide($tatami).$hide($dateVenue) }}"></span>
|
||||
<span style="{{ $hide($dateVenue) }}">{{ $dateVenue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user