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>
<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>
Contrôles
</v-card-title>

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

@ -1,9 +1,38 @@
<template>
<v-navigation-drawer>
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
<v-divider></v-divider>
<v-list-item link title="List Item 1"></v-list-item>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item>
<div class="label-pos">
<v-label class="label-style">Buzzer connectés</v-label>
</div>
<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>
</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',
warning: '#FFC107',
info: '#607D8B',
success: '#e91e1e'
success: '#e91e1e',
BuzzerBlue: '#2867d4',
BuzzerOrange: '#d48f28',
BuzzerRed: '#d42828',
BuzzerGreen: '#28d42e',
}
}
const CustomThemeLight = {

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

@ -29,14 +29,14 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
<style>
@media (min-width: 1024px) {
.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 {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
}
.btn{
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>