Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Better user page

Browse Source
This commit is contained in:
LittleSheep 2024-09-22 22:21:16 +08:00
parent 64316f435c
commit d4c2746ca2
2 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/gallery/[id].vue
View File

@ -1,7 +1,9 @@
<template> <template>
<v-container class="content-container mx-auto"> <v-container class="content-container mx-auto">
<div class="mt-3 mb-4.5 mx-[2.5ch] flex flex-row gap-4 items-center"> <div class="mt-3 mb-4.5 mx-[2.5ch] flex flex-row gap-4 items-center">
<v-avatar :image="attachment.account?.avatar" /> <nuxt-link :to="`/users/${attachment.account?.name}`">
<v-avatar :image="attachment.account?.avatar" />
</nuxt-link>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs">Uploaded by</span> <span class="text-xs">Uploaded by</span>
<span>{{ attachment.account?.nick }} <span class="text-xs">@{{ attachment.account?.name }}</span></span> <span>{{ attachment.account?.nick }} <span class="text-xs">@{{ attachment.account?.name }}</span></span>

46
pages/users/[name].vue
View File

@ -1,9 +1,9 @@
<template> <template>
<v-container class="content-container mx-auto"> <v-container class="mx-auto">
<v-img v-if="urlOfBanner" :src="urlOfBanner" :aspect-ratio="16 / 5" class="rounded-md mb-3" cover /> <v-img v-if="urlOfBanner" :src="urlOfBanner" :aspect-ratio="16 / 5" class="rounded-md mb-3" cover />
<div class="mx-[2.5ch]"> <div class="mx-[2.5ch]">
<div class="my-5 flex flex-row gap-4"> <div class="my-5 mx-4 flex flex-row gap-4">
<v-avatar :image="urlOfAvatar" /> <v-avatar :image="urlOfAvatar" />
<div class="flex flex-col"> <div class="flex flex-col">
<span>{{ account?.nick }} <span class="text-xs">@{{ account?.name }}</span></span> <span>{{ account?.nick }} <span class="text-xs">@{{ account?.name }}</span></span>
@ -11,13 +11,37 @@
</div> </div>
</div> </div>
<div> <div class="mb-7">
<h1 class="text-xl">{{ t("userActivity") }}</h1> <v-card rounded="xl" class="mx-[-5px]">
<span>{{ t("userActivityCaption") }}</span> <v-tabs
v-model="tab"
align-tabs="start"
color="primary"
hide-slider
>
<v-tab :value="1">{{ t("userActivity") }}</v-tab>
</v-tabs>
</v-card>
</div> </div>
</div>
<post-list v-if="account" :author="account.name" /> <v-row>
<v-col row="12" lg="8">
<post-list class="mx-[-2.5ch] mt-[-16px]" v-if="account" :author="account.name" />
</v-col>
<v-col row="12" lg="4" order="first" order-lg="last">
<div class="sticky top-0 h-fit">
<v-card prepend-icon="mdi-identifier" title="About">
<v-card-text>
<p><b>Description</b></p>
<p>{{ account.description }}</p>
<p class="mt-3"><b>Joined At</b></p>
<p>{{ new Date(account.created_at).toLocaleString() }}</p>
</v-card-text>
</v-card>
</div>
</v-col>
</v-row>
</div>
</v-container> </v-container>
</template> </template>
@ -30,6 +54,8 @@ const { t } = useI18n()
const route = useRoute() const route = useRoute()
const config = useRuntimeConfig() const config = useRuntimeConfig()
const tab = ref(1)
const { data: account } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/id/users/${route.params.name}`) const { data: account } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/id/users/${route.params.name}`)
if (account.value == null) { if (account.value == null) {
@ -44,9 +70,3 @@ const urlOfBanner = computed(() => account.value?.banner ? `${config.public.sola
const externalOpenLink = computed(() => `${config.public.solianUrl}/accounts/view/${route.params.name}`) const externalOpenLink = computed(() => `${config.public.solianUrl}/accounts/view/${route.params.name}`)
</script> </script>
<style scoped>
.content-container {
max-width: 70ch !important;
}
</style>