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

style: simplify bracket panel layout

Browse Source
This commit is contained in:
Pandipipas
2026-02-14 17:46:02 +01:00
parent 9cfe61c179
commit d4c3cbf9b6
1 changed files with 32 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/scoreko-dev/components/BracketPanel.vue
+32 -46
View File
@@ -102,50 +102,42 @@ onMounted(() => {
<template> <template>
<div class="bracket-panel"> <div class="bracket-panel">
<QCard <div class="text-h4">
flat Bracket
bordered </div>
>
<QCardSection class="bracket-panel-header">
<div class="text-h4">
Bracket
</div>
</QCardSection>
<QSeparator />
<QCardSection class="column q-gutter-md"> <div class="column q-gutter-md">
<QSelect <QSelect
v-model="stage" v-model="stage"
label="Stage" label="Stage"
:options="stageOptions" :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 dense
class="bracket-panel__field" class="bracket-panel-custom-input bracket-panel__field"
/> />
<QSelect <QToggle
v-model="bracketSide" v-model="customActive"
label="Bracket side" :disable="!customText.trim()"
:options="bracketSideOptions" color="secondary"
dense class="bracket-panel-custom-toggle"
emit-value
map-options
class="bracket-panel__field"
/> />
<div class="bracket-panel-custom"> </div>
<QInput </div>
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>
</template> </template>
@@ -156,12 +148,6 @@ onMounted(() => {
gap: 16px; gap: 16px;
} }
.bracket-panel-header {
display: flex;
align-items: center;
padding-bottom: 4px;
}
.bracket-panel-custom { .bracket-panel-custom {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;