Update Ui - Modification du css pour la fiche vidéo et J'ai commencé a modifié la partie du profile afin qu'il soit bien réactif - Ajustement des fonts et grosseurs des éléments lors de plus petites résolutions.

src/views/main/CreatorFolio.vue

@@ -118,7 +118,7 @@
 
           </v-row>
 
-          <v-row style="height: 1000px;"></v-row>
+          <v-row style="height: 1400px;"></v-row>
 
           <!-- Wallet -->
           <v-row>
@@ -212,7 +212,7 @@
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
         <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>
@@ -282,7 +282,7 @@
 
                 <v-col class="text-right">
                   <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -335,7 +335,7 @@
 
                 <v-col class="text-right">
                   <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -370,7 +370,7 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%;"
+                <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>
@@ -397,7 +397,7 @@
                 </v-container>
               </v-card>
             </v-container>
-            <v-container style="height: 1000px;">
+            <v-container style="height: 1600px;">
 
             </v-container>
 
@@ -438,14 +438,7 @@
             <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>
-            <v-text-field style="color: white;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="2"
+            <StripePayment></StripePayment>
-              auto-grow></v-text-field>
-            <v-btn class="mx-auto">
-              <v-icon left class="mr-4">
-                mdi-gift
-              </v-icon>
-              Donnez
-            </v-btn>
           </v-container>
         </v-bottom-sheet>
 
@@ -511,6 +504,7 @@ export default {
   left: 0;
   width: 100%;
   z-index: 1000;
+  margin-top: -40px;
 }
 
 .sticky-bottom-label {
@@ -520,6 +514,7 @@ export default {
   left: 0;
   width: 100%;
   z-index: 1000;
+  margin-top: 20px;
 }
 
 .sticky-top-label {
@@ -542,7 +537,7 @@ export default {
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
-  font-size: larger
+
 }
 
 .occupation-info {
@@ -908,14 +903,19 @@ export default {
 
 @media (min-width: 959px) 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;
 
   }
 
@@ -924,11 +924,14 @@ export default {
   }
 
   .Je-soutien-container {
-    min-width: 300px;
+    min-width: 325px;
     margin-left: -45px;
   }
 
 
+  .mobile-profile-picture-creator {
+    transform: scale(.9) translateY(63px) translateX(-40px);
+  }
 
 
 }
@@ -941,11 +944,11 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(25px) translateX(-8px);
+    transform: scale(1.0) translateY(55px) translateX(-30px);
   }
 
   .profile-container {
-    margin-top: -25%;
+    margin-top: -180px;
 
   }
 
@@ -971,11 +974,11 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25px) translateX(-5px);
+    transform: scale(1.1) translateY(40px) translateX(-25px);
   }
 
   .profile-container {
-    margin-top: -20%;
+    margin-top: -171px;
 
   }
 
@@ -999,7 +1002,7 @@ export default {
   }
 
   .profile-container {
-    margin-top: -12%;
+    margin-top: -160px;
 
   }
 
@@ -1010,9 +1013,29 @@ export default {
   .Je-soutien-container {
     min-width: 400px;
   }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(40px) translateX(-10px);
   }
 
-@media (min-width: 2559px) {
+  .name-info {
+    font-size: 1.4rem;
+    margin-left: 40px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    margin-left: 150px;
+
+  }
+
+  .social-container2 {
+    margin-left: 80px;
+    min-width: 350px;
+  }
+}
+
+@media (min-width: 2560px) {
   .card-youtube {
     min-height: 380px;
   }
@@ -1020,5 +1043,18 @@ export default {
   .text-soutiens {
     font-size: 1.5rem;
   }
+
+  .name-info {
+    font-size: 2rem;
+
+  }
+
+  .social-container {
+    margin-left: 150px;
+  }
+
+  .social-container2 {
+    margin-left: 150px;
+  }
 }
 </style>