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

Merged PR 16: Modification de CreatorFolio - Tweaking de la mise en page, changement du fav...

Browse Source 
Modification de CreatorFolio - Tweaking de la mise en page, changement du favicon et modification du component StripePayment pour le ui
This commit is contained in:
Pascal Marchesseault
2024-04-04 01:14:50 +00:00
parent fcd72de2cb 417d7c8a57
commit aee0119f34
3 changed files with 389 additions and 165 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

125
src/views/StripePayment.vue
View File

@@ -1,42 +1,49 @@
<template>
<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-btn
@click="goPay()"
style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
>Envoyez
</v-btn>
</v-col>
<v-row>
<v-text-field label="Message"
style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
</v-text-field>
</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>
<template v-slot:default>
<v-card>
<div id="checkout">
<!-- Checkout will insert the payment form here -->
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text="Annuler"
@click="closeDialog()"
></v-btn>
</v-card-actions>
<div id="checkout">
<!-- Checkout will insert the payment form here -->
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</v-container>
</template>
<script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
import { loadStripe } from '@stripe/stripe-js';
import { onMounted, ref } from "vue";
let stripe = null;
const client = useClient();
const price = ref(0);
const isPaymentDialogActive = ref(false);
var checkout;
let stripe = null;
const client = useClient();
const price = ref(0);
const isPaymentDialogActive = ref(false);
var checkout;
onMounted(async () => {
// I removed api key to push. Need to get it from backend.
stripe = await loadStripe('');
})
onMounted(async () => {
// I removed api key to push. Need to get it from backend.
stripe = await loadStripe('');
})
const fetchClientSecret = async () => {
const clientSecret = await createCheckoutSession();
return clientSecret;
};
const fetchClientSecret = async () => {
const clientSecret = await createCheckoutSession();
return clientSecret;
};
async function createCheckoutSession() {
let clientSecret = await client.post('/api/Stripe', {
price: price.value * 100
});
let secret = clientSecret["data"];
return secret;
}
function closeDialog(){
isPaymentDialogActive.value = false;
checkout.destroy();
}
async function goPay() {
isPaymentDialogActive.value = true;
checkout = await stripe.initEmbeddedCheckout({
fetchClientSecret,
async function createCheckoutSession() {
let clientSecret = await client.post('/api/Stripe', {
price: price.value * 100
});
await checkout.mount('#checkout');
}
let secret = clientSecret["data"];
return secret;
}
function closeDialog() {
isPaymentDialogActive.value = false;
checkout.destroy();
}
async function goPay() {
isPaymentDialogActive.value = true;
checkout = await stripe.initEmbeddedCheckout({
fetchClientSecret,
});
await checkout.mount('#checkout');
}
</script>

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

@@ -3,12 +3,15 @@
<DefaultLayout></DefaultLayout>
<!-- 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-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
@@ -65,50 +68,57 @@
<!-- "Creator Core (Menu / Feed / Donation)" -->
<v-row>
<!-- "Menu" -->
<v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" 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 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-spacer></v-spacer>
<v-col>
<v-container style=" overflow-y: hidden;">
<!-- Nav-Btn -->
<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-item-group>
<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-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item-group>
</v-list>
</v-col>
<!-- Tools -->
<v-col cols="12" class="px-0">
<v-list dense class="d-flex align-start align-center main-background">
<v-list-item-group>
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
<v-btn text class="btn-custom" elevation="0" outlined="false">
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item-group>
</v-list>
</v-col>
<!-- Log-out -->
<v-col cols="12" class="px-0 logout-button">
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-logout</v-icon>
Déconnexion
</v-btn>
</v-col>
</v-container>
<v-container style=" overflow-y: hidden;">
<!-- Nav-Btn -->
<v-col cols="12" class="px-0">
<v-list dense class="main-background">
<v-list-item-group>
<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-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item-group>
</v-list>
</v-col>
<!-- Tools -->
<v-col cols="12" class="px-0">
<v-list dense class="d-flex align-start align-center main-background">
<v-list-item-group>
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
<v-btn text class="btn-custom" elevation="0" outlined="false">
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item-group>
</v-list>
</v-col>
<!-- Log-out -->
<v-col cols="12" class="px-0 logout-button">
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-logout</v-icon>
Déconnexion
</v-btn>
</v-col>
</v-container>
</v-row>
<v-row style="height: 1400px;"></v-row>
<!-- Wallet -->
<v-row>
@@ -198,10 +208,11 @@
</v-dialog>
</v-row>
</v-col>
</v-col>
<!-- 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 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>
@@ -221,22 +232,24 @@
<v-row>
<v-spacer></v-spacer>
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
<v-row>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/facebookicon.png"
alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
</a>
</v-row>
<v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
<v-col cols="11" style="margin-top: 1%; margin-bottom: -2%;">
<v-row justify-center align="center">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/facebookicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
</a>
</v-row>
</v-col>
</v-col>
<v-col background-color="primary"></v-col>
</v-row>
@@ -271,7 +284,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>
@@ -284,12 +297,12 @@
<div
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
<v-container>
<iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0"
title="Guillaumem" frameborder="0"
<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: 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
@@ -306,7 +319,60 @@
</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>
</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>
@@ -315,31 +381,33 @@
</v-col>
<!-- "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-container class="sticky-bottom-label" style="max-width: 400px ; bottom: 0; z-index: 1000;">
<!-- Donnation -->
<v-card style="border-radius: 20px;">
<v-container>
<v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
<v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS!
</v-card-title>
</v-row>
<v-spacer style="height: 20px;"></v-spacer>
<v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
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-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
<v-row>
<v-col>
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
<!-- Donnation -->
<v-card style="border-radius: 20px;">
<v-container>
<v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
<v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS!
</v-card-title>
</v-row>
<StripePayment></StripePayment>
</v-container>
</v-card>
</v-container>
</v-card>
</v-container>
<v-container style="height: 1600px;">
</v-container>
</v-col>
<v-spacer>
</v-spacer>
</v-row>
</v-col>
@@ -351,7 +419,7 @@
<!-- "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;">
<!-- Barre cliquable pour ouvrir le drawer -->
@@ -372,14 +440,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"
auto-grow></v-text-field>
<v-btn class="mx-auto">
<v-icon left class="mr-4">
mdi-gift
</v-icon>
Donnez
</v-btn>
<StripePayment></StripePayment>
</v-container>
</v-bottom-sheet>
@@ -398,6 +459,7 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import StripePayment from '../StripePayment.vue';
</script>
<script>
@@ -414,6 +476,7 @@ export default {
tiktokLink: 'tiktok.com',
drawer: false,
drawerbottom: false,
items: [
{ title: 'Item 1' },
{ title: 'Item 2' },
@@ -436,6 +499,16 @@ export default {
<style scoped>
.Hutopy-menu-sticky {
position: sticky;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
margin-top: -40px;
}
.sticky-bottom-label {
position: sticky;
top: 0;
@@ -443,6 +516,7 @@ export default {
left: 0;
width: 100%;
z-index: 1000;
margin-top: 20px;
}
.sticky-top-label {
@@ -457,15 +531,15 @@ export default {
.text-soutiens {
margin-bottom: 15px;
color: white;
font-size: 2rem;
letter-spacing: 10px;
font-size: 1.5rem;
letter-spacing: 7px;
text-align: center;
}
.name-info {
margin-top: -10px;
margin-left: 15%;
font-size: larger
}
.occupation-info {
@@ -599,6 +673,8 @@ export default {
.youtube-card {
margin-left: 2%;
margin-right: 2%;
border-radius: 15px;
background-color: #f4f4f4;
@@ -629,9 +705,11 @@ export default {
.social-container2 {
background-color: #0baab2;
border-bottom-right-radius: 30px;
border-bottom-left-radius:30px;
font-size: 1.4rem;
font-weight: 500;
color: white;
}
.social-container-mobile {
@@ -753,6 +831,10 @@ export default {
font-size: 1rem;
}
.card-youtube {
min-height: 250px;
}
}
@@ -784,6 +866,10 @@ export default {
font-size: 1rem;
}
.card-youtube {
min-height: 330px;
}
}
@@ -813,15 +899,52 @@ export default {
font-size: 1rem;
}
.card-youtube {
min-height: 425px;
}
}
@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;
}
.card-youtube {
min-height: 270px;
}
.Je-soutien-container {
min-width: 300px;
margin-left: -40px;
}
.mobile-profile-picture-creator {
transform: scale(.9) translateY(63px) translateX(-40px);
}
.name-info {
font-size: 1.3rem;
margin-left: 40px;
margin-top: -4px;
}
.social-container {
min-width: 300px;
}
}
@@ -834,11 +957,34 @@ 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;
}
.card-youtube {
min-height: 290px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 350px;
}
.name-info {
font-size: 1.3rem;
margin-left: 50px;
margin-top: -4px;
}
.social-container {
min-width: 300px;
}
@@ -847,29 +993,100 @@ export default {
@media (min-width: 1600px) and (max-width: 1919px) {
.text-soutiens {
font-size: 1.5rem;
font-size: 1.3rem;
}
.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;
}
.card-youtube {
min-height: 355px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 400px;
}
.name-info {
font-size: 1.4rem;
margin-left: 40px;
margin-top: -4px;
}
}
@media (min-width: 1920px) and (max-width: 2559px) {
.text-soutiens {
font-size: 1.5rem;
font-size: 1.3rem;
}
.profile-container {
margin-top: -12%;
margin-top: -160px;
}
.card-youtube {
min-height: 380px;
}
.Je-soutien-container {
min-width: 400px;
}
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(40px) translateX(-10px);
}
.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: 2559px) {}
@media (min-width: 2560px) {
.card-youtube {
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
.name-info {
font-size: 2rem;
}
.social-container {
margin-left: 150px;
}
.social-container2 {
margin-left: 150px;
}
}
</style>