Modification des pages afin qu'elle soient plus reactive.
This commit is contained in:
PascalMarchesseault
@@ -2,7 +2,7 @@
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
|
||||
|
||||
<!-- Banner + Profile-->
|
||||
<div style="margin-top: -1.6%;">
|
||||
@@ -10,192 +10,186 @@
|
||||
<v-col cols="12">
|
||||
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
|
||||
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-card class="label-paiement-color"
|
||||
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-container class="pa-0">
|
||||
<v-container class="pa-0" style="margin-left: 1%; margin: 0;">
|
||||
<v-row no-gutters class="justify-center">
|
||||
<!-- Left menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
<v-col cols="2" class="mx-0" style="min-width: 300px;">
|
||||
<v-container style="position: sticky; top: 0;">
|
||||
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
|
||||
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
|
||||
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -3%;">mdi-account-plus</v-icon>
|
||||
<div style="margin-left: 6%;">Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%;">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text="Transition from Top" block size="x-large"
|
||||
style="margin-left: -8%; background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div style="margin-left: 10%;" @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
<v-icon left class="icon-size">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<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-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-account-plus</v-icon>
|
||||
<div>Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%; ">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<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: 25pxo; 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: 25pxo; margin-top: .5%; max-height: 450px;">
|
||||
|
||||
|
||||
|
||||
<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 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>
|
||||
<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-col cols="5" class="text-truncate">Good Job</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: 25pxo; 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: 25pxo; 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-card>
|
||||
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- center menu -->
|
||||
|
||||
<v-col cols="7" class="mx-0">
|
||||
|
||||
|
||||
<v-container>
|
||||
<v-container style="min-width: 800px ;">
|
||||
|
||||
<v-col>
|
||||
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
|
||||
@@ -286,9 +280,9 @@
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
PODCAST #01</h1>
|
||||
@@ -376,9 +370,9 @@
|
||||
</v-card>
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
@@ -471,7 +465,7 @@
|
||||
|
||||
<!-- tips menu -->
|
||||
<v-card
|
||||
style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
|
||||
<v-container class="text-center d-flex align-center justify-center"
|
||||
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
|
||||
|
||||
Reference in New Issue
Block a user