asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajustement du placement des score, tout est bien aligné et centré

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-04-05 14:12:22 +02:00
parent c3b86cb68b
commit 080601b792
1 changed files with 103 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
ui/src/components/GameStatus.vue
View File

@ -1,5 +1,5 @@
<template>
<v-navigation-drawer width="250">
<v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte -->
<div class="label-pos">
<v-label class="labelTitle-style">Buzzer connectés</v-label>
</div>
@ -13,97 +13,99 @@
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<div class="label-pos">
<v-label class="labelTitle-style pb-7">Scores</v-label>
<v-label class="labelTitle-style pb-4">Scores</v-label>
</div>
<!-- Équipes Rouges et Bleues côte à côte -->
<v-row no-gutters class="scorebox-pos">
<!-- Équipe Rouge -->
<v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->
<v-row no-gutters>
<v-col class="scorediv-style-red">
<div>
<v-row no-gutters justify="space-around" class="scorebox-1-pos">
<v-row>
<v-col class="align-start scorediv-style-red pl-1">
<v-col>
<div class="pr-1">
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ RedTotalScore }}</v-label>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
<v-col class="align-start scorediv-style-blue pl-1">
<v-col>
<div class="pr-1">
<!-- Équipe Bleue -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-blue">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ BlueTotalScore }}</v-label>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
</div>
<!-- Équipes Oranges et Vertes côte à côte -->
<v-row no-gutters class="scorebox-pos">
<!-- Équipe Orange -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-orange">
<div>
<v-row no-gutters justify="space-around" class="scorebox-2-pos mb-0">
<v-row>
<v-col class="scorediv-style-orange pl-1">
<v-col>
<div class="pr-1">
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
<div>
<v-label class="labelTotalScore-style">Total</v-label>
</div>
<v-label class="labelTotalScore-style">{{ OrangeTotalScore }}</v-label>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
<v-col class="align-start scorediv-style-green pl-1">
<v-col>
<div class="pr-1">
<!-- Équipe Verte -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-green">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">Manche</v-label>
</div>
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
</div>
<v-divider class="pr-1" color="background"/>
</v-col>
<div class="pr-1">
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style">Total</v-label>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>
</div>
<v-label class="labelTotalScore-style">{{ GreenTotalScore }}</v-label>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
</div>
</v-navigation-drawer>
</template>
@ -148,24 +150,27 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
padding-top: 10px;
padding-bottom: 15px;
}
.scorebox-1-pos{
padding-bottom: 15px;
text-align: center;
}
.scorebox-2-pos{
padding-top: 9px;
.scorebox-pos {
text-align: center;
}
.scorediv-style-red {
background-color: #d42828 !important;
padding: 15px;
border-top-left-radius: 10%;
}
.scorediv-style-orange {
background-color: #d48f28 !important;
padding: 15px;
border-bottom-left-radius: 10%;
}
.scorediv-style-blue {
background-color: #2867d4 !important;
padding: 15px;
border-top-right-radius: 10%;
}
.scorediv-style-green {
background-color: #28d42e !important;
padding: 15px;
border-bottom-right-radius: 10%;
}
</style>