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

MainUi - Fixes

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-07 16:21:52 -04:00
parent 2c899923f2
commit ba2e21128f
2 changed files with 330 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/StripePayment.vue
View File

@@ -3,42 +3,41 @@
<v-row> <v-row>
<v-text-field label="Message" <v-text-field label="Message"
style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4"> style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
</v-text-field> </v-text-field>
</v-row> </v-row>
<v-row> <v-row>
<v-col> <v-text-field label="Montant ($)" v-model="price"
<v-text-field label="Montant ($)" v-model="price" style="color: rgb(0, 109, 119); background-color: #f4f4f4"> style="border-radius: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
</v-text-field> </v-text-field>
</v-col> </v-row>
<v-row justify="center"> <v-row justify="center">
<v-btn @click="goPay()" <v-btn @click="goPay()"
style="margin-bottom: 10px; width: 200px; background-color: #6b0065; color: white; font-weight: bold;"> style="margin-bottom: 10px; width: 200px; background-color: #6b0065; color: white; font-weight: bold;">
<v-icon left style="margin-right: 10px;"> <v-icon left style="margin-right: 10px;">
mdi-gift mdi-gift
</v-icon> </v-icon>
Envoyez Envoyez
</v-btn> </v-btn>
</v-col> </v-row>
</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>
<div id="checkout"> <div id="checkout">
<!-- Checkout will insert the payment form here --> <!-- Checkout will insert the payment form here -->
</div> </div>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn> <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</v-container> </v-container>

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

@@ -2,16 +2,15 @@
<div style="background-color: #f4f4f4;"> <div style="background-color: #f4f4f4;">
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<!-- Bannière -->
<v-row class="fluid" style="margin-top: -50px; position: relative; z-index: 0;"> <!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
<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>
<!-- "PurpleLine" --> <!-- "PurpleLine" -->
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"> <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
@@ -127,7 +126,6 @@
<!-- Tools --> <!-- Tools -->
<v-col cols="12" class="px-0"> <v-col cols="12" class="px-0">
<v-list dense class="d-flex align-start align-center main-background"> <v-list dense class="d-flex align-start align-center main-background">
<v-list-item-group> <v-list-item-group>
<router-link v-for="(item, index) in tools" :key="index" :to="item.link"> <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
<v-btn text class="btn-custom" elevation="0" outlined="false"> <v-btn text class="btn-custom" elevation="0" outlined="false">
@@ -266,26 +264,22 @@
<v-row> <v-row>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;"> <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
<v-col cols="11" style="margin-top: 1%; margin-bottom: -2%;"> <v-row>
<v-row justify-center align="center"> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <img class="socialicons invert-color" src="../../../images/facebookicon.png"
<img class="socialicons invert-color" src="../../../images/facebookicon.png" alt="Description image 2">
alt="Description image 2"> </a>
</a> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
<img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2"> </a>
</a> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
<img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2"> </a>
</a> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
<img class="socialicons invert-color" src="../../../images/tiktok.png" </a>
alt="Description image 2"> </v-row>
</a>
</v-row>
</v-col>
</v-col> </v-col>
<v-col background-color="primary"></v-col> <v-col background-color="primary"></v-col>
</v-row> </v-row>
@@ -416,38 +410,32 @@
</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>
<!-- Donnation --> <v-col>
<v-card style="border-radius: 20px;"> <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
<v-container> <!-- Donnation -->
<v-row class="mb-0" <v-card style="border-radius: 20px;">
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;"> <v-container>
<v-card-title class="text-soutiens" style="margin-top: 15px;"> <v-row class="mb-0"
JE SOUTIENS! style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
</v-card-title> <v-card-title class="text-soutiens" style="margin-top: 15px;">
</v-row> JE SOUTIENS!
<v-spacer style="height: 20px;"></v-spacer> </v-card-title>
<v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3" </v-row>
auto-grow></v-textarea>
<v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3" <StripePayment></StripePayment>
auto-grow></v-text-field> </v-container>
<v-btn block class="ma-auto" style="width: 200px;"> </v-card>
<v-icon left>
mdi-gift
</v-icon>
Donnez
</v-btn>
</v-container> </v-container>
</v-card> <v-container style="height: 1600px;">
</v-container> </v-container>
</v-col>
<v-spacer>
</v-spacer>
</v-row>
</v-col> </v-col>
</v-row> </v-row>
<!-- "Mobile" Donation --> <!-- "Mobile" Donation -->
@@ -467,8 +455,6 @@
<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>
<v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
auto-grow></v-textarea>
<StripePayment></StripePayment> <StripePayment></StripePayment>
</v-container> </v-container>
</v-bottom-sheet> </v-bottom-sheet>
@@ -488,6 +474,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>
@@ -733,11 +720,9 @@ export default {
.social-container2 { .social-container2 {
background-color: #0baab2; background-color: #0baab2;
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500; font-weight: 500;
color: white; color: white;
} }
.social-container-mobile { .social-container-mobile {
@@ -884,6 +869,16 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 250px;
}
.name-info-mobile {
font-size: 1.6rem;
}
} }
@@ -916,6 +911,13 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 330px;
}
} }
@@ -953,13 +955,72 @@ export default {
@media (min-width: 960px) and (max-width: 1280px) { @media (min-width: 960px) and (max-width: 1280px) {
.middle-col {
margin-left: -30px;
}
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container { .profile-container {
margin-top: -16%; margin-top: -185px;
min-width: 480px
}
.card-youtube {
min-height: 270px;
}
.Je-soutien-container {
min-width: 325px;
margin-left: -35px;
} }
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(25%) translateX(-50px);
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
margin-top: -6px
}
.occupation-info {
margin-left: 40px;
margin-top: -8px
}
.social-container {
margin-left: 80px;
min-width: 270px;
max-height: 40px
}
.social-container2 {
margin-left: 50px;
min-width: 250px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
} }
@@ -970,14 +1031,62 @@ export default {
} }
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.2) translateY(25px) translateX(-8px); transform: scale(1.3) translateY(25%) translateX(-50px);
} }
.profile-container { .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.2rem;
margin-left: 20px;
margin-top: -6px
}
.social-container {
margin-left: 90px;
min-width: 350;
max-height: 40px
}
.occupation-info {
margin-left: 70px;
margin-top: -8px
}
.social-container2 {
margin-left: 40px;
min-width: 290px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
} }
@@ -988,13 +1097,52 @@ export default {
} }
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.3) translateY(25px) translateX(-5px); transform: scale(1.4) translateY(25%) translateX(-40px);
} }
.profile-container { .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.5rem;
margin-top: -4px;
margin-left: 35px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 75px;
margin-top: -2px
}
.social-container2 {
margin-left: 70px;
min-width: 300px;
}
} }
@media (min-width: 1920px) and (max-width: 2559px) { @media (min-width: 1920px) and (max-width: 2559px) {
@@ -1004,10 +1152,98 @@ export default {
} }
.profile-container { .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.4) translateY(25%) translateX(-40px);
}
.name-info {
font-size: 1.5rem;
margin-left: 35px;
margin-top: -4px;
}
.social-container {
margin-left: 100px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 110px;
margin-top: -4px
}
.social-container2 {
margin-left: 30px;
min-width: 360px;
}
.socialicons {
width: 38px;
max-width: 100px;
margin-top: 13px;
margin-left: 40px;
}
} }
@media (min-width: 2559px) {} @media (min-width: 2560px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px);
}
.card-youtube {
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
.name-info {
font-size: 2rem;
}
.social-container {
margin-left: 140px;
}
.social-container2 {
margin-left: 130px;
}
.occupation-info {
font-size: 1.5rem;
margin-left: 65px;
margin-top: -6px
}
.socialicons {
width: 45px;
max-width: 100px;
margin-top: 15px;
margin-left: 40px;
}
}
</style> </style>