zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

ui: improve fields display

zio/stable
Anthony Fu 2022-11-24 14:41:29 +08:00
parent 1ee945447d
commit 8c9eac5789
1 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
components/account/AccountHeader.vue
View File

@ -9,6 +9,40 @@ const createdAt = $computed(() => {
const date = new Date(account.createdAt) const date = new Date(account.createdAt)
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date) return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
}) })
const fields = $computed(() => {
return [
...account.fields || [],
{
name: 'Joined',
value: createdAt,
},
]
})
const fieldNameIcons: Record<string, string> = {
github: 'i-ri:github-fill',
twitter: 'i-ri:twitter-line',
mastodon: 'i-ri:mastodon-line',
youtube: 'i-ri:youtube-line',
twitch: 'i-ri:twitch-line',
instagram: 'i-ri:instagram-line',
website: 'i-ri:link',
site: 'i-ri:link',
blog: 'i-ri:newspaper-line',
home: 'i-ri:home-2-line',
sponsors: 'i-ri:heart-3-line',
location: 'i-ri:map-pin-2-line',
city: 'i-ri:map-pin-2-line',
joined: 'i-ri:user-add-line',
birth: 'i-ri:calendar-line',
}
function getFieldNameIcon(fieldName: string) {
const name = fieldName.trim().toLowerCase()
if (fieldNameIcons[name])
return fieldNameIcons[name]
}
</script> </script>
<template> <template>
@ -48,30 +82,23 @@ const createdAt = $computed(() => {
<div> <div>
<div text-4 text-gray v-html="account.note" /> <div text-4 text-gray v-html="account.note" />
</div> </div>
<div flex flex-col gap-1> <div flex flex-wrap gap-4>
<div flex flex-col rounded p3 class="bg-purple/10"> <div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center>
<p text="gray/70" text-3 uppercase> <div v-if="getFieldNameIcon(field.name)" op50 :class="getFieldNameIcon(field.name)" :title="field.name" />
Joined <div v-else op50 uppercase text-xs font-bold>
</p> {{ field.name }} |
<p text-3 text-gray>
{{ createdAt }}
</p>
</div> </div>
<div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10"> <ContentRich text-sm filter-saturate-0 :content="field.value" />
<p text="gray/70" text-3 uppercase>
{{ field.name }}
</p>
<p text-3 text-purple-3 v-html="field.value" />
</div> </div>
</div> </div>
<div flex gap-5> <div flex gap-5>
<NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary"> <NuxtLink :to="`/${getAccountHandle(account)}/`" exact-active-class="text-primary">
<span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span> <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
</NuxtLink> </NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary"> <NuxtLink :to="`/${getAccountHandle(account)}/following`" exact-active-class="text-primary">
<span font-bold>{{ account.followingCount }}</span> <span op50>Following</span> <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
</NuxtLink> </NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary"> <NuxtLink :to="`/${getAccountHandle(account)}/followers`" exact-active-class="text-primary">
<span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span> <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
</NuxtLink> </NuxtLink>
</div> </div>