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> </script>
<template> <template>
<div flex flex-col gap-2> <article flex flex-col gap-2>
<div flex gap-2 flex-wrap text-sm px-2> <div flex gap-2 flex-wrap text-sm px-2>
with with
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" /> <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
</div> </div>
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" /> <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
</div> </article>
</template> </template>

View file

@ -4,7 +4,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
</script> </script>
<template> <template>
<div p4 text-sm text-secondary-light flex="~ col"> <footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2"> <div flex="~ gap2">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" /> <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
<button <button
@ -13,8 +13,10 @@ const buildTimeAgo = useTimeAgo(buildTime)
@click="toggleZenMode()" @click="toggleZenMode()"
/> />
</div> </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>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>Built <time :datetime="buildTime" :title="buildTime">{{ buildTimeAgo }}</time> · <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a></div>
</div> </footer>
</template> </template>

View file

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

View file

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