More mobile styling fixes
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user