fix: use some more semantic elements

This commit is contained in:
Daniel Roe 2022-11-27 23:29:21 +00:00
parent d0ec3676b8
commit d40b27982c
No known key found for this signature in database
GPG Key ID: 22D5008E4F5D9B55
4 changed files with 10 additions and 8 deletions

View File

@ -7,11 +7,11 @@ const props = defineProps<{
</script>
<template>
<div flex flex-col gap-2>
<article flex flex-col gap-2>
<div flex gap-2 flex-wrap text-sm px-2>
with
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
</div>
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
</div>
</article>
</template>

View File

@ -4,7 +4,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
</script>
<template>
<div p4 text-sm text-secondary-light flex="~ col">
<footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
<button
@ -13,8 +13,10 @@ const buildTimeAgo = useTimeAgo(buildTime)
@click="toggleZenMode()"
/>
</div>
<a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
<button cursor-pointer hover:underline @click="openPreviewHelp">
Show intro
</button>
<div>A Mastodon client made with 🧡</div>
<div>Built <time :datetime="buildTime" :title="buildTime">{{ buildTimeAgo }}</time> · <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a></div>
</div>
</footer>
</template>

View File

@ -7,7 +7,7 @@ const { notification } = defineProps<{
</script>
<template>
<div flex flex-col>
<article flex flex-col>
<template v-if="notification.type === 'follow'">
<div flex ml-4 items-center>
<div i-ri:user-follow-fill mr-3 color-primary />
@ -57,5 +57,5 @@ const { notification } = defineProps<{
[DEV] MISSING notification.type: '{{ notification.type }}'
</div>
</template>
</div>
</article>
</template>

View File

@ -11,7 +11,7 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator :paginator="paginator" virtual-scroller>
<template #default="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<DynamicScrollerItem :item="item" :active="active" tag="article">
<StatusCard
:status="item"
border="b base" py-3