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

Sépare les cartes en plusieurs composants

Browse Source
This commit is contained in:
Laurent 2024-02-25 17:16:08 +00:00
parent ed23344d78
commit 117490fc3c
4 changed files with 139 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/CardControl.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<v-card tile outlined class="card">
<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>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="5" class="mt-4">
<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 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 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 width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-play</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</template>

30
src/components/CardSolution.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<v-card tile outlined class="card">
<v-card-title class="card__title feedback">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
Solution
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-container class="text-center">
<!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
<v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
</v-container>
</v-row>
</v-container>
</v-card>
</template>
<style>
@media (min-width: 1024px) {
.image-container {
width: 300px;
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */
}
.image-container img {
width: 100%; /* Pour remplir complètement le conteneur */
height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */
}
}
</style>

39
src/components/CardSoundboard.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<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">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<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 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 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 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 class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</template>

162
src/views/GameControl.vue
View File

@ -1,127 +1,41 @@
<template> <template>
<v-container> <v-container>
<v-row no-gutters> <v-row no-gutters>
<v-col class="align-start"> <v-col class="align-start">
<v-card tile outlined class="card"> <card-control />
<v-card-title class="card__title primary"> </v-col>
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon> <v-col class="pl-3">
Contrôles <card-soundboard />
</v-card-title> </v-col>
<v-container class="text-center"> </v-row>
<v-row justify="center"> </v-container>
<v-col cols="12" sm="6" md="5" class="mt-4"> <v-container>
<v-btn width="240" height="130" class="btn card xs12 sm6 md3"> <v-row no-gutters>
<v-icon left size="100">mdi-skip-previous</v-icon> <v-col>
</v-btn> <card-solution />
</v-col> </v-col>
<v-col cols="12" sm="6" md="5" class="mt-4"> </v-row>
<v-btn width="240" height="130" class="btn card xs12 sm6 md3"> </v-container>
<v-icon left size="100">mdi-skip-next</v-icon> </template>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<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 width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-play</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
<v-col class="pl-3"> <script setup>
<v-card tile outlined class="card" color="">
<v-card-title class="card__title primary"> import CardSolution from '@/components/CardSolution.vue'
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon> import CardControl from '@/components/CardControl.vue'
Soundboard import CardSoundboard from '@/components/CardSoundboard.vue';
</v-card-title>
<v-container class="text-center"> </script>
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4"> <style>
<v-btn class="card" width="200" height="130" @click="" rounded> @media (min-width: 1024px) {
<v-icon size="100">mdi-check-circle-outline</v-icon> .card__title.primary {
</v-btn> background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<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 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 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 class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row no-gutters>
<v-col>
<v-card tile outlined class="card">
<v-card-title class="card__title feedback">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
Solution
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-container class="text-center">
<!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
<v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
</v-container>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<style>
@media (min-width: 1024px) {
.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;
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */
}
.image-container img {
width: 100%; /* Pour remplir complètement le conteneur */
height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */
}
} }
</style> .card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
}
.btn{
border-radius:50px!important;
}
}
</style>