From 25ee22bfbfeda12853a220cd29cd075525553921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sat, 9 Nov 2024 13:30:39 +0100
Subject: [PATCH] =?UTF-8?q?D=C3=A9placement=20du=20bouton=20publier=20pour?=
 =?UTF-8?q?=20qu'il=20soit=20en=20desous=20du=20color=20picker=20+=20Chang?=
 =?UTF-8?q?ement=20du=20scrolldown=20sur=20la=20page=20du=20debbuger,=20d?=
 =?UTF-8?q?=C3=A9sormais=20lors=20du=20scrolldown,=20la=20console=20MQTT?=
 =?UTF-8?q?=20reste=20docked,=20donc=20la=20console=20ne=20remonte=20plus.?=
 =?UTF-8?q?=20Ouais=20je=20sais=20c'est=20g=C3=A9nal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/MQTTColorPublisher.vue | 17 ++++++++---------
 ui/src/components/MQTTDebugConsole.vue   |  6 ++++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/MQTTColorPublisher.vue b/ui/src/components/MQTTColorPublisher.vue
index 7fb9e22..24529fe 100644
--- a/ui/src/components/MQTTColorPublisher.vue
+++ b/ui/src/components/MQTTColorPublisher.vue
@@ -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>
\ No newline at end of file
diff --git a/ui/src/components/MQTTDebugConsole.vue b/ui/src/components/MQTTDebugConsole.vue
index 7a162f6..f284d69 100644
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@@ -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;