Adds About for Creators
This commit is contained in:
Jonathan Bourdon
55
src/views/creators/CreatorAbout.vue
Normal file
55
src/views/creators/CreatorAbout.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
||||
@click="AboutUs = true"
|
||||
>
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">
|
||||
mdi-information
|
||||
</v-icon>
|
||||
</button>
|
||||
|
||||
<v-dialog v-model="AboutUs" max-width="500px">
|
||||
<v-card>
|
||||
|
||||
<v-card-title>
|
||||
{{ creator.about.title }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="scrollable-content">
|
||||
{{ creator.about.description }}
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
const AboutUs = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollable-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollable-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="py-8" ref="container">
|
||||
<div class="text-center text-2xl py-4 border-t-4">À propos de vous</div>
|
||||
<div class="px-5 relative">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Prénom</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.firstName" label="Prénom" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Nom</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.lastName" label="Nom" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Occupation</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.occupation" label="Occupation" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Courriel</label>
|
||||
</div>
|
||||
<v-text-field disabled v-model="user.email" label="Courriel" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Téléphone</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.phoneNumber" label="Téléphone" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Date de naissance (JJ/MM/AAAA)</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.birthDate" label="Date de naissance" variant="outlined"
|
||||
:rules="[dateRule]"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Pays</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.country" label="Pays" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Ville</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.city" label="Ville" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Adresse</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.address" label="Adresse" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Titre A propos</label>
|
||||
</div>
|
||||
<v-text-field v-model="user.about" label="Titre A propos" variant="outlined"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Description</label>
|
||||
</div>
|
||||
<v-textarea v-model="user.description" label="Description" variant="outlined"></v-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
user
|
||||
});
|
||||
|
||||
const dateRule = value => {
|
||||
const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
|
||||
return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Votre style ici */
|
||||
</style>
|
||||
@@ -60,13 +60,13 @@
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex flex-wrap items-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
|
||||
<AboutYou :creator="creator"></AboutYou>
|
||||
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
|
||||
<publish-content-button :creator="creator"/>
|
||||
|
||||
|
||||
<publish-content-button :creator="creator"></publish-content-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,7 +74,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
||||
@click="AboutUs = true"
|
||||
>
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
||||
</button>
|
||||
|
||||
<v-dialog v-model="AboutUs" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
À propos
|
||||
<br><br>
|
||||
<div class="flex justify-center">{{ creator.about }}</div>
|
||||
<br>
|
||||
</v-card-title>
|
||||
<v-card-text class="scrollable-content">
|
||||
{{ creator.description }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const AboutUs = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
creator: { type: Object, required: true },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
.scrollable-content::-webkit-scrollbar-thumb {
|
||||
background-color: ${props.creator.colors.menu};
|
||||
border-radius: 10px;
|
||||
}
|
||||
.scrollable-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: ${shadeColor(props.creator.colors.accent, -10)};
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
|
||||
function shadeColor(color, percent) {
|
||||
const f = parseInt(color.slice(1), 16),
|
||||
t = percent < 0 ? 0 : 255,
|
||||
p = percent < 0 ? percent * -1 : percent,
|
||||
R = f >> 16,
|
||||
G = (f >> 8) & 0x00ff,
|
||||
B = f & 0x0000ff;
|
||||
return (
|
||||
"#" +
|
||||
(
|
||||
0x1000000 +
|
||||
(Math.round((t - R) * p) + R) * 0x10000 +
|
||||
(Math.round((t - G) * p) + G) * 0x100 +
|
||||
(Math.round((t - B) * p) + B)
|
||||
)
|
||||
.toString(16)
|
||||
.slice(1)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollable-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollable-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.transparent-btn {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user