Merge pull request #64 from Pandipipas/remove-commentary-boxes-and-update-style

Unifica estilo subrayado en BracketPanel y CommentaryPanel y ajusta botón swap
This commit is contained in:
Pandipipas
2026-02-14 17:24:08 +01:00
committed by GitHub
2 changed files with 66 additions and 45 deletions
@@ -119,24 +119,23 @@ onMounted(() => {
label="Stage" label="Stage"
:options="stageOptions" :options="stageOptions"
dense dense
outlined class="bracket-panel__field"
/> />
<QSelect <QSelect
v-model="bracketSide" v-model="bracketSide"
label="Bracket side" label="Bracket side"
:options="bracketSideOptions" :options="bracketSideOptions"
dense dense
outlined
emit-value emit-value
map-options map-options
class="bracket-panel__field"
/> />
<div class="bracket-panel-custom"> <div class="bracket-panel-custom">
<QInput <QInput
v-model="customText" v-model="customText"
label="Custom progress" label="Custom progress"
dense dense
outlined class="bracket-panel-custom-input bracket-panel__field"
class="bracket-panel-custom-input"
/> />
<QToggle <QToggle
v-model="customActive" v-model="customActive"
@@ -178,4 +177,23 @@ onMounted(() => {
align-self: center; align-self: center;
margin-top: 0; margin-top: 0;
} }
.bracket-panel__field :deep(.q-field__control) {
min-height: 28px;
padding: 0;
background: transparent !important;
border-radius: 0;
}
.bracket-panel__field :deep(.q-field__control:before),
.bracket-panel__field :deep(.q-field__control:after) {
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}
.bracket-panel__field :deep(.q-field__native),
.bracket-panel__field :deep(.q-field__input),
.bracket-panel__field :deep(.q-field__label) {
color: rgba(255, 255, 255, 0.92);
}
</style> </style>
@@ -12,57 +12,31 @@ const commentaryStore = useCommentaryStore();
</div> </div>
<QSpace /> <QSpace />
<QBtn <QBtn
color="secondary" flat
outline dense
icon="swap_horiz" icon="swap_horiz"
label="Intercambiar lados" class="commentary-panel__action-btn"
@click="commentaryStore.swapCommentators" @click="commentaryStore.swapCommentators"
/> />
</div> </div>
<div class="row q-col-gutter-lg"> <div class="row q-col-gutter-lg">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<QCard <QInput
flat v-model="commentaryStore.leftCommentator"
bordered label="Commentator"
> dense
<QCardSection> class="commentary-panel__field"
<div class="text-subtitle1 text-weight-bold"> />
Left side
</div>
</QCardSection>
<QSeparator />
<QCardSection>
<QInput
v-model="commentaryStore.leftCommentator"
label="Commentator"
dense
outlined
/>
</QCardSection>
</QCard>
</div> </div>
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<QCard <QInput
flat v-model="commentaryStore.rightCommentator"
bordered label="Commentator"
> dense
<QCardSection> class="commentary-panel__field"
<div class="text-subtitle1 text-weight-bold"> />
Right side
</div>
</QCardSection>
<QSeparator />
<QCardSection>
<QInput
v-model="commentaryStore.rightCommentator"
label="Commentator"
dense
outlined
/>
</QCardSection>
</QCard>
</div> </div>
</div> </div>
</div> </div>
@@ -74,4 +48,33 @@ const commentaryStore = useCommentaryStore();
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.commentary-panel__field :deep(.q-field__control) {
min-height: 28px;
padding: 0;
background: transparent !important;
border-radius: 0;
}
.commentary-panel__field :deep(.q-field__control:before),
.commentary-panel__field :deep(.q-field__control:after) {
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}
.commentary-panel__field :deep(.q-field__native),
.commentary-panel__field :deep(.q-field__input),
.commentary-panel__field :deep(.q-field__label) {
color: rgba(255, 255, 255, 0.92);
}
.commentary-panel__action-btn {
color: #fff;
opacity: 0.85;
}
.commentary-panel__action-btn:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}
</style> </style>