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

Structure de base en place - Ce soir et vendredi soir, je vais nettoyer mes css.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-07 14:26:01 -05:00
parent 5253c5448c
commit 32a5bd258c
19 changed files with 590 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,130 +1,181 @@
<template>
<DefaultLayout></DefaultLayout>
<CreatorHeader></CreatorHeader>
<h1>Dashboard</h1>
<v-container>
<div class="d-flex flex-colum flex-md-row justify-space-between">
<div
class="w-100 pa-4 rounded-lg elevation-2"
>
TEST
</div>
<!-- PC-->
<div class="md:flex hidden items-center justify-between flex-col">
<v-container fluid class="menu-creator-position donate-menu">
<v-row>
<v-col cols="3" class="d-flex" style="justify-content: end;">
<!-- Menu à gauche -->
<v-card class="label-paiement-color"
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
<v-card-text>
<v-container>
<v-row>
<v-col>
<h1 class="tips-h1">ENCOURAGEZ-MOI</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet class="mx-auto" width="250">
<v-form @submit.prevent>
<v-text-field label="Montant ($)"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
<v-text-field label="Message"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4" block>Envoyez</v-btn>
</v-form>
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-col>
<!-- Center -->
<v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
<!-- Premier composant -->
<v-card class="flow-menu"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
<v-card-text class="color">
<v-container>
<h1 style="margin-top: 25px;" class="h1profilemobile">MA MISSION</h1>
<h1 class="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024
</h1>
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
<p class="text-justify pa-4" style="font-size: 1.2em">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>
</v-container>
</v-card-text>
</v-card>
<div
class="w-100 pa-4 rounded-lg elevation-2"
>
TEST
</div>
<!-- Deuxième composant -->
<v-card class="flow-menu" style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto;">
<h1 style="margin-top: 25px;" class="h1profilemobile">PODCAST #01</h1>
<h1 class="card-date" style="align-items: center; margin-bottom: 4%; text-align: right; margin-right: 5%;">
10-03-2024 </h1>
<v-container style="height: 700px;">
<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
</v-container>
<p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
</v-card>
</v-col>
</div>
</v-container>
<v-layout column justify-center align-center>
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
<v-card class="card-background" style="margin-top: -30px;">
<!-- Remonter les cartes de 30px et limiter la largeur -->
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
</v-card>
</v-flex>
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
<v-card class="card-background" style="margin-top: -30px;">
<!-- Remonter les cartes de 30px et limiter la largeur -->
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
</v-card>
</v-flex>
</v-layout>
<v-container>
<v-row justify="center"> <!-- Centrage horizontal -->
<v-col cols="12" sm="6"> <!-- Taille de la colonne pour occuper la moitié de la largeur en plein écran -->
<div class="banner-container" style="width: 100%; max-width: 50vw; margin: auto;">
<!-- Utilisation de margin: auto; pour centrer -->
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
style="width: 100%; margin-bottom: -80px;">
</div>
</v-col>
</v-row>
<div class="banner-container">
<img src="../../../images/guillaume.png" class="profile-picture">
<img src="../../../images/checkprofile.png" class="check-profile">
</div>
<v-container class="label-creator">
<v-row justify="center">
<v-col cols="12" sm="2" md="3" class="d-flex justify-center"></v-col>
<v-col cols="12" sm="4" md="3" class="d-flex justify-center"></v-col>
<v-col cols="3" class="d-flex justify-end">
<!-- Menu à droite -->
<!-- Ajoutez ici votre menu de droite -->
</v-col>
</v-row>
</v-container>
<v-layout column justify-center align-center>
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 460px;">
<!-- Remonter les cartes de 30px et limiter la largeur -->
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
</v-card>
</v-flex>
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 20px">
<!-- Remonter les cartes de 30px et limiter la largeur -->
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
<!-- DonateMobile-->
<div class="md:hidden flex flex-col items-center justify-center">
<v-container style="width: 105%;">
<v-card class="vcard-descriptions-mobile">
<h1 class="h1profilemobile">Ma mission</h1>
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
<p class="text-justify pa-4" style="font-size: 1.2em">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>
</v-card>
<SimpleVideoCard> </SimpleVideoCard>
</v-container>
<v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
<h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
<v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
don</v-btn>
</v-container>
</div>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import CreatorHeader from '@/layouts/CreatorHeader.vue';
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
const { name } = useDisplay()
const height = computed(() => {
// name is reactive and
// must use .value
switch (name.value) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
case 'xxl': return 1200
}
return undefined
})
</script>
<script>
export default {
data() {
return {
overlayMenu: false,
};
},
};
</script>
<style scoped>
.sticky-column {
position: sticky;
top: 0;
}
.profile-picture-position {
@@ -141,6 +192,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
.tips-h1 {
text-align: center;
font-weight: bold;
@@ -153,42 +206,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
background-color: rgba(163, 14, 121, 0.1);
}
.check-profile {
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: 140px;
position: absolute;
z-index: 1;
/* Placez les levels derrière la photo de profil */
}
.label-tips {
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
}
.label-creator-texte-color {
color: white;
}
.menu-creator-position {
margin-top: -25px;
position: relative;
}
.label-creator {
margin-right: 43px;
margin-top: -160px;
position: relative;
z-index: -1;
/* Placez les levels derrière la photo de profil */
/* Valeur inférieure pour placer derrière */
}
.card-background {
background-color: rgba(107, 0, 101, 1);
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
}
.flow-menu {
background-color: rgba(255, 255, 255, 0.3);
@@ -196,27 +227,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 10px;
}
.banner-container {
display: flex;
justify-content: center;
}
.banner-creator {
align-items: center;
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
}
.profile-picture {
border-radius: 50%;
width: 200px;
height: 200px;
position: relative;
top: -25px;
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
border: 2px solid rgba(163, 14, 121, 0.5);
z-index: 1;
/* Assurez-vous que la photo de profil est au-dessus des autres éléments */
}