mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Reposition preview fields and restore edit/save behavior
This commit is contained in:
Pandipipas
@@ -647,55 +647,102 @@ watch(
|
|||||||
class="scoreboard-preview"
|
class="scoreboard-preview"
|
||||||
>
|
>
|
||||||
<div class="scoreboard-preview__side">
|
<div class="scoreboard-preview__side">
|
||||||
<div class="scoreboard-preview__image-wrap">
|
<div class="scoreboard-preview__side-inner">
|
||||||
<img
|
<div class="scoreboard-preview__image-wrap">
|
||||||
v-if="leftPanelImage"
|
<img
|
||||||
:src="leftPanelImage"
|
v-if="leftPanelImage"
|
||||||
:alt="`${leftDisplayName || 'Left'} preview`"
|
:src="leftPanelImage"
|
||||||
class="scoreboard-preview__image"
|
:alt="`${leftDisplayName || 'Left'} preview`"
|
||||||
>
|
class="scoreboard-preview__image"
|
||||||
<div
|
>
|
||||||
v-else
|
<div
|
||||||
class="scoreboard-preview__empty"
|
v-else
|
||||||
>
|
class="scoreboard-preview__empty"
|
||||||
Left image
|
>
|
||||||
|
Left image
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
hide-selected
|
||||||
|
fill-input
|
||||||
|
clearable
|
||||||
|
label="Country"
|
||||||
|
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>
|
|
||||||
<div class="scoreboard-preview__controls">
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.leftPlayerId"
|
|
||||||
:options="leftPlayerOptions"
|
|
||||||
label="Player"
|
|
||||||
dense
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
options-dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
@update:model-value="onLeftSelect"
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model="scoreboardStore.scoreboard.leftTeamOverride"
|
|
||||||
label="Team"
|
|
||||||
dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
/>
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.leftCountryOverride"
|
|
||||||
:options="leftCountryOptions"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
hide-selected
|
|
||||||
fill-input
|
|
||||||
clearable
|
|
||||||
label="Country"
|
|
||||||
dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
@filter="onLeftCountryFilter"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -744,55 +791,102 @@ watch(
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="scoreboard-preview__side scoreboard-preview__side--right">
|
<div class="scoreboard-preview__side scoreboard-preview__side--right">
|
||||||
<div class="scoreboard-preview__image-wrap">
|
<div class="scoreboard-preview__side-inner">
|
||||||
<img
|
<div class="scoreboard-preview__controls">
|
||||||
v-if="rightPanelImage"
|
<QSelect
|
||||||
:src="rightPanelImage"
|
v-model="scoreboardStore.scoreboard.rightPlayerId"
|
||||||
:alt="`${rightDisplayName || 'Right'} preview`"
|
v-model:input-value="rightInput"
|
||||||
class="scoreboard-preview__image"
|
:options="rightPlayerOptions"
|
||||||
>
|
label="Player"
|
||||||
<div
|
dense
|
||||||
v-else
|
emit-value
|
||||||
class="scoreboard-preview__empty"
|
map-options
|
||||||
>
|
use-input
|
||||||
Right image
|
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"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
hide-selected
|
||||||
|
fill-input
|
||||||
|
clearable
|
||||||
|
label="Country"
|
||||||
|
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>
|
|
||||||
<div class="scoreboard-preview__controls">
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.rightPlayerId"
|
|
||||||
:options="rightPlayerOptions"
|
|
||||||
label="Player"
|
|
||||||
dense
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
options-dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
@update:model-value="onRightSelect"
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model="scoreboardStore.scoreboard.rightTeamOverride"
|
|
||||||
label="Team"
|
|
||||||
dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
/>
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.rightCountryOverride"
|
|
||||||
:options="rightCountryOptions"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
hide-selected
|
|
||||||
fill-input
|
|
||||||
clearable
|
|
||||||
label="Country"
|
|
||||||
dense
|
|
||||||
class="scoreboard-preview__field"
|
|
||||||
@filter="onRightCountryFilter"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</QCard>
|
</QCard>
|
||||||
@@ -1123,14 +1217,22 @@ watch(
|
|||||||
|
|
||||||
.scoreboard-preview__side {
|
.scoreboard-preview__side {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 8px;
|
}
|
||||||
align-items: flex-start;
|
|
||||||
|
.scoreboard-preview__side-inner {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scoreboard-preview__side--right {
|
.scoreboard-preview__side--right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
align-items: flex-end;
|
}
|
||||||
|
|
||||||
|
.scoreboard-preview__side--right .scoreboard-preview__side-inner {
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scoreboard-preview__image-wrap {
|
.scoreboard-preview__image-wrap {
|
||||||
@@ -1161,15 +1263,8 @@ watch(
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scoreboard-preview__name {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.scoreboard-preview__controls {
|
.scoreboard-preview__controls {
|
||||||
width: min(100%, 320px);
|
width: min(100%, 260px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
@@ -1268,9 +1363,17 @@ watch(
|
|||||||
width: min(100%, 280px);
|
width: min(100%, 280px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scoreboard-preview__side-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
.scoreboard-preview__side--right {
|
.scoreboard-preview__side--right {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
align-items: flex-start;
|
}
|
||||||
|
|
||||||
|
.scoreboard-preview__side--right .scoreboard-preview__side-inner {
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user