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-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-row>
<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-text-field label="Montant ($)" v-model="price"
style="border-radius: 10px; 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-col>
</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 block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<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 block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</v-container>

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

@@ -2,16 +2,15 @@
<div style="background-color: #f4f4f4;">
<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-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>
<!-- "PurpleLine" -->
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
@@ -127,7 +126,6 @@
<!-- 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">
@@ -266,26 +264,22 @@
<v-row>
<v-spacer></v-spacer>
<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 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>
<v-col background-color="primary"></v-col>
</v-row>
@@ -416,38 +410,32 @@
</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>
</v-row>
<!-- "Mobile" Donation -->
@@ -467,8 +455,6 @@
<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;">
<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>
</v-container>
</v-bottom-sheet>
@@ -488,6 +474,7 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import StripePayment from '../StripePayment.vue';
</script>
<script>
@@ -733,11 +720,9 @@ 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 {
@@ -884,6 +869,16 @@ export default {
font-size: 1rem;
}
.card-youtube {
min-height: 250px;
}
.name-info-mobile {
font-size: 1.6rem;
}
}
@@ -916,6 +911,13 @@ export default {
font-size: 1rem;
}
.card-youtube {
min-height: 330px;
}
}
@@ -953,13 +955,72 @@ export default {
@media (min-width: 960px) 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;
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 {
transform: scale(1.2) translateY(25px) translateX(-8px);
transform: scale(1.3) translateY(25%) translateX(-50px);
}
.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 {
transform: scale(1.3) translateY(25px) translateX(-5px);
transform: scale(1.4) translateY(25%) translateX(-40px);
}
.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) {
@@ -1004,10 +1152,98 @@ export default {
}
.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>