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

Fixes tailwind and add models modifications

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-27 01:33:36 -04:00
parent af42b0c79b
commit 8f9dee1b5f
6 changed files with 198 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
View File

@@ -1,11 +1,66 @@
<script setup>
</script>
<template>
Banner Picker
<template>
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Sélectionne ta bannière</h2>
<img
@click="openModal('BannerPicker')"
src="/images/hutopymedia/banners/tutorialbanner.png"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner"
>
<v-file-input
accept="image/*"
label="File input"
></v-file-input>
</div>
</template>
<style scoped>
<script setup>
import { ref } from 'vue';
</style>
const bannerUrl = ref(null);
const onFileChange = (event) => {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
bannerUrl.value = e.target.result;
};
reader.readAsDataURL(file);
} else {
alert('Veuillez sélectionner une image.');
}
};
</script>
<style scoped>
.p-4 {
padding: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.font-semibold {
font-weight: 600;
}
.w-full {
width: 100%;
}
.h-auto {
height: auto;
}
.rounded {
border-radius: 0.25rem;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>

24
src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
View File

@@ -1,11 +1,23 @@
<script setup>
<template>
<div>
<h2 class="title text-2xl">Couleur contour</h2>
</script>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
<template>
Border Color
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<style scoped>
<script setup>
</script>
</style>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

27
src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
View File

@@ -1,11 +1,26 @@
<script setup>
<template>
<div>
<h2 class="title text-2xl">Couleur de la bannière inférieur</h2>
</script>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
<template>
ColorBottomBanner
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<style scoped>
<script setup>
import { ref } from 'vue';
</style>
const color = ref('#FF0000');
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

24
src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
View File

@@ -1,11 +1,23 @@
<script setup>
<template>
<div>
<h2 class="title text-2xl">Couleur des Menus</h2>
</script>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
<template>
Menu Color
</div>
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<style scoped>
<script setup>
</script>
</style>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

29
src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
View File

@@ -1,11 +1,26 @@
<script setup>
<template>
<div>
<h2 class="title text-2xl">Couleur de la bannière supérieure</h2>
<div class="flex justify-center"><v-color-picker></v-color-picker></div>
</div>
</script>
<template>
Color Top Banner
<div class="flex justify-end space-x-4 mt-5">
<v-btn variant="plain" color="black">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn>
</div>
</template>
<style scoped>
<script setup>
import { ref } from 'vue';
</style>
const color = ref('#FF0000');
</script>
<style scoped>
.title {
text-align: center;
margin-bottom: 16px;
}
</style>

64
src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue
View File

@@ -1,11 +1,59 @@
<script setup>
</script>
<template>
Profile picture Picker
<template>
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Choisir Image de profil</h2>
<input type="file" @change="onFileChange" accept="image/*" class="mb-4" />
<div v-if="bannerUrl" class="mt-4">
<h3 class="text-md font-semibold mb-2">Aperçu de la bannière:</h3>
<img :src="bannerUrl" alt="Banner Preview" class="w-full h-auto rounded shadow" />
</div>
</div>
</template>
<style scoped>
<script setup>
import { ref } from 'vue';
</style>
const bannerUrl = ref(null);
const onFileChange = (event) => {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
bannerUrl.value = e.target.result;
};
reader.readAsDataURL(file);
} else {
alert('Veuillez sélectionner une image.');
}
};
</script>
<style scoped>
.p-4 {
padding: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.font-semibold {
font-weight: 600;
}
.w-full {
width: 100%;
}
.h-auto {
height: auto;
}
.rounded {
border-radius: 0.25rem;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>