teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: improve status card UI (#28)

Browse source
This commit is contained in:
三咲智子 Kevin Deng 2022-11-23 16:37:31 +08:00 committed by GitHub
parent 8f54b6db2e
commit 074da4768e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/account/AccountHeader.vue
View file

@ -46,19 +46,19 @@ const createdAt = $computed(() => {
</div> </div>
</div> </div>
<div> <div>
<div text-4 text-gray-3 v-html="account.note" /> <div text-4 text-gray v-html="account.note" />
</div> </div>
<div flex flex-col gap-1> <div flex flex-col gap-1>
<div flex flex-col rounded p3 class="bg-purple/10"> <div flex flex-col rounded p3 class="bg-purple/10">
<p text-gray text-3 uppercase> <p text="gray/70" text-3 uppercase>
Joined Joined
</p> </p>
<p text-3 text-gray-3> <p text-3 text-gray>
{{ createdAt }} {{ createdAt }}
</p> </p>
</div> </div>
<div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10"> <div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10">
<p text-gray text-3 uppercase> <p text="gray/70" text-3 uppercase>
{{ field.name }} {{ field.name }}
</p> </p>
<p text-3 text-purple-3 v-html="field.value" /> <p text-3 text-purple-3 v-html="field.value" />

6
components/status/StatusCard.vue
View file

@ -24,8 +24,8 @@ const router = useRouter()
function go(e: MouseEvent) { function go(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[] const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'P', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase())) const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el || el.tagName.toUpperCase() === 'P') if (!el)
router.push(`/@${status.account.acct}/${status.id}`) router.push(`/@${status.account.acct}/${status.id}`)
} }
@ -63,7 +63,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script> </script>
<template> <template>
<div ref="el" flex flex-col gap-2 my-2 px-4 @click="go"> <div ref="el" flex flex-col gap-2 px-4 hover:bg="gray/10" transition="duration-100" cursor-pointer @click="go">
<div v-if="rebloggedBy" pl8> <div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm> <div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />