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

More mobile styling fixes

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-17 13:51:59 -05:00
parent 98a1e3126b
commit 24f5d79a55
9 changed files with 234 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,198 +1,13 @@
<template>
<div class="flex flex-col min-h-screen w-[1024px]">
<!-- Modal -->
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
<fullname-dialog
:firstname="userProfileStore.user.firstname"
:lastname="userProfileStore.user.lastname"
@close="handleCloseEditFullname"
@save="handleSaveEditFullname"
></fullname-dialog>
</v-dialog>
<v-dialog v-model="dialogEditAliasShown" max-width="800px">
<alias-dialog
:alias="userProfileStore.user.alias"
@close="handleCloseEditAlias"
@save="handleSaveEditAlias"
></alias-dialog>
</v-dialog>
<!-- Creator Section (integrated directly) -->
<v-dialog v-model="dialogShown" max-width="800px">
<component
:is="currentComponent"
:creator="creatorProfileStore.creator"
@closeRequested="closeDialog"
></component>
</v-dialog>
<div class="space-y-6 p-4">
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.informations') }}
</div>
<div class="content">
<button
class="action"
@click="openEditFullname">
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
<span class="value">{{ userProfileStore.fullname }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button
class="action"
@click="openEditAlias">
<span class="label">{{ $t('personnalinformation.alias') }}</span>
<span class="value">{{ userProfileStore.user.alias }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<!-- Phone & email -->
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.contactdetails') }}
</div>
<div class="content">
<button class="action" @click="openDialog('EmailDialog')">
<span class="label">{{ $t('personnalinformation.email') }}</span>
<span class="value">{{ userProfileStore.user.email }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<template v-if="creatorProfileStore.creator !== undefined">
<div class="card">
<div class="card-title">
{{ $t('creatorinfopage.informations') }}
</div>
<div class="content">
<!-- NAME -->
<button class="action">
<span class="label">{{ $t('creatorinfopage.name') }}</span>
<span class="value">{{ creatorProfileStore.creator.name }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- TITLE -->
<button class="action" @click="openDialog('ChangeTitleDialog')">
<span class="label">{{ $t('creatorinfopage.title') }}</span>
<span class="value">{{ creatorProfileStore.creator.title }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- STRIPE -->
<button class="action" @click="openDialog('ChangeStripeIdDialog')">
<span class="label">Stripe Account ID</span>
<span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<div class="card">
<div class="card-title">
{{ $t('creatorinfopage.socialnetwork') }}
</div>
<div class="content">
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<facebook class="social-icon"></facebook>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<instagram class="social-icon"></instagram>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<x class="social-icon"></x>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<linkedin class="social-icon"></linkedin>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<tiktok class="social-icon"></tiktok>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<youtube class="social-icon"></youtube>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<reddit class="social-icon"></reddit>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<web class="social-icon"></web>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
</template>
</div>
</div>
</template>
<script setup>
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
<script setup>
import {ref} from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
@@ -280,14 +95,198 @@ const closeDialog = () => {
};
</script>
<template>
<div class="min-h-screen w-full">
<v-dialog v-model="dialogEditFullnameShown">
<fullname-dialog
:firstname="userProfileStore.user.firstname"
:lastname="userProfileStore.user.lastname"
@close="handleCloseEditFullname"
@save="handleSaveEditFullname"
></fullname-dialog>
</v-dialog>
<v-dialog v-model="dialogEditAliasShown">
<alias-dialog
:alias="userProfileStore.user.alias"
@close="handleCloseEditAlias"
@save="handleSaveEditAlias"
></alias-dialog>
</v-dialog>
<v-dialog v-model="dialogShown">
<component
:is="currentComponent"
:creator="creatorProfileStore.creator"
@closeRequested="closeDialog"
></component>
</v-dialog>
<div class="flex flex-col items-center gap-4 m-4">
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.informations') }}
</div>
<div class="content">
<button
class="action"
@click="openEditFullname">
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
<span class="value">{{ userProfileStore.fullname }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button
class="action"
@click="openEditAlias">
<span class="label">{{ $t('personnalinformation.alias') }}</span>
<span class="value">{{ userProfileStore.user.alias }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<div class="card">
<div class="card-title">
{{ $t('personnalinformation.contactdetails') }}
</div>
<div class="content">
<button class="action" @click="openDialog('EmailDialog')">
<span class="label">{{ $t('personnalinformation.email') }}</span>
<span class="value">{{ userProfileStore.user.email }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<template v-if="creatorProfileStore.creator !== undefined">
<div class="card">
<div class="card-title">
{{ $t('creatorinfopage.informations') }}
</div>
<div class="content">
<!-- NAME -->
<button class="action">
<span class="label">{{ $t('creatorinfopage.name') }}</span>
<span class="value">{{ creatorProfileStore.creator.name }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- TITLE -->
<button class="action" @click="openDialog('ChangeTitleDialog')">
<span class="label">{{ $t('creatorinfopage.title') }}</span>
<span class="value">{{ creatorProfileStore.creator.title }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<!-- STRIPE -->
<button class="action" @click="openDialog('ChangeStripeIdDialog')">
<span class="label">Stripe Account ID</span>
<span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
<div class="card">
<div class="card-title">
{{ $t('creatorinfopage.socialnetwork') }}
</div>
<div>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<facebook class="social-icon"></facebook>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<instagram class="social-icon"></instagram>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<x class="social-icon"></x>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<linkedin class="social-icon"></linkedin>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<tiktok class="social-icon"></tiktok>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<youtube class="social-icon"></youtube>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<reddit class="social-icon"></reddit>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label">
<web class="social-icon"></web>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
</div>
</div>
</template>
</div>
</div>
</template>
<style scoped>
.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;
@apply p-2 flex items-center w-full mb-2;
@apply rounded-md;
@apply transition duration-200 ease-in-out;
@apply hover:bg-hutopyPrimary active:bg-hutopySecondary;
}
.label {
@apply flex-none min-w-32 text-left;
@apply flex-none min-w-40 text-left;
}
.social-icon {
@@ -296,6 +295,7 @@ const closeDialog = () => {
.value {
@apply flex-auto text-left pr-6 capitalize;
@apply break-words overflow-auto;
}
.chevron {

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

@@ -1,6 +1,6 @@
<template>
<div class="card">
<div class="card dialog">
<div class="card-title">
{{ $t('personnalinformation.alias') }}

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

@@ -1,5 +1,5 @@
<template>
<div class="card">
<div class="card dialog">
<div class="card-title">
Courriel
</div>

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

@@ -1,7 +1,21 @@
<template>
<script setup>
import {ref} from 'vue';
<div class="card">
<div class="card-title">
const props = defineProps(['firstname', 'lastname'])
const emit = defineEmits(['close', 'save'])
const firstname = ref(props.firstname)
const lastname = ref(props.lastname)
const requestClose = () => emit('close')
const requestSave = () => emit('save', firstname.value, lastname.value)
</script>
<template>
<div class="card dialog">
<div class="card-title">
{{ $t('personnalinformation.fullname') }}
</div>
@@ -36,19 +50,4 @@
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
const props = defineProps(['firstname', 'lastname'])
const emit = defineEmits(['close', 'save'])
const firstname = ref(props.firstname)
const lastname = ref(props.lastname)
const requestClose = () => emit('close')
const requestSave = () => emit('save', firstname.value, lastname.value)
</script>
</template>

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

@@ -33,7 +33,7 @@ const cancel = () => {
</script>
<template>
<div class="card">
<div class="card dialog">
<div class="card-title">
Modifier le Stripe ID
</div>

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

@@ -36,7 +36,7 @@ const cancel = () => {
</script>
<template>
<div class="card">
<div class="card dialog">
<div class="card-title">
Modifier le Titre

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

@@ -66,7 +66,7 @@ const cancel = () => {
<template>
<div class="card">
<div class="card dialog">
<div class="card-title">
Reseaux Sociaux
@@ -184,31 +184,11 @@ const cancel = () => {
}
.input-field {
@apply border border-gray-400;
/* Persistent border */
@apply rounded-lg;
/* Rounded corners */
@apply p-3;
/* Padding inside the input */
@apply flex-1;
/* Make input take up available space */
@apply text-gray-900;
/* Ensure text is visible */
@apply bg-white;
/* Background similar to Vuetify */
transition: border-color 0.2s; /* Smooth border effect */
}
/* Border highlight effect similar to Vuetify */
.input-field:focus {
border-width: 2px;
border-color: var(--hutopy-primary); /* Vuetify primary color (adjust if needed) */
}
/* Disable auto styles on input */
.input-field::placeholder {
color: #9e9e9e; /* Light gray for placeholder */
opacity: 1;
@apply w-full p-4;
@apply rounded-sm;
@apply transition duration-200;
@apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
@apply placeholder:text-[#6D6C70]
}
</style>