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

Déplacement du bouton publier pour qu'il soit en desous du color picker + Changement du scrolldown sur la page du debbuger, désormais lors du scrolldown, la console MQTT reste docked, donc la console ne remonte plus. Ouais je sais c'est génal

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-11-09 13:30:39 +01:00
parent 445a1b883f
commit 25ee22bfbf
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/components/MQTTColorPublisher.vue
View File

@ -10,7 +10,10 @@
</div>
<v-row>
<v-col cols="6" class="color-picker-style">
<v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
<div>
<v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
<v-btn class="v-btn-style-validate" height="35" @click="publisCustomColor">Publier</v-btn>
</div>
</v-col>
<v-col cols="5.5" class="button-container">
<v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
@ -20,7 +23,6 @@
<v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
</v-col>
</v-row>
<v-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>
</v-card>
</v-container>
@ -66,10 +68,6 @@ export default {
margin: 20px;
}
.v-btn-style-validate{
align-items: center;
justify-content: center;
width: 100%;
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
border-top-right-radius: 0%;
border-top-left-radius: 0%;
}
@ -77,8 +75,9 @@ export default {
text-align: center;
}
.color-picker-style {
padding-left: 5%;
padding-bottom: 5%;
margin-left: 5%;
margin-bottom: 5%;
display: flex;
}
.button-container {
text-align: center;
@ -90,7 +89,7 @@ export default {
.team-button {
width: 140px;
display: block;
margin: 7% auto 0; /* 5% de marge en bas pour espacer les boutons */
margin: 12% auto 0; /* 5% de marge en bas pour espacer les boutons */
background-color: #d42828;
}
</style>

6
ui/src/components/MQTTDebugConsole.vue
View File

@ -1,5 +1,5 @@
<template>
<v-container class="v-container-style">
<v-container class="v-container-style-console">
<v-card tile outlined width="500">
<v-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
@ -43,9 +43,11 @@
</script>
<style>
.v-container-style {
.v-container-style-console {
display: flex;
justify-content: center;
position: sticky;
top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
}
.centered-title {
text-align: center;