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

Reposition preview fields and restore edit/save behavior

Browse Source
This commit is contained in:
Pandipipas
2026-02-13 00:46:47 +01:00
parent 665360d3ef
commit 6616739214
1 changed files with 212 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/example/components/ScoreboardPanel.vue
+130 -27
View File
@@ -647,6 +647,7 @@ watch(
class="scoreboard-preview"
>
<div class="scoreboard-preview__side">
<div class="scoreboard-preview__side-inner">
<div class="scoreboard-preview__image-wrap">
<img
v-if="leftPanelImage"
@@ -664,23 +665,56 @@ watch(
<div class="scoreboard-preview__controls">
<QSelect
v-model="scoreboardStore.scoreboard.leftPlayerId"
v-model:input-value="leftInput"
:options="leftPlayerOptions"
label="Player"
dense
emit-value
map-options
use-input
input-debounce="0"
hide-selected
fill-input
options-dense
class="scoreboard-preview__field"
@filter="onLeftFilter"
@focus="onLeftFocus"
@blur="onLeftBlur"
@update:model-value="onLeftSelect"
>
<template #append>
<QBtn
v-if="leftShowsNameSave"
flat
round
dense
icon="save"
color="primary"
@click.stop="onLeftNameSave"
/>
</template>
</QSelect>
<QInput
v-model="scoreboardStore.scoreboard.leftTeamOverride"
label="Team"
dense
class="scoreboard-preview__field"
>
<template #append>
<QBtn
v-if="leftTeamChanged"
flat
round
dense
icon="save"
color="primary"
@click.stop="saveLeftTeamChange"
/>
</template>
</QInput>
<QSelect
v-model="scoreboardStore.scoreboard.leftCountryOverride"
v-model:input-value="leftCountryInput"
:options="leftCountryOptions"
option-value="value"
option-label="label"
@@ -695,7 +729,20 @@ watch(
dense
class="scoreboard-preview__field"
@filter="onLeftCountryFilter"
>
<template #append>
<QBtn
v-if="leftCountryChanged"
flat
round
dense
icon="save"
color="primary"
@click.stop="saveLeftCountryChange"
/>
</template>
</QSelect>
</div>
</div>
</div>
@@ -744,40 +791,60 @@ watch(
</div>
<div class="scoreboard-preview__side scoreboard-preview__side--right">
<div class="scoreboard-preview__image-wrap">
<img
v-if="rightPanelImage"
:src="rightPanelImage"
:alt="`${rightDisplayName || 'Right'} preview`"
class="scoreboard-preview__image"
>
<div
v-else
class="scoreboard-preview__empty"
>
Right image
</div>
</div>
<div class="scoreboard-preview__side-inner">
<div class="scoreboard-preview__controls">
<QSelect
v-model="scoreboardStore.scoreboard.rightPlayerId"
v-model:input-value="rightInput"
:options="rightPlayerOptions"
label="Player"
dense
emit-value
map-options
use-input
input-debounce="0"
hide-selected
fill-input
options-dense
class="scoreboard-preview__field"
@filter="onRightFilter"
@focus="onRightFocus"
@blur="onRightBlur"
@update:model-value="onRightSelect"
>
<template #append>
<QBtn
v-if="rightShowsNameSave"
flat
round
dense
icon="save"
color="primary"
@click.stop="onRightNameSave"
/>
</template>
</QSelect>
<QInput
v-model="scoreboardStore.scoreboard.rightTeamOverride"
label="Team"
dense
class="scoreboard-preview__field"
>
<template #append>
<QBtn
v-if="rightTeamChanged"
flat
round
dense
icon="save"
color="primary"
@click.stop="saveRightTeamChange"
/>
</template>
</QInput>
<QSelect
v-model="scoreboardStore.scoreboard.rightCountryOverride"
v-model:input-value="rightCountryInput"
:options="rightCountryOptions"
option-value="value"
option-label="label"
@@ -792,7 +859,34 @@ watch(
dense
class="scoreboard-preview__field"
@filter="onRightCountryFilter"
>
<template #append>
<QBtn
v-if="rightCountryChanged"
flat
round
dense
icon="save"
color="primary"
@click.stop="saveRightCountryChange"
/>
</template>
</QSelect>
</div>
<div class="scoreboard-preview__image-wrap">
<img
v-if="rightPanelImage"
:src="rightPanelImage"
:alt="`${rightDisplayName || 'Right'} preview`"
class="scoreboard-preview__image"
>
<div
v-else
class="scoreboard-preview__empty"
>
Right image
</div>
</div>
</div>
</div>
</QCard>
@@ -1123,14 +1217,22 @@ watch(
.scoreboard-preview__side {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
align-items: center;
}
.scoreboard-preview__side-inner {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}
.scoreboard-preview__side--right {
text-align: right;
align-items: flex-end;
}
.scoreboard-preview__side--right .scoreboard-preview__side-inner {
justify-content: flex-end;
}
.scoreboard-preview__image-wrap {
@@ -1161,15 +1263,8 @@ watch(
font-weight: 600;
}
.scoreboard-preview__name {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.2;
}
.scoreboard-preview__controls {
width: min(100%, 320px);
width: min(100%, 260px);
display: flex;
flex-direction: column;
gap: 6px;
@@ -1268,9 +1363,17 @@ watch(
width: min(100%, 280px);
}
.scoreboard-preview__side-inner {
flex-direction: column;
align-items: flex-start;
}
.scoreboard-preview__side--right {
text-align: left;
align-items: flex-start;
}
.scoreboard-preview__side--right .scoreboard-preview__side-inner {
justify-content: flex-start;
}
}