Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use real overlay pages in Graphics previews

Browse Source
This commit is contained in:
Pandipipas
2026-02-14 18:30:51 +01:00
parent 73ed5b2420
commit 51f948a070
1 changed files with 22 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/scoreko-dev/views/Graphics.vue
+22 -149
View File
@@ -148,63 +148,16 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
class="graphics-preview q-mt-md"
>
<div class="graphics-preview__label text-caption text-grey-5 q-mb-sm">
Overlay preview (estática)
Overlay preview (real)
</div>
<div
v-if="getPreviewKind(graphic) === 'scoreboard'"
class="graphics-preview__board graphics-preview__board--scoreboard"
>
<div class="graphics-preview__score-side graphics-preview__score-side--left">
<div class="graphics-preview__team">
TEAM LEFT
</div>
<div class="graphics-preview__player">
PLAYER 1
</div>
</div>
<div class="graphics-preview__score-center">
<span>2</span>
<span class="graphics-preview__score-dash">-</span>
<span>1</span>
</div>
<div class="graphics-preview__score-side graphics-preview__score-side--right">
<div class="graphics-preview__team">
TEAM RIGHT
</div>
<div class="graphics-preview__player">
PLAYER 2
</div>
</div>
</div>
<div
v-else-if="getPreviewKind(graphic) === 'commentary'"
class="graphics-preview__board graphics-preview__board--commentary"
>
<div class="graphics-preview__commentary-side">
<div class="graphics-preview__commentary-label">
COMMENTARY
</div>
<div class="graphics-preview__commentary-name">
COMMENTATOR 1
</div>
</div>
<div class="graphics-preview__vs">
VS
</div>
<div class="graphics-preview__commentary-side graphics-preview__commentary-side--right">
<div class="graphics-preview__commentary-label">
COMMENTARY
</div>
<div class="graphics-preview__commentary-name">
COMMENTATOR 2
</div>
</div>
<div class="graphics-preview__frame-wrap">
<iframe
class="graphics-preview__frame"
:src="buildGraphicUrl(graphic)"
title="Graphic preview"
loading="lazy"
/>
</div>
</div>
</QCardSection>
@@ -220,105 +173,25 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
padding-top: 14px;
}
.graphics-preview__board {
.graphics-preview__frame-wrap {
width: 100%;
min-height: 86px;
aspect-ratio: 16 / 9;
border-radius: 8px;
background: rgb(0 0 0 / 35%);
border: 1px solid rgb(255 255 255 / 12%);
background:
linear-gradient(45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
linear-gradient(-45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
rgb(8 8 8 / 70%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
overflow: hidden;
}
.graphics-preview__board--scoreboard {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.graphics-preview__score-side {
padding: 10px 16px;
}
.graphics-preview__score-side--left {
background: linear-gradient(95deg, #1e2630 0%, #2f3f55 100%);
}
.graphics-preview__score-side--right {
text-align: right;
background: linear-gradient(265deg, #4a1d29 0%, #764064 100%);
}
.graphics-preview__team {
color: rgb(244 247 255 / 75%);
font-size: 11px;
letter-spacing: 0.15em;
font-weight: 700;
}
.graphics-preview__player {
margin-top: 2px;
color: #fff;
font-size: 20px;
font-weight: 900;
}
.graphics-preview__score-center {
padding: 0 10px;
color: #f5f7ff;
font-size: 28px;
font-weight: 900;
letter-spacing: 0.04em;
}
.graphics-preview__score-dash {
opacity: 0.65;
margin: 0 5px;
}
.graphics-preview__board--commentary {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
padding: 8px;
}
.graphics-preview__commentary-side {
padding: 8px 12px;
background: linear-gradient(106deg, #20174a 0%, #6e3b9b 100%);
border-radius: 6px;
}
.graphics-preview__commentary-side--right {
text-align: right;
background: linear-gradient(254deg, #430f33 0%, #b53b58 100%);
}
.graphics-preview__commentary-label {
color: rgb(244 247 255 / 75%);
font-size: 10px;
letter-spacing: 0.18em;
font-weight: 700;
}
.graphics-preview__commentary-name {
margin-top: 2px;
color: #fff;
font-size: 16px;
font-weight: 900;
}
.graphics-preview__vs {
width: 36px;
height: 36px;
border-radius: 50%;
background: radial-gradient(circle, #1b1e2d 0%, #0f111b 82%);
border: 1px solid rgb(255 255 255 / 35%);
color: #eef3ff;
font-size: 13px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
.graphics-preview__frame {
width: 100%;
height: 100%;
border: 0;
}
</style>