Modification layout de la page Creator (dynamique)
This commit is contained in:
PascalMarchesseault
44
src/layouts/UserProfile.vue
Normal file
44
src/layouts/UserProfile.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<!-- Fiche test pour router -->
|
||||
<template>
|
||||
<div v-if="user">
|
||||
<h1>{{ user.name }}</h1>
|
||||
<p>{{ user.bio }}</p>
|
||||
<!-- Afficher plus de contenu utilisateur ici -->
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Utilisateur non trouvé</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchUser();
|
||||
},
|
||||
watch: {
|
||||
'$route.params.username': 'fetchUser'
|
||||
},
|
||||
methods: {
|
||||
fetchUser() {
|
||||
const username = this.$route.params.username;
|
||||
fetch(`https://api.hutopy.ca/users/${username}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data) {
|
||||
this.user = data;
|
||||
} else {
|
||||
this.user = null;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.user = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -8,22 +8,21 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
|
||||
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
||||
import Transactions from '@/views/tos/Transactions.vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import UserProfile from '../layouts/UserProfile.vue'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
import PaymentCompleted from '../views/PayementCompleted.vue'
|
||||
import SignupView from '../views/SignupView.vue'
|
||||
import UserBrowser from '../views/UsersBrowser.vue'
|
||||
import ContactView from '../views/main/ContactView.vue'
|
||||
import CreatorFolio from '../views/main/CreatorFolio.vue'
|
||||
import HomeView from '../views/main/HomeView.vue'
|
||||
import UserBrowser from '../views/main/UsersBrowser.vue'
|
||||
import YourProfile from '../views/main/YourProfile.vue'
|
||||
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
||||
import Hutopy from '../views/manualusers/HutopyProfile.vue'
|
||||
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
||||
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'main',
|
||||
@@ -34,7 +33,6 @@ const router = createRouter({
|
||||
name: 'creatorfolio',
|
||||
component: CreatorFolio
|
||||
},
|
||||
|
||||
{
|
||||
path: '/paymentcompleted',
|
||||
name: 'PayementCompleted',
|
||||
@@ -90,69 +88,67 @@ const router = createRouter({
|
||||
name: 'guideforcreators',
|
||||
component: GuideForCreators
|
||||
},
|
||||
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: About
|
||||
},
|
||||
|
||||
{
|
||||
path: '/transactions',
|
||||
name: 'transactions',
|
||||
component: Transactions
|
||||
},
|
||||
|
||||
{
|
||||
path: '/Hutopy',
|
||||
name: 'Hutopy',
|
||||
component: Hutopy
|
||||
},
|
||||
|
||||
{
|
||||
path: '/Leffet',
|
||||
name: 'Leffet',
|
||||
component: Leffet
|
||||
},
|
||||
|
||||
{
|
||||
path: '/userbrowser',
|
||||
name: 'userbrowser',
|
||||
component: UserBrowser
|
||||
},
|
||||
|
||||
{
|
||||
path: '/chloebeaugrand',
|
||||
name: 'chloebeaugrand',
|
||||
component: ChloeBeaugrand
|
||||
},
|
||||
|
||||
{
|
||||
path: '/guillaumeaime',
|
||||
name: 'guillaumeaime',
|
||||
component: GuillaumeAime
|
||||
},
|
||||
|
||||
{
|
||||
path: '/mathieucaron',
|
||||
name: 'mathieucaron',
|
||||
component: MathieuCaron
|
||||
},
|
||||
|
||||
{
|
||||
path: '/arps',
|
||||
name: 'arps',
|
||||
component: ARPS
|
||||
},
|
||||
|
||||
{
|
||||
path: '/guillaumeaime',
|
||||
name: 'guillaumeaime',
|
||||
component: GuillaumeAime
|
||||
path: '/:username',
|
||||
name: 'user-profile',
|
||||
component: UserProfile
|
||||
},
|
||||
|
||||
{
|
||||
path: '/creatorFolio',
|
||||
name: 'creatorFolio',
|
||||
component: CreatorFolio
|
||||
}
|
||||
]
|
||||
|
||||
],
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return { top: 0 };
|
||||
}
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<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 cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
@@ -129,90 +129,6 @@
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<!-- <template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
|
||||
elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
||||
<p @click="isActive.value = false">Bourse</p>
|
||||
</v-btn>
|
||||
</template>-->
|
||||
|
||||
<!-- Wallet Modale -->
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card style="border-radius: 30px;">
|
||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||||
<v-icon left size="48">mdi-wallet</v-icon>
|
||||
<v-toolbar title="PORTEFEUILLE"
|
||||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
||||
</div>
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="7">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">#T</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
||||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
@@ -223,7 +139,9 @@
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<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>
|
||||
@@ -282,12 +200,18 @@
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Card youtube balado -->
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
@@ -328,10 +252,14 @@
|
||||
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
|
||||
présenter
|
||||
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
|
||||
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
|
||||
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
|
||||
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la
|
||||
suite,
|
||||
je
|
||||
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à
|
||||
travers
|
||||
le
|
||||
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
|
||||
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de
|
||||
mon
|
||||
agence
|
||||
créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
|
||||
personnelle,
|
||||
@@ -353,138 +281,12 @@
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
NOUVELLE BOUTIQUE À SAINT-HYACINTHE</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> (a intégrer)
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
|
||||
boutique
|
||||
à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
|
||||
le
|
||||
savoir-faire québécois !
|
||||
|
||||
J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
|
||||
Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
|
||||
|
||||
Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
|
||||
Carl
|
||||
pour ce projet!</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; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
C'EST PARTI POUR 2024!</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> (a intégrer)
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
22-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
|
||||
retour au
|
||||
travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
|
||||
lumière les
|
||||
entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
|
||||
n'hésite
|
||||
pas à me contacter.</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; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" 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;">
|
||||
|
||||
@@ -236,7 +236,7 @@
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from './StripePayment.vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
||||
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
||||
let name = 'Hutopy'
|
||||
@@ -3,10 +3,12 @@
|
||||
<body style="background-color:#f4f4f4">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
|
||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
|
||||
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
@@ -38,10 +40,11 @@
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
|
||||
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">User Name</p>
|
||||
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
|
||||
|
||||
<v-form>
|
||||
|
||||
Reference in New Issue
Block a user