style: simplify bracket panel layout

This commit is contained in:
Pandipipas
2026-02-14 17:46:02 +01:00
parent 9cfe61c179
commit d4c3cbf9b6
@@ -102,50 +102,42 @@ onMounted(() => {
<template>
<div class="bracket-panel">
<QCard
flat
bordered
>
<QCardSection class="bracket-panel-header">
<div class="text-h4">
Bracket
</div>
</QCardSection>
<QSeparator />
<div class="text-h4">
Bracket
</div>
<QCardSection class="column q-gutter-md">
<QSelect
v-model="stage"
label="Stage"
:options="stageOptions"
<div class="column q-gutter-md">
<QSelect
v-model="stage"
label="Stage"
:options="stageOptions"
dense
class="bracket-panel__field"
/>
<QSelect
v-model="bracketSide"
label="Bracket side"
:options="bracketSideOptions"
dense
emit-value
map-options
class="bracket-panel__field"
/>
<div class="bracket-panel-custom">
<QInput
v-model="customText"
label="Custom progress"
dense
class="bracket-panel__field"
class="bracket-panel-custom-input bracket-panel__field"
/>
<QSelect
v-model="bracketSide"
label="Bracket side"
:options="bracketSideOptions"
dense
emit-value
map-options
class="bracket-panel__field"
<QToggle
v-model="customActive"
:disable="!customText.trim()"
color="secondary"
class="bracket-panel-custom-toggle"
/>
<div class="bracket-panel-custom">
<QInput
v-model="customText"
label="Custom progress"
dense
class="bracket-panel-custom-input bracket-panel__field"
/>
<QToggle
v-model="customActive"
:disable="!customText.trim()"
color="secondary"
class="bracket-panel-custom-toggle"
/>
</div>
</QCardSection>
</QCard>
</div>
</div>
</div>
</template>
@@ -156,12 +148,6 @@ onMounted(() => {
gap: 16px;
}
.bracket-panel-header {
display: flex;
align-items: center;
padding-bottom: 4px;
}
.bracket-panel-custom {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;