feat: styling

This commit is contained in:
Anthony Fu 2022-11-14 10:56:48 +08:00
parent 90c45b435f
commit 10143fffec
5 changed files with 86 additions and 14 deletions

View file

@ -21,5 +21,6 @@ defineProps<{
@{{ account.acct }} @{{ account.acct }}
</p> </p>
</NuxtLink> </NuxtLink>
<slot />
</div> </div>
</template> </template>

View file

@ -7,21 +7,29 @@ defineProps<{
</script> </script>
<template> <template>
<div flex justify-between gap-4> <div flex gap-8>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10"> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
<div i-ri:chat-3-line /> <div rounded-full p2 group-hover="bg-blue/10">
<span>{{ status.repliesCount }}</span> <div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
</button> </button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10"> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
<div i-ri:repeat-fill /> <div rounded-full p2 group-hover="bg-green/10">
<span>{{ status.reblogsCount }}</span> <div i-ri:repeat-fill />
</div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
</button> </button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10"> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
<div i-ri:heart-3-line /> <div rounded-full p2 group-hover="bg-rose/10">
<span>{{ status.favouritesCount }}</span> <div i-ri:heart-3-line />
</div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button> </button>
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10"> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div i-ri:more-2-fill /> <div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button> </button>
</div> </div>
</template> </template>

View file

@ -11,12 +11,52 @@ function go(e: MouseEvent) {
if (e.target === el.value) if (e.target === el.value)
router.push(`/@${status.account.acct}/${status.id}`) router.push(`/@${status.account.acct}/${status.id}`)
} }
const timeago = useTimeAgo(() => status.createdAt, {
showSecond: true,
messages: {
justNow: 'just now',
past: n => n,
future: n => n.match(/\d/) ? `in ${n}` : n,
month: (n, past) => n === 1
? past
? 'last month'
: 'next month'
: `${n}m`,
year: (n, past) => n === 1
? past
? 'last year'
: 'next year'
: `${n}y`,
day: (n, past) => n === 1
? past
? 'yesterday'
: 'tomorrow'
: `${n}d`,
week: (n, past) => n === 1
? past
? 'last week'
: 'next week'
: `${n} week${n > 1 ? 's' : ''}`,
hour: n => `${n}h`,
minute: n => `${n}min`,
second: n => `${n}s`,
},
})
</script> </script>
<template> <template>
<div ref="el" flex flex-col gap-2 my-4 @click="go"> <div ref="el" flex flex-col gap-2 my-4 @click="go">
<AccountInfo :account="status.account" /> <AccountInfo :account="status.account">
<div flex-auto />
<div text-sm op50>
{{ timeago }}
</div>
</AccountInfo>
<StatusBody :status="status" /> <StatusBody :status="status" />
<template v-for="attachment of status.mediaAttachments" :key="attachment.id">
<StatusMedia :attachment="attachment" />
</template>
<StatusActions :status="status" /> <StatusActions :status="status" />
</div> </div>
</template> </template>

View file

@ -0,0 +1,21 @@
<script setup lang="ts">
import type { Attachment } from 'masto'
const { attachment } = defineProps<{
attachment: Attachment
}>()
</script>
<template>
<template v-if="attachment.type === 'image'">
<img
class="status-attachment-image"
:src="attachment.previewUrl!"
:alt="attachment.description!"
rounded-lg border="~ gray/10"
>
</template>
<template v-else>
TODO: {{ attachment }}
</template>
</template>

View file

@ -13,7 +13,9 @@ export default defineConfig({
shortcuts: [ shortcuts: [
], ],
presets: [ presets: [
presetUno(), presetUno({
attributifyPseudo: true,
}),
presetAttributify(), presetAttributify(),
presetIcons({ presetIcons({
scale: 1.2, scale: 1.2,