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

Modification du GameStatus avec ajout de la preview des buzzer connectés (juste l'UI Design pour l'instant)

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-03-23 16:21:31 +01:00
parent 3036190701
commit 83ce4b4fcc
4 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/CardControl.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<v-card tile outlined class="card"> <v-card tile outlined class="card">
<v-card-title class="card__title primary" color="primary"> <v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon> <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
Contrôles Contrôles
</v-card-title> </v-card-title>

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

@ -1,9 +1,38 @@
<template> <template>
<v-navigation-drawer> <v-navigation-drawer>
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item> <div class="label-pos">
<v-divider></v-divider> <v-label class="label-style">Buzzer connectés</v-label>
<v-list-item link title="List Item 1"></v-list-item> </div>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item> <v-row no-gutters justify="space-around" class="button-pos">
<v-icon v-modal="BuzzerRed" class="button-pos" color="BuzzerRed">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerBlue"class="button-pos" color="BuzzerBlue">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerOrange" color="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerGreen" color="BuzzerGreen">mdi-radiobox-marked</v-icon>
</v-row>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<style>
.label-pos{
padding-top: 15px;
text-align: center;
}
.label-style{
font-size: 20px !important;
font-weight: 500;
color: #e91e1e !important;
opacity: 90% !important;
}
.button-pos{
padding-top: 10px;
padding-bottom: 15px;
display: flex;
text-align: center;
}
</style>

6
ui/src/plugins/vuetify.js
View File

@ -21,7 +21,11 @@ const CustomThemeDark = {
error: '#e91e1e', error: '#e91e1e',
warning: '#FFC107', warning: '#FFC107',
info: '#607D8B', info: '#607D8B',
success: '#e91e1e' success: '#e91e1e',
BuzzerBlue: '#2867d4',
BuzzerOrange: '#d48f28',
BuzzerRed: '#d42828',
BuzzerGreen: '#28d42e',
} }
} }
const CustomThemeLight = { const CustomThemeLight = {

4
ui/src/views/GameControl.vue
View File

@ -29,14 +29,14 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.card__title.primary { .card__title.primary {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */ background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
} }
.card__title.feedback { .card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */ background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
} }
.btn{ .btn{
border-radius:30px!important; border-radius:30px!important;
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */ background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
} }
} }
</style> </style>