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

Reworking the layouts to allow for the new design

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-09-22 00:51:22 -04:00
parent b3fec80607
commit 3cfb3951e3
51 changed files with 819 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/profile/creators/CreatorPage.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import XIcon from '@/assets/icons/x.svg'
import {computed, ref} from 'vue'
import {useUserStore} from "@/stores/userStore.js"
import Socials from './Socials.vue'
@@ -84,19 +85,19 @@ const closeDialog = () => {
<div class="flex flex-col items-center w-full">
<h1 class="uppercase pb-5 text-2xl">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
{{$t('creatorinfopage.pageinformation')}}
{{ $t('creatorinfopage.pageinformation') }}
</h1>
<div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
<div class="my-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.informations')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div>
<div class="flex flex-col w-full">
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.name')}}</span>
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span>
<span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -106,7 +107,7 @@ const closeDialog = () => {
<button
@click="openDialog('About')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.title')}}</span>
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.title') }}</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -116,7 +117,7 @@ const closeDialog = () => {
<button
@click="openDialog('About')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl ">
<span class="pa-2 min-w-32 text-left">{{$t('creatorinfopage.description')}}</span>
<span class="pa-2 min-w-32 text-left">{{ $t('creatorinfopage.description') }}</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -126,7 +127,7 @@ const closeDialog = () => {
</div>
<div class="border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.banner&profile')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
<div class="flex flex-col w-full">
<button
@@ -168,7 +169,7 @@ const closeDialog = () => {
@click="openDialog('ColorsPicker', 'accent')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
<span class="flex-auto text-left pr-6">{{$t('creatorinfopage.borderpicturecolor')}}</span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
@@ -178,7 +179,7 @@ const closeDialog = () => {
@click="openDialog('ColorsPicker', 'menu')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
<span class="flex-auto text-left pr-6">{{$t('creatorinfopage.menucolor')}}</span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
@@ -188,7 +189,7 @@ const closeDialog = () => {
<div class="mt-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.socialnetwork')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div>
<div class="flex flex-col w-full">
<button
@@ -214,8 +215,9 @@ const closeDialog = () => {
<button
@click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/x.svg" width="23px"
height="23px"></span>
<span class="flex-none pa-2 w-6 h-6 text-left">
<XIcon></XIcon>
</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -236,7 +238,7 @@ const closeDialog = () => {
@click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
<span class="flex-none pa-2 min-w-32 text-left">
<img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
<XIcon class="w-5 h-5"></XIcon>
</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
<span class="flex-none">