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

Modification de CreatorFolio - Tweaking de la mise en page, changement du favicon et modification du component StripePayment pour le ui

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-02 20:04:01 -04:00
parent fcd72de2cb
commit c13ea466d9
3 changed files with 289 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

45
src/views/StripePayment.vue
View File

@@ -1,23 +1,30 @@
<template> <template>
<v-container> <v-container>
<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-col> <v-row>
<v-btn <v-text-field label="Message"
@click="goPay()" style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;" </v-text-field>
>Envoyez
</v-btn>
</v-col>
</v-row> </v-row>
<v-row>
<v-text-field label="Montant ($)" v-model="price"
style="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-row>
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent> <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default> <template v-slot:default>
<v-card> <v-card>
@@ -26,10 +33,7 @@
</div> </div>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
text="Annuler"
@click="closeDialog()"
></v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
@@ -37,6 +41,9 @@
</v-container> </v-container>
</template> </template>
<script setup> <script setup>

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

@@ -3,12 +3,15 @@
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<!-- Bannière --> <!-- Bannière -->
<v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;"> <v-row class="fluid" style="margin-top: -50px; position: relative; z-index: 0;">
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;"> <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover <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> style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col> </v-col>
</v-row> </v-row>
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
@@ -65,20 +68,21 @@
<!-- "Creator Core (Menu / Feed / Donation)" --> <!-- "Creator Core (Menu / Feed / Donation)" -->
<v-row> <v-row>
<!-- "Menu" --> <!-- "Menu" -->
<v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" 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-img src="../../../images/hutopy.png" alt="Description de l'image" style="height: 150px; width: 300px;"
class="mx-auto" :elevation="10"></v-img>
<v-col style="margin: 0;"> <v-col style="margin: 0;">
<v-row class="Hutopy-menu-sticky">
<v-spacer></v-spacer>
<v-col>
<v-container style=" overflow-y: hidden;"> <v-container style=" overflow-y: hidden;">
<!-- Nav-Btn --> <!-- Nav-Btn -->
<v-col cols="12" class="px-0"> <v-col cols="12" class="px-0">
<v-img src="../../../images/hutopy.png" alt="Description de l'image"
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
<v-list dense class="main-background"> <v-list dense class="main-background">
<v-list-item-group> <v-list-item-group>
<router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link"> <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
<v-btn text class="d-flex align-start align-center main-background" elevation="0" outlined="false"> <v-btn text class="d-flex align-start align-center main-background" elevation="0"
outlined="false">
<v-icon left class="mr-4">{{ item.icon }}</v-icon> <v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }} {{ item.text }}
</v-btn> </v-btn>
@@ -109,6 +113,12 @@
</v-col> </v-col>
</v-container> </v-container>
</v-col>
</v-row>
<v-row style="height: 1000px;"></v-row>
<!-- Wallet --> <!-- Wallet -->
<v-row> <v-row>
@@ -198,10 +208,11 @@
</v-dialog> </v-dialog>
</v-row> </v-row>
</v-col> </v-col>
</v-col> </v-col>
<!-- Profile Info Picture name title & description --> <!-- Profile Info Picture name title & description -->
<v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="9" lg="7" xl="6" xxl="6"> <v-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 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>
@@ -284,12 +295,65 @@
<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>
<iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0" <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
title="Guillaumem" frameborder="0" 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" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> allowfullscreen></iframe>
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire : <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-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: rgb(11, 170, 178); 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 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 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 créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
@@ -315,8 +379,10 @@
</v-col> </v-col>
<!-- "Large-Monitor-RightCol" Donation --> <!-- "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-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
<v-container class="sticky-bottom-label" style="max-width: 400px ; bottom: 0; z-index: 1000;"> <v-row>
<v-col>
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
<!-- Donnation --> <!-- Donnation -->
<v-card style="border-radius: 20px;"> <v-card style="border-radius: 20px;">
<v-container> <v-container>
@@ -326,20 +392,20 @@
JE SOUTIENS! JE SOUTIENS!
</v-card-title> </v-card-title>
</v-row> </v-row>
<v-spacer style="height: 20px;"></v-spacer>
<v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3" <StripePayment></StripePayment>
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-container> </v-container>
</v-card> </v-card>
</v-container> </v-container>
<v-container style="height: 1000px;">
</v-container>
</v-col>
<v-spacer>
</v-spacer>
</v-row>
</v-col> </v-col>
@@ -351,7 +417,7 @@
<!-- "Mobile" Donation --> <!-- "Mobile" Donation -->
<v-col class="hidden-lg-and-up sticky-bottom-label" hidden-md-and-down <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
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 -->
@@ -398,6 +464,7 @@
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import StripePayment from '../StripePayment.vue';
</script> </script>
<script> <script>
@@ -414,6 +481,7 @@ export default {
tiktokLink: 'tiktok.com', tiktokLink: 'tiktok.com',
drawer: false, drawer: false,
drawerbottom: false, drawerbottom: false,
items: [ items: [
{ title: 'Item 1' }, { title: 'Item 1' },
{ title: 'Item 2' }, { title: 'Item 2' },
@@ -436,6 +504,15 @@ export default {
<style scoped> <style scoped>
.Hutopy-menu-sticky {
position: sticky;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.sticky-bottom-label { .sticky-bottom-label {
position: sticky; position: sticky;
top: 0; top: 0;
@@ -457,8 +534,8 @@ export default {
.text-soutiens { .text-soutiens {
margin-bottom: 15px; margin-bottom: 15px;
color: white; color: white;
font-size: 2rem; font-size: 1.5rem;
letter-spacing: 10px; letter-spacing: 7px;
text-align: center; text-align: center;
} }
@@ -599,6 +676,8 @@ export default {
.youtube-card { .youtube-card {
margin-left: 2%; margin-left: 2%;
margin-right: 2%; margin-right: 2%;
border-radius: 15px;
background-color: #f4f4f4; background-color: #f4f4f4;
@@ -753,6 +832,10 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 250px;
}
} }
@@ -784,6 +867,10 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 330px;
}
} }
@@ -813,17 +900,37 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 425px;
}
} }
@media (min-width: 959px) and (max-width: 1280px) { @media (min-width: 959px) and (max-width: 1280px) {
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container { .profile-container {
margin-top: -16%; margin-top: -16%;
} }
.card-youtube {
min-height: 270px;
}
.Je-soutien-container {
min-width: 300px;
margin-left: -45px;
}
} }
@@ -842,12 +949,25 @@ export default {
} }
.card-youtube {
min-height: 290px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 350px;
}
} }
@media (min-width: 1600px) and (max-width: 1919px) { @media (min-width: 1600px) and (max-width: 1919px) {
.text-soutiens { .text-soutiens {
font-size: 1.5rem; font-size: 1.3rem;
} }
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
@@ -858,18 +978,47 @@ export default {
margin-top: -20%; margin-top: -20%;
} }
.card-youtube {
min-height: 355px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 400px;
}
} }
@media (min-width: 1920px) and (max-width: 2559px) { @media (min-width: 1920px) and (max-width: 2559px) {
.text-soutiens { .text-soutiens {
font-size: 1.5rem; font-size: 1.3rem;
} }
.profile-container { .profile-container {
margin-top: -12%; margin-top: -12%;
} }
.card-youtube {
min-height: 380px;
} }
@media (min-width: 2559px) {} .Je-soutien-container {
min-width: 400px;
}
}
@media (min-width: 2559px) {
.card-youtube {
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
}
</style> </style>