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

Création de la fiche profile

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-14 14:57:13 -04:00
parent 81cce3e496
commit 08fefa4d44
1 changed files with 103 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/main/YourProfile.vue
View File

@@ -1,16 +1,112 @@
<template>
<body style="background-color:#f4f4f4">
<DefaultLayout></DefaultLayout>
<main class="top-aligned-column">
<div class="center-column column">
<p>YourProfile</p>
</div>
</main>
<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>
</v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
<v-col cols="12" class="text-right">
<v-btn style="margin-right: 3%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
</v-col>
</v-row>
<v-row justify="center">
</v-row>
<v-container style="max-width: 800px;" class="d-flex justify-center align-center">
<v-container>
<v-row>
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
<v-row style="margin-bottom: 20px;">
<v-spacer></v-spacer>
<v-col style="margin-top: -70px;">
<v-row>
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-row>
<v-col>
<v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
<v-icon>mdi-pencil</v-icon>
</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: 50px; font-size: 1.2rem">Informations personnelles</p>
<v-form @submit.prevent="updateProfile">
<v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
<v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
<v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
<v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
<v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
</v-col>
</v-col>
</v-row>
</v-container>
</v-container>
<FooterLayout></FooterLayout>
</body>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
const profilePictureUrl = ref('../../../images/guillaume.png');
const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
let userName = 'Guillaume Mousseau';
const firstName = ref('Votre prénom');
const lastName = ref('Votre nom');
const description = ref('Votre description');
const password = ref('Votre mot de passe');
const isEditing = ref(false);
const editProfilePicture = () => {
// Mettez ici la logique pour changer la photo de profil
};
const editBannerImage = () => {
// Mettez ici la logique pour changer la bannière de profil
};
const updateProfile = () => {
// Mettez ici la logique pour mettre à jour le profil
};
</script>
<style>
.your-profile-picture {
width: 300px;
border-radius: 40px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.row-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.col-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
</style>