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

Mise en page de la vue GameControl

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2024-02-25 15:02:28 +01:00
parent d57b2c39ee
commit f7ca05513c
5 changed files with 88 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/GameControl.vue
View File

@ -10,22 +10,22 @@
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-previous</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-next</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-pause</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-play</v-icon>
</v-btn>
</v-col>
@ -35,37 +35,37 @@
</v-col>
<v-col class="pl-3">
<v-card tile outlined class="card">
<v-card-title class="card__title">
<v-card tile outlined class="card" color="">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
Soundboard
</v-card-title>
<v-container class="text-center" color="primary">
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-close-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-timer-outline</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mb-4">
<v-btn color="primary" dark width="220" height="130" @click="" rounded>
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-human-handsup</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="s" class="mb-4">
<v-btn color="primary" dark width="220" height="130" @click="" rounded>
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</v-btn>
</v-col>
@ -99,9 +99,17 @@
<style>
@media (min-width: 1024px) {
.v-btn{
.card__title.primary {
background-color: #2979FF; /* 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:50px!important;
}
.card {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
}
.image-container {
width: 300px;