jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CreatorFolio update

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-20 12:45:54 -04:00
parent 01fa5472b5
commit 8e30ff47d1
1 changed files with 38 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/views/main/CreatorFolio.vue
View File

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