forked from Mirrors/elk
feat: styling
This commit is contained in:
parent
90c45b435f
commit
10143fffec
5 changed files with 86 additions and 14 deletions
|
@ -21,5 +21,6 @@ defineProps<{
|
|||
@{{ account.acct }}
|
||||
</p>
|
||||
</NuxtLink>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -7,21 +7,29 @@ defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div flex justify-between gap-4>
|
||||
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
|
||||
<div i-ri:chat-3-line />
|
||||
<span>{{ status.repliesCount }}</span>
|
||||
<div flex gap-8>
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
|
||||
<div rounded-full p2 group-hover="bg-blue/10">
|
||||
<div i-ri:chat-3-line />
|
||||
</div>
|
||||
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
|
||||
</button>
|
||||
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
|
||||
<div i-ri:repeat-fill />
|
||||
<span>{{ status.reblogsCount }}</span>
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
|
||||
<div rounded-full p2 group-hover="bg-green/10">
|
||||
<div i-ri:repeat-fill />
|
||||
</div>
|
||||
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
|
||||
</button>
|
||||
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
|
||||
<div i-ri:heart-3-line />
|
||||
<span>{{ status.favouritesCount }}</span>
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
|
||||
<div rounded-full p2 group-hover="bg-rose/10">
|
||||
<div i-ri:heart-3-line />
|
||||
</div>
|
||||
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
|
||||
</button>
|
||||
<button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
|
||||
<div i-ri:more-2-fill />
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
|
||||
<div rounded-full p2 group-hover="bg-purple/10">
|
||||
<div i-ri:share-circle-line />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -11,12 +11,52 @@ function go(e: MouseEvent) {
|
|||
if (e.target === el.value)
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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" />
|
||||
<template v-for="attachment of status.mediaAttachments" :key="attachment.id">
|
||||
<StatusMedia :attachment="attachment" />
|
||||
</template>
|
||||
<StatusActions :status="status" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
21
components/status/StatusMedia.vue
Normal file
21
components/status/StatusMedia.vue
Normal 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>
|
|
@ -13,7 +13,9 @@ export default defineConfig({
|
|||
shortcuts: [
|
||||
],
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetUno({
|
||||
attributifyPseudo: true,
|
||||
}),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
scale: 1.2,
|
||||
|
|
Loading…
Reference in a new issue