From 8e30ff47d14eb5cb4d1ca248b36e8f2be71ce604 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 20 Apr 2024 12:45:54 -0400
Subject: [PATCH] CreatorFolio update

---
 src/views/main/CreatorFolio.vue | 247 +++++---------------------------
 1 file changed, 38 insertions(+), 209 deletions(-)

diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 39ab062..b64c9bb 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -16,11 +16,16 @@
     </v-row>
 
     <!-- "Mobile-Profile" -->
+    <!-- "Profile picture" -->
     <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
       <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
     </v-row>
+
+    <!-- User Social Network Links -->
     <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
       hidden-md-and-down>
+
+      <!-- Facebook -->
       <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.facebook.com/profile.php?id=61556819217561">
@@ -28,25 +33,25 @@
               alt="Facebook"></v-img>
           </a>
         </v-col>
-
+        <!-- Instagram -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.instagram.com/">
             <v-img class="socialicons-mobile" src="../../../images/instaicon.png" alt="Instagram"></v-img>
           </a>
         </v-col>
-
+        <!-- Profile picture - Small -->
         <v-col cols="4" sm="4" xs="0" class="hidden-xs">
           <v-row class="d-flex justify-center align-center">
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
           </v-row>
         </v-col>
-
+        <!-- X -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.x.com/">
             <v-img class="socialicons-mobile invert-color" src="../../../images/xicon.png" alt="X"></v-img>
           </a>
         </v-col>
-
+        <!-- TikTok -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.tiktok.com/">
             <v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
@@ -54,22 +59,20 @@
         </v-col>
       </v-row>
 
+      <!-- User informations Name title and description  -->
       <v-row class="social-container-mobile social-container-mobile-spacer">
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
           <v-row justify="center name-info-mobile">
             <v-typography>{{ name }}</v-typography>
           </v-row>
         </v-col>
-
         <v-spacer xs="12" sm="4"></v-spacer>
-
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
           <v-row justify="center name-info-mobile">
             <v-typography>{{ title }}</v-typography>
           </v-row>
         </v-col>
       </v-row>
-
       <v-row>
         <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
           class="social-icon-group-mobile">
@@ -83,7 +86,6 @@
         </v-container>
       </v-row>
     </v-container>
-    <!-- "Mobile-End" -->
 
     <!-- Bannière Pc -->
     <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
@@ -102,7 +104,7 @@
       <!-- "Menu" -->
       <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
         <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky">
+          <v-row class="Hutopy-menu-sticky-mobile">
             <v-spacer></v-spacer>
             <v-col>
               <v-container style=" overflow-y: hidden;">
@@ -155,7 +157,6 @@
                                     </v-col>
                                   </v-row>
                                 </v-col>
-
                                 <v-col>
                                   <v-row>
                                     <v-col cols="8">
@@ -170,7 +171,6 @@
                                   </v-row>
                                 </v-col>
                               </v-row>
-
                             </v-card-text>
 
                             <v-card-actions class="justify-center">
@@ -201,24 +201,17 @@
                                 style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
                               <v-col cols="5" class="text-truncate">Good Job</v-col>
                             </v-row>
-
                           </v-card>
                         </template>
                       </v-dialog>
                     </v-list-item>
                   </v-list>
                 </v-col>
-
-
               </v-container>
-
             </v-col>
-
-
           </v-row>
           <v-row style="height: 1400px;"></v-row>
         </v-col>
-
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
@@ -226,6 +219,7 @@
         <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
           <v-container>
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+            <!-- User informations Name & title  -->
             <v-container class="background-profile-container" style="margin-top: -8%;">
               <v-row>
                 <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
@@ -240,6 +234,7 @@
                 <v-col></v-col>
               </v-row>
 
+              <!-- User Social Network Links -->
               <v-row>
                 <v-spacer></v-spacer>
                 <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
@@ -261,6 +256,8 @@
                 </v-col>
                 <v-col background-color="primary"></v-col>
               </v-row>
+
+              <!-- Description  -->
               <v-row>
                 <v-container
                   style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
@@ -269,7 +266,6 @@
                       <v-expansion-panel class="background-pink" style="color: white;" :key="i"
                         text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
                         title="À propos : Ma mission est claire :">
-
                       </v-expansion-panel>
                     </v-col>
                   </v-expansion-panels>
@@ -279,9 +275,10 @@
           </v-container>
         </v-container>
 
-        <!-- "Card youtube" -->
+        <!-- Card youtube -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
             <v-col>
               <v-row>
                 <v-col>
@@ -290,9 +287,9 @@
                 </v-col>
 
                 <v-col class="text-right">
-                  <v-btn class="btn-card-options" flat tile elevation="0">
+                  <!--<v-btn class="btn-card-options" flat tile elevation="0">
                     <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>
+                  </v-btn>          (a intégrer)   -->
                 </v-col>
               </v-row>
               <v-row>
@@ -301,6 +298,7 @@
               </v-row>
             </v-col>
 
+            <!-- Card core Video/image & text -->
             <div
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
               <v-container>
@@ -316,7 +314,6 @@
                   derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
                   comprises. Et toi, quel est ton objectif pour cette année?</p>
 
-
                 <!-- Like dislike commment Section -->
                 <div style="height: 20px;"></div>
                 <div
@@ -333,58 +330,6 @@
           </v-card>
         </v-container>
 
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <v-col>
-              <v-row>
-                <v-col>
-                  <h1 class="card-title">
-                    PODCAST #01</h1>
-                </v-col>
-
-                <v-col class="text-right">
-                  <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>
-                </v-col>
-              </v-row>
-              <v-row>
-                <h1 class="card-date">
-                  10-03-2024</h1>
-              </v-row>
-            </v-col>
-
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
-              <v-container>
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
-                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
-                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
-                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
-                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
-                  comprises. Et toi, quel est ton objectif pour cette année?</p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
@@ -401,14 +346,12 @@
                       JE SOUTIENS!
                     </v-card-title>
                   </v-row>
-
                   <StripePayment></StripePayment>
                 </v-container>
               </v-card>
             </v-container>
             <v-container style="height: 1600px;">
             </v-container>
-
           </v-col>
           <v-spacer>
           </v-spacer>
@@ -421,15 +364,15 @@
       style="background-color: #6b0065; margin-top: 30px; text-align: center;">
 
       <!-- Barre cliquable pour ouvrir le drawer -->
-
       <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
         style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
         JE SOUTIENS
       </v-btn>
     </v-col>
+
+    <!-- Drawer du bas -->
     <template>
       <div>
-        <!-- Drawer du bas -->
         <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>
@@ -440,12 +383,9 @@
       </div>
     </template>
 
-
-
-
-
-
     <FooterLayout></FooterLayout>
+
+    <!-- Approuve btn -->
     <v-dialog v-model="accepted" max-width="500">
       <template v-slot:activator="{ on }">
         <div class="text-center pa-4">
@@ -455,15 +395,19 @@
         </div>
       </template>
 
-      <!-- Your custom dialog content -->
+
+      <!-- Approuve and decline Modale -->
+      <!-- Completed paiement -->
       <v-card class="custom-dialog" style="background-color: #f4f4f4;">
         <v-container>
           <v-row justify="center">
+            <!-- Icon Check -->
             <v-col cols="12" class="text-center">
               <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
             </v-col>
           </v-row>
 
+          <!-- Informations -->
           <v-row justify="center">
             <v-col cols="12">
               <v-card-text style="font-weight: 600;">
@@ -479,10 +423,10 @@
               <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
                 Guillaume Mousseau
               </v-card-text>
-
             </v-col>
           </v-row>
 
+          <!-- Ok btn -->
           <v-row>
             <v-col cols="12">
               <v-card-actions class="justify-end">
@@ -492,11 +436,9 @@
           </v-row>
         </v-container>
       </v-card>
-
-
-
     </v-dialog>
 
+    <!-- Decline btn -->
     <v-dialog v-model="decline" max-width="500">
       <template v-slot:activator="{ on }">
         <div class="text-center pa-4">
@@ -506,28 +448,30 @@
         </div>
       </template>
 
-      <!-- Your custom dialog content -->
+      <!-- Decline paiement -->
+
       <v-card class="custom-dialog" style="background-color: #f4f4f4;">
         <v-container>
           <v-row justify="center">
+            <!-- Icon Cancel -->
             <v-col cols="12" class="text-center">
               <v-icon color="black" size="250">mdi-cancel</v-icon>
             </v-col>
           </v-row>
 
+          <!-- Informations -->
           <v-row justify="center">
             <v-col cols="12">
               <v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
                 Paiement refusé
               </v-card-text>
-
-
               <v-card-text style="font-size: 1rem; text-align: center;">
                 Une erreur s'est produit
               </v-card-text>
             </v-col>
           </v-row>
 
+          <!-- Ok btn -->
           <v-row>
             <v-col cols="12">
               <v-card-actions class="justify-end">
@@ -537,8 +481,8 @@
           </v-row>
         </v-container>
       </v-card>
-
     </v-dialog>
+
   </div>
 </template>
 
@@ -564,7 +508,7 @@ let navigationItems = [
 </script>
 
 <style scoped>
-.Hutopy-menu-sticky {
+.Hutopy-menu-sticky-mobile {
   position: sticky;
   top: 0;
   bottom: 0;
@@ -592,7 +536,6 @@ let navigationItems = [
   z-index: 1000;
 }
 
-
 .text-soutiens {
   margin-bottom: 15px;
   color: white;
@@ -604,7 +547,6 @@ let navigationItems = [
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
-
 }
 
 .occupation-info {
@@ -613,7 +555,6 @@ let navigationItems = [
 }
 
 .name-info-mobile {
-
   margin-left: 22px;
   font-size: 1.3rem
 }
@@ -637,11 +578,9 @@ let navigationItems = [
   margin-top: -16%;
 }
 
-
 .btn-custom {
   width: 100%;
   background-color: transparent;
-
 }
 
 .logout-button {
@@ -651,17 +590,12 @@ let navigationItems = [
   background-color: transparent;
 }
 
-
-
-
 .video-container {
   position: relative;
   padding-bottom: 56.25%;
-  /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   z-index: 100;
-  /* Positionne la vidéo au-dessus de la carte */
 }
 
 .video-container iframe {
@@ -670,8 +604,6 @@ let navigationItems = [
   left: 0;
   width: 100%;
   height: 100%;
-
-  /* Assure que l'iframe de la vidéo est également au-dessus de la carte */
 }
 
 
@@ -733,15 +665,10 @@ let navigationItems = [
   margin-left: 20px;
 }
 
-
-
 .youtube-card {
   margin-left: 2%;
   margin-right: 2%;
   border-radius: 15px;
-
-
-
   background-color: #f4f4f4;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
 }
@@ -763,8 +690,6 @@ let navigationItems = [
   font-size: 1.7rem;
   font-weight: 600;
   color: white;
-
-
 }
 
 .social-container2 {
@@ -777,23 +702,14 @@ let navigationItems = [
 
 .social-container-mobile {
   background-color: #006d77;
-
   font-size: 1.4rem;
   font-weight: 600;
   color: white;
-
   z-index: 1000;
-
-
   margin: auto;
-  /* Centre verticalement */
   text-align: center;
-  /* Centre horizontalement */
-
-
 }
 
-
 .social-container2-mobile {
   background-color: #0baab2;
   z-index: 1000;
@@ -806,8 +722,6 @@ let navigationItems = [
   background-color: #0baab2;
 }
 
-
-
 .mini-profile-picture {
   border-radius: 100px;
 }
@@ -819,18 +733,12 @@ let navigationItems = [
   margin-top: 10px;
 }
 
-
 .mobile-profile-picture-creator {
-
-
   border-radius: 100px;
   height: 150px;
   width: 150px;
-
   border-radius: 50%;
   max-width: 150px;
-
-
   border: 4px solid white;
   z-index: 1000;
 }
@@ -839,21 +747,17 @@ let navigationItems = [
   height: 50px;
   margin-left: -13%;
   margin-top: 6%;
-
 }
 
 .h1-navigation {
-
   text-align: center;
   font-weight: 600;
   margin-bottom: 10%;
-
 }
 
 .mobile-profile-picture {
   height: 40px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  /* Ajouter une ombre à la photo */
   border: 2px solid #a30e79;
   margin-right: 10px
 }
@@ -862,19 +766,11 @@ let navigationItems = [
   margin-top: 25px;
 }
 
-
-
-
-
 .v-navigation-drawer {
   max-height: 100vh;
-
-
-  /* 80% de la hauteur de l'écran */
 }
 
 @media (min-width: 150px) and (max-width: 474px) {
-
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(-30%) translateX(0%);
   }
@@ -885,14 +781,10 @@ let navigationItems = [
     margin-top: 0px;
     margin-left: 20px;
   }
-
-
 }
 
 
 @media (min-width: 475px) and (max-width: 599px) {
-
-
   .socialicons-mobile {
     width: 35px;
     max-width: 100px;
@@ -900,21 +792,16 @@ let navigationItems = [
     margin-left: px;
   }
 
-
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(-30%) translateX(0%);
   }
 
-
   .profile-container-mobile {
-
     width: 110%;
     margin-left: -3%;
     margin-top: -112px;
   }
 
-
-
   .occupation-info {
     font-size: 1rem;
   }
@@ -923,19 +810,12 @@ let navigationItems = [
     min-height: 250px;
   }
 
-
   .name-info-mobile {
     font-size: 1.6rem;
   }
-
-
 }
 
-
-
-
 @media (min-width: 599px) and (max-width: 749px) {
-
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(25%) translateX(0%);
   }
@@ -964,26 +844,19 @@ let navigationItems = [
   .card-youtube {
     min-height: 330px;
   }
-
-
-
-
 }
 
-
 @media (min-width: 750px) and (max-width: 960px) {
   .mobile-profile-picture-creator {
     transform: scale(1.8) translateY(25%) translateX(0%);
   }
 
   .profile-container {
-
     width: 110%;
     margin-left: -3%;
   }
 
   .profile-container-mobile {
-
     width: 110%;
     margin-left: -3%;
     margin-top: -110px;
@@ -1000,11 +873,9 @@ let navigationItems = [
   .card-youtube {
     min-height: 425px;
   }
-
 }
 
 @media (min-width: 960px) and (max-width: 1280px) {
-
   .middle-col {
     margin-left: -30px;
   }
@@ -1012,10 +883,8 @@ let navigationItems = [
   .text-soutiens {
     font-size: 1.2rem;
     letter-spacing: 5px;
-
   }
 
-
   .profile-container {
     margin-top: -185px;
     min-width: 480px
@@ -1028,16 +897,12 @@ let navigationItems = [
   .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;
@@ -1045,7 +910,6 @@ let navigationItems = [
   }
 
   .occupation-info {
-
     margin-left: 40px;
     margin-top: -8px
   }
@@ -1056,9 +920,7 @@ let navigationItems = [
     max-height: 40px
   }
 
-
   .social-container2 {
-
     margin-left: 50px;
     min-width: 250px;
     max-height: 35px
@@ -1070,10 +932,8 @@ let navigationItems = [
     margin-top: 15px;
     margin-left: 25px;
   }
-
 }
 
-
 @media (min-width: 1280px) and (max-width: 1600px) {
   .text-soutiens {
     font-size: 1.3rem;
@@ -1086,7 +946,6 @@ let navigationItems = [
 
   .profile-container {
     margin-top: -180px;
-
   }
 
   .card-youtube {
@@ -1101,7 +960,6 @@ let navigationItems = [
     min-width: 350px;
   }
 
-
   .name-info {
     font-size: 1.2rem;
     margin-left: 20px;
@@ -1114,15 +972,11 @@ let navigationItems = [
     max-height: 40px
   }
 
-
   .occupation-info {
-
     margin-left: 70px;
     margin-top: -8px
   }
 
-
-
   .social-container2 {
 
     margin-left: 40px;
@@ -1136,10 +990,8 @@ let navigationItems = [
     margin-top: 15px;
     margin-left: 25px;
   }
-
 }
 
-
 @media (min-width: 1600px) and (max-width: 1919px) {
   .text-soutiens {
     font-size: 1.3rem;
@@ -1152,7 +1004,6 @@ let navigationItems = [
 
   .profile-container {
     margin-top: -171px;
-
   }
 
   .card-youtube {
@@ -1171,8 +1022,6 @@ let navigationItems = [
     font-size: 1.5rem;
     margin-top: -4px;
     margin-left: 35px;
-
-
   }
 
   .occupation-info {
@@ -1181,29 +1030,19 @@ let navigationItems = [
     margin-top: -2px
   }
 
-
-
   .social-container2 {
-
     margin-left: 70px;
     min-width: 300px;
-
-
-
   }
-
-
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
   .text-soutiens {
     font-size: 1.3rem;
-
   }
 
   .profile-container {
     margin-top: -160px;
-
   }
 
   .card-youtube {
@@ -1226,7 +1065,6 @@ let navigationItems = [
 
   .social-container {
     margin-left: 100px;
-
   }
 
   .occupation-info {
@@ -1235,13 +1073,9 @@ let navigationItems = [
     margin-top: -4px
   }
 
-
-
   .social-container2 {
-
     margin-left: 30px;
     min-width: 360px;
-
   }
 
   .socialicons {
@@ -1250,8 +1084,6 @@ let navigationItems = [
     margin-top: 13px;
     margin-left: 40px;
   }
-
-
 }
 
 @media (min-width: 2560px) {
@@ -1259,7 +1091,6 @@ let navigationItems = [
     transform: scale(1.5) translateY(25%) translateX(-20px);
   }
 
-
   .card-youtube {
     min-height: 380px;
   }
@@ -1293,7 +1124,5 @@ let navigationItems = [
     margin-top: 15px;
     margin-left: 40px;
   }
-
-
 }
 </style>
\ No newline at end of file