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

Big cleanup for styling

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-12 13:38:29 -05:00
parent d6f3610d17
commit aba9ba7658
20 changed files with 519 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/views/profile/ProfilePage.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
<div class="flex flex-col min-h-screen w-[1024px]">
<!-- Modal -->
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
<fullname-dialog
@@ -20,21 +20,19 @@
</v-dialog>
<!-- Creator Section (integrated directly) -->
<v-dialog v-model="dialog" max-width="800px">
<div class="card">
<v-dialog v-model="dialogShown" max-width="800px">
<component
:is="currentComponent"
:creator="creatorProfileStore.creator"
@closeRequested="closeDialog"
></component>
</div>
</v-dialog>
<div class="space-y-6 p-4">
<div class="card">
<div class="title">
<div class="card-title">
{{ $t('personnalinformation.informations') }}
</div>
@@ -61,7 +59,7 @@
<!-- Phone & email -->
<div class="card">
<div class="title">
<div class="card-title">
{{ $t('personnalinformation.contactdetails') }}
</div>
@@ -77,7 +75,7 @@
<template v-if="creatorProfileStore.creator !== undefined">
<div class="card">
<div class="title">
<div class="card-title">
{{ $t('creatorinfopage.informations') }}
</div>
<div class="content">
@@ -107,7 +105,7 @@
</div>
<div class="card">
<div class="title">
<div class="card-title">
{{ $t('creatorinfopage.socialnetwork') }}
</div>
<div class="content">
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
const creatorProfileStore = useCreatorProfileStore();
const dialog = ref(false);
const dialogShown = ref(false);
const currentComponent = ref('');
const componentsMap = {
@@ -245,34 +243,22 @@ const componentsMap = {
function requestCancel() {
currentComponent.value = null;
dialog.value = false;
dialogShown.value = false;
}
const openDialog = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
dialogShown.value = true;
};
const closeDialog = () => {
currentComponent.value = null;
dialog.value = false;
dialogShown.value = false;
};
</script>
<style scoped>
.card {
@apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
}
.title {
@apply text-lg font-semibold text-hOnSecondary mb-2;
}
.content {
@apply text-base font-semibold text-hOnSurface flex flex-col w-full;
}
.action {
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
}

33
frontend/src/views/profile/account/AliasDialog.vue
View File

@@ -1,10 +1,12 @@
<template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.alias') }}
</v-card-title>
<div class="m-4">
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.alias') }}
</div>
<div class="card-entry">
<v-text-field
variant="outlined"
v-model="alias"
@@ -12,15 +14,22 @@
></v-text-field>
</div>
<v-card-actions>
<v-btn variant="plain" @click="requestClose">
<div class="card-actions">
<button class="secondary"
@click="requestClose">
Annuler
</v-btn>
<v-btn color="#A6147D" @click="requestSave">
</button>
<button class="primary"
@click="requestSave">
Enregistrer
</v-btn>
</v-card-actions>
</v-card>
</button>
</div>
</div>
</template>
<script setup>

39
frontend/src/views/profile/account/EmailDialog.vue
View File

@@ -1,23 +1,28 @@
<template>
<div class="pb-5 text-2xl">Courriel</div>
<div class="card">
<div class="card-title">
Courriel
</div>
<div class="m-4">
<v-text-field
variant="outlined"
v-model="email"
label="Votre courriel"
></v-text-field>
<div class="card-entry">
<v-text-field
v-model="email"
label="Votre courriel"
variant="outlined"
></v-text-field>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">
Annuler
</v-btn>
<v-btn color="#A6147D" @click="save">
Enregistrer
</v-btn>
</div>
</template>
<script setup>

33
frontend/src/views/profile/account/FullnameDialog.vue
View File

@@ -1,16 +1,19 @@
<template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.fullname') }}
</v-card-title>
<div class="m-4">
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.fullname') }}
</div>
<div class="card-entry">
<v-text-field
variant="outlined"
v-model="firstname"
:label="$t('personnalinformation.firstname')"
></v-text-field>
</div>
<div class="card-entry">
<v-text-field
variant="outlined"
v-model="lastname"
@@ -18,15 +21,21 @@
></v-text-field>
</div>
<v-card-actions>
<v-btn variant="plain" @click="requestClose">
<div class="card-actions">
<button class="secondary"
@click="requestClose">
Annuler
</v-btn>
<v-btn color="#A6147D" @click="requestSave">
</button>
<button class="primary"
@click="requestSave">
Enregistrer
</v-btn>
</v-card-actions>
</v-card>
</button>
</div>
</div>
</template>
<script setup>

44
frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { useClient } from '@/plugins/api.js';
import { ref } from 'vue';
import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
const props = defineProps({
creator: {
@@ -33,27 +33,33 @@ const cancel = () => {
</script>
<template>
<div class="pb-5 text-2xl">Modifier le Stripe ID</div>
<div class="flex flex-col space-y-4">
<v-text-field
variant="outlined"
v-model="stripeId"
label="Stripe Id"
outlined
></v-text-field>
<div class="card">
<div class="card-title">
Modifier le Stripe ID
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
<div class="card-entry">
<v-text-field
v-model="stripeId"
label="Stripe Id"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div>
</div>
</template>
<style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style>

40
frontend/src/views/profile/creators/ChangeTitleDialog.vue
View File

@@ -36,28 +36,34 @@ const cancel = () => {
</script>
<template>
<div class="pb-5 text-2xl">Modifier le Titre</div>
<div class="flex flex-col space-y-4">
<v-text-field
variant="outlined"
v-model="title"
label="Titre"
outlined
></v-text-field>
<div class="card">
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
<div class="card-title">
Modifier le Titre
</div>
<div class="card-entry">
<v-text-field
v-model="title"
label="Titre"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div>
</div>
</template>
<style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style>

203
frontend/src/views/profile/creators/SocialsDialog.vue
View File

@@ -59,7 +59,7 @@ const cancel = () => {
<style scoped>
.icon {
width: 28px;
height: 30px;
fill: #000000;
@@ -67,96 +67,127 @@ const cancel = () => {
</style>
<template>
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
<v-text-field
variant="outlined"
v-model="facebookUrl"
label="Lien Facebook"
outlined
></v-text-field>
</div>
<div class="card">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
<v-text-field
variant="outlined"
v-model="instagramUrl"
label="Lien Instagram"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
<v-text-field
variant="outlined"
v-model="linkedInUrl"
label="Lien LinkedIn"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
<v-text-field
variant="outlined"
v-model="redditUrl"
label="Lien Reddit"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon></XIcon>
</div>
<v-text-field
variant="outlined"
v-model="tikTokUrl"
label="Lien TikTok"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-web</v-icon>
<v-text-field
variant="outlined"
v-model="websiteUrl"
label="Lien site web"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon class="icon"></XIcon>
<div class="card-title">
Reseaux Sociaux
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
<v-text-field
v-model="facebookUrl"
label="Lien Facebook"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
<v-text-field
v-model="instagramUrl"
label="Lien Instagram"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
<v-text-field
v-model="linkedInUrl"
label="Lien LinkedIn"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
<v-text-field
v-model="redditUrl"
label="Lien Reddit"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon></XIcon>
</div>
<v-text-field
v-model="tikTokUrl"
label="Lien TikTok"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-web</v-icon>
<v-text-field
v-model="websiteUrl"
label="Lien site web"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon class="icon"></XIcon>
</div>
<v-text-field
v-model="xUrl"
label="Lien X"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
<v-text-field
v-model="youtubeUrl"
label="Lien Youtube"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
<v-text-field
variant="outlined"
v-model="xUrl"
label="Lien X"
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
<v-text-field
variant="outlined"
v-model="youtubeUrl"
label="Lien Youtube"
outlined
></v-text-field>
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
</div>
</template>