From ba2e21128f08a2553934296e0a28cae07644164d Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 7 Apr 2024 16:21:52 -0400
Subject: [PATCH] MainUi - Fixes

---
 src/views/StripePayment.vue     |  55 +++--
 src/views/main/CreatorFolio.vue | 370 ++++++++++++++++++++++++++------
 2 files changed, 330 insertions(+), 95 deletions(-)

diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 4d2c127..3c5d9f0 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -3,42 +3,41 @@
 
     <v-row>
       <v-text-field label="Message"
-        style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+        style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
       </v-text-field>
     </v-row>
 
 
     <v-row>
-      <v-col>
-        <v-text-field label="Montant ($)" v-model="price" style="color: rgb(0, 109, 119); background-color: #f4f4f4">
-        </v-text-field>
-      </v-col>
+      <v-text-field label="Montant ($)" v-model="price"
+        style="border-radius: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
+    </v-row>
 
-      <v-row justify="center">
-        <v-btn @click="goPay()"
-          style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
-          <v-icon left style="margin-right: 10px;">
-            mdi-gift
-          </v-icon>
-          Envoyez
-        </v-btn>
-        </v-col>
-      </v-row>
+    <v-row justify="center">
+      <v-btn @click="goPay()"
+        style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
+        <v-icon left style="margin-right: 10px;">
+          mdi-gift
+        </v-icon>
+        Envoyez
+      </v-btn>
+    </v-row>
 
 
-      <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
-        <template v-slot:default>
-          <v-card>
-            <div id="checkout">
-              <!-- Checkout will insert the payment form here -->
-            </div>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
-            </v-card-actions>
-          </v-card>
-        </template>
-      </v-dialog>
+    <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+      <template v-slot:default>
+        <v-card>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
   </v-container>
 
 
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index fce6a7f..505386e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -2,16 +2,15 @@
   <div style="background-color: #f4f4f4;">
     <DefaultLayout></DefaultLayout>
 
-    <!-- Bannière -->
-    <v-row class="fluid" style="margin-top: -50px; position: relative; z-index: 0;">
+
+    <!-- "Mobile -->
+    <v-row class="fluid hidden-md-and-up social-mobile-container"
+      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
       <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
         <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
           style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
       </v-col>
     </v-row>
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-
-    </v-row>
 
     <!-- "PurpleLine" -->
     <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
@@ -127,7 +126,6 @@
                 <!-- Tools -->
                 <v-col cols="12" class="px-0">
                   <v-list dense class="d-flex align-start align-center main-background">
-
                     <v-list-item-group>
                       <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
                         <v-btn text class="btn-custom" elevation="0" outlined="false">
@@ -266,26 +264,22 @@
 
               <v-row>
                 <v-spacer></v-spacer>
-                <v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-col cols="11" style="margin-top: 1%; margin-bottom: -2%;">
-                    <v-row justify-center align="center">
-                      <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                        <img class="socialicons invert-color" src="../../../images/facebookicon.png"
-                          alt="Description image 2">
-                      </a>
-                      <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                        <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
-                      </a>
-                      <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                        <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
-                      </a>
-                      <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                        <img class="socialicons invert-color" src="../../../images/tiktok.png"
-                          alt="Description image 2">
-                      </a>
-                    </v-row>
-                  </v-col>
-
+                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                  <v-row>
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons invert-color" src="../../../images/facebookicon.png"
+                        alt="Description image 2">
+                    </a>
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
+                    </a>
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
+                    </a>
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
+                    </a>
+                  </v-row>
                 </v-col>
                 <v-col background-color="primary"></v-col>
               </v-row>
@@ -416,38 +410,32 @@
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="3" xxl="3" class="hidden-md-and-down" hidden-md-and-up>
-        <v-container class="sticky-bottom-label" style="max-width: 400px ;  bottom: 0; z-index: 1000;">
-          <!-- Donnation -->
-          <v-card style="border-radius: 20px;">
-            <v-container>
-              <v-row class="mb-0"
-                style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                  JE SOUTIENS!
-                </v-card-title>
-              </v-row>
-              <v-spacer style="height: 20px;"></v-spacer>
-              <v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-textarea>
-              <v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-text-field>
-              <v-btn block class="ma-auto" style="width: 200px;">
-                <v-icon left>
-                  mdi-gift
-                </v-icon>
-                Donnez
-              </v-btn>
+      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+        <v-row>
+          <v-col>
+            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
+              <!-- Donnation -->
+              <v-card style="border-radius: 20px;">
+                <v-container>
+                  <v-row class="mb-0"
+                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                      JE SOUTIENS!
+                    </v-card-title>
+                  </v-row>
+
+                  <StripePayment></StripePayment>
+                </v-container>
+              </v-card>
             </v-container>
-          </v-card>
-        </v-container>
+            <v-container style="height: 1600px;">
+            </v-container>
+
+          </v-col>
+          <v-spacer>
+          </v-spacer>
+        </v-row>
       </v-col>
-
-
-
-
-
-
     </v-row>
 
     <!-- "Mobile" Donation -->
@@ -467,8 +455,6 @@
         <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
           <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
             <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
-              auto-grow></v-textarea>
             <StripePayment></StripePayment>
           </v-container>
         </v-bottom-sheet>
@@ -488,6 +474,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import StripePayment from '../StripePayment.vue';
 </script>
 
 <script>
@@ -733,11 +720,9 @@ export default {
 .social-container2 {
   background-color: #0baab2;
   border-bottom-right-radius: 30px;
-  border-bottom-left-radius: 30px;
   font-size: 1.4rem;
   font-weight: 500;
   color: white;
-
 }
 
 .social-container-mobile {
@@ -884,6 +869,16 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 250px;
+  }
+
+
+  .name-info-mobile {
+    font-size: 1.6rem;
+  }
+
+
 }
 
 
@@ -916,6 +911,13 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 330px;
+  }
+
+
+
+
 }
 
 
@@ -953,13 +955,72 @@ export default {
 
 @media (min-width: 960px) and (max-width: 1280px) {
 
+  .middle-col {
+    margin-left: -30px;
+  }
 
+  .text-soutiens {
+    font-size: 1.2rem;
+    letter-spacing: 5px;
+
+  }
 
 
   .profile-container {
-    margin-top: -16%;
+    margin-top: -185px;
+    min-width: 480px
+  }
+
+  .card-youtube {
+    min-height: 270px;
+  }
+
+  .Je-soutien-container {
+    min-width: 325px;
+    margin-left: -35px;
 
   }
+
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(25%) translateX(-50px);
+  }
+
+
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .occupation-info {
+
+    margin-left: 40px;
+    margin-top: -8px
+  }
+
+  .social-container {
+    margin-left: 80px;
+    min-width: 270px;
+    max-height: 40px
+  }
+
+
+  .social-container2 {
+
+    margin-left: 50px;
+    min-width: 250px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+
 }
 
 
@@ -970,14 +1031,62 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(25px) translateX(-8px);
+    transform: scale(1.3) translateY(25%) translateX(-50px);
   }
 
   .profile-container {
-    margin-top: -25%;
+    margin-top: -180px;
 
   }
 
+  .card-youtube {
+    min-height: 290px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 350px;
+  }
+
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .social-container {
+    margin-left: 90px;
+    min-width: 350;
+    max-height: 40px
+  }
+
+
+  .occupation-info {
+
+    margin-left: 70px;
+    margin-top: -8px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 40px;
+    min-width: 290px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+
 }
 
 
@@ -988,13 +1097,52 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25px) translateX(-5px);
+    transform: scale(1.4) translateY(25%) translateX(-40px);
   }
 
   .profile-container {
-    margin-top: -20%;
+    margin-top: -171px;
 
   }
+
+  .card-youtube {
+    min-height: 355px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-top: -4px;
+    margin-left: 35px;
+
+
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 75px;
+    margin-top: -2px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 70px;
+    min-width: 300px;
+
+
+
+  }
+
+
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
@@ -1004,10 +1152,98 @@ export default {
   }
 
   .profile-container {
-    margin-top: -12%;
+    margin-top: -160px;
 
   }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.4) translateY(25%) translateX(-40px);
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-left: 35px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    margin-left: 100px;
+
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 110px;
+    margin-top: -4px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 30px;
+    min-width: 360px;
+
+  }
+
+  .socialicons {
+    width: 38px;
+    max-width: 100px;
+    margin-top: 13px;
+    margin-left: 40px;
+  }
+
+
 }
 
-@media (min-width: 2559px) {}
+@media (min-width: 2560px) {
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(25%) translateX(-20px);
+  }
+
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .text-soutiens {
+    font-size: 1.5rem;
+  }
+
+  .name-info {
+    font-size: 2rem;
+
+  }
+
+  .social-container {
+    margin-left: 140px;
+  }
+
+  .social-container2 {
+    margin-left: 130px;
+  }
+
+  .occupation-info {
+    font-size: 1.5rem;
+    margin-left: 65px;
+    margin-top: -6px
+  }
+
+  .socialicons {
+    width: 45px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 40px;
+  }
+
+
+}
 </style>
\ No newline at end of file