From 25ffbbfe56260106ecc07cb890ad7dd9f7864c79 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 29 Nov 2024 19:37:42 -0500
Subject: [PATCH] Fixe images width

---
 src/views/creators/CreatorHome.vue | 35 ++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index ada728d..1d0b4d4 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -3,15 +3,24 @@
        :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
 
     <!-- Bouton Edit -->
-    <div class="flex justify-end">
+    <div class="flex justify-end space-x-2">
       <button
           v-if="isLoggedIn"
           @click="toggleEditMode"
           class="px-4 py-2 rounded-md hover:opacity-90"
           :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
-        {{ isEditMode ? 'Terminer' : 'Éditer' }}
+        {{ isEditMode ? 'Enregistrer' : 'Éditer' }}
       </button>
+      <div v-if="isEditMode">
+        <button
+            v-if="isLoggedIn"           
+            class="px-4 py-2 rounded-md hover:opacity-90"
+            :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
+         Annuler
+        </button>
+      </div>
     </div>
+    
 
     <!-- Titre principal -->
     <div v-if="isEditMode">
@@ -105,14 +114,13 @@
       {{ imagesSubtitle }}
     </h2>
 
-    <!-- Deux images côte à côte -->
+    <!-- 4 images côte à côte -->
 
     <div>
       <div v-if="isEditMode" class="text-2xl py-2"> Images</div>
       <div class="flex justify-center space-x-4">
-        <!-- Première image -->
-        
-        <div v-if="image1Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
+        <!-- Première image -->        
+        <div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
           <label v-if="isEditMode">
             <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
             <img :src="image1Url || fallbackImage"
@@ -128,9 +136,8 @@
           </button>
         </div>
 
-
         <!-- Deuxième image -->
-        <div v-if="image2Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
+        <div v-if="image2Url || isEditMode" :class="image1Url" class="relative w-1/2">
           <label v-if="isEditMode">
             <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
             <img :src="image2Url || fallbackImage"
@@ -147,7 +154,7 @@
         </div>
 
         <!-- Troisième image -->
-        <div v-if="image3Url || isEditMode" :class="image3Url ? 'w-1/2' : 'w-full'" class="relative">
+        <div v-if="image3Url || isEditMode" :class="image3Url" class="relative w-1/2">
           <label v-if="isEditMode">
             <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
             <img :src="image3Url || fallbackImage"
@@ -164,7 +171,7 @@
         </div>
 
         <!-- Quatrième image -->
-        <div v-if="image4Url || isEditMode" :class="image4Url ? 'w-1/2' : 'w-full'" class="relative">
+        <div v-if="image4Url || isEditMode" :class="image4Url " class="relative w-1/2">
           <label v-if="isEditMode">
             <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
             <img :src="image4Url || fallbackImage"
@@ -279,8 +286,14 @@
         <!-- Affichage de l'email -->
         <div v-if="email" class="flex items-center space-x-2">
           <i class="mdi mdi-email-outline text-2xl"></i>
-          <span>{{ email }}</span>
+          <a
+              :href="`mailto:${email}`"
+              class="no-underline text-current"
+          >
+            {{ email }}
+          </a>
         </div>
+
       </div>
     </div>