From c2b63a26b88e2e12c0341363c927a58b5f566acf Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 17 Aug 2024 11:47:41 -0400
Subject: [PATCH] Change Banner width

---
 src/views/creators/CreatorBanner.vue | 154 ++++++++++++++-------------
 1 file changed, 79 insertions(+), 75 deletions(-)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index a92884a..ffbac24 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,97 +1,101 @@
 <template>
   <!--  Bannière-->
-  <div class="relative bottom-4  z-20 m">
-    <div class="relative flex flex-col">
-      <!-- Social Network-->
-      <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
-           :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
-        <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
-          <a
-              v-for="socialNetwork in GetSocialsUrls()"
-              :href="socialNetwork.url"
-              target="_blank"
-              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-            <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-            <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
-            <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
-                 alt="Website">
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!--Banner & user info-->
-    <div class="relative">
-      <!--Banner-->
-      <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
-             :src="creator.images.banner"
-             alt="Profile Banner" style="max-height: 425px">
-      </div>
-    </div>
-  </div>
-
-  <!-- Actions Button & image profile -->
-  <div class="relative bottom-4 w-full">
-    <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
-      <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
-        <!-- Profile Image Wrapper -->
-        <div class="relative flex justify-center lg:w-auto lg:justify-start">
-
-          <!-- Profile Image -->
-          <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
-            <img
-                class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
-                :src="creator.images.logo"
-                alt="Profile Picture"
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
-            />
+  <div>    
+      <div class="relative z-20">
+        <div class="relative flex flex-col">
+          <!-- Social Network-->
+          <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
+               :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
+            <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
+              <a
+                  v-for="socialNetwork in GetSocialsUrls()"
+                  :href="socialNetwork.url"
+                  target="_blank"
+                  class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+                <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
+                <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
+                     alt="Tiktok">
+                <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
+                     alt="Website">
+              </a>
+            </div>
           </div>
         </div>
 
-        <!-- User Info -->
-        <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
-          <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
-            <p class="capitalize ">{{ creator.name }} </p>
-            <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
+        <!--Banner & user info-->
+        <div class="relative">
+          <!--Banner-->
+          <div>
+            <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
+                 :src="creator.images.banner"
+                 alt="Profile Banner" style="max-height: 425px">
           </div>
         </div>
+      </div>
 
-        <div class="px-6 mt-2">
-          <subscribe-button :creator="creator"></subscribe-button>
-        </div>
+      <!-- Actions Button & image profile -->
+      <div class="relative bottom-4 w-full">
+        <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
+             :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+          <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
+            <!-- Profile Image Wrapper -->
+            <div class="relative flex justify-center lg:w-auto lg:justify-start">
 
-        <donation-button :color-border="creator.colors.menu"
-                         :color-accent="creator.colors.accent"
-                         :creator-id="creator.id"
-                         :creator-name="creator.name"
-                         :creator-logo="creator.images.logo"
-                         iconColorClass="text-white"
-        ></donation-button>
+              <!-- Profile Image -->
+              <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
+                <img
+                    class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
+                    :src="creator.images.logo"
+                    alt="Profile Picture"
+                    :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+                />
+              </div>
+            </div>
+
+            <!-- User Info -->
+            <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
+              <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
+                <p class="capitalize ">{{ creator.name }} </p>
+                <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
+              </div>
+            </div>
+
+            <div class="px-6 mt-2">
+              <subscribe-button :creator="creator"></subscribe-button>
+            </div>
+
+            <donation-button :color-border="creator.colors.menu"
+                             :color-accent="creator.colors.accent"
+                             :creator-id="creator.id"
+                             :creator-name="creator.name"
+                             :creator-logo="creator.images.logo"
+                             iconColorClass="text-white"
+            ></donation-button>
 
 
-        <div class="flex flex-row align-center">
+            <div class="flex flex-row align-center">
 
 
-        </div>
-        <!-- Buttons -->
-        <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
+            </div>
+            <!-- Buttons -->
+            <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
 
-          <publish-content-button :creator="creator"
-                                  @content-posted="addContent"
-          ></publish-content-button>
+              <publish-content-button :creator="creator"
+                                      @content-posted="addContent"
+              ></publish-content-button>
 
-          <div class="text-white text-2xl">
-            {{ creator.about.title }}
+              <div class="text-white text-2xl">
+                {{ creator.about.title }}
+              </div>
+
+              <creator-about :creator="creator"
+              ></creator-about>
+            </div>
           </div>
-          
-          <creator-about :creator="creator"
-          ></creator-about>
         </div>
       </div>
     </div>
-  </div>
+  
 </template>
 
 <script setup>