zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: improve UI

Browse source
This commit is contained in:
三咲智子 2022-11-23 22:39:48 +08:00
parent 1771291c08
commit 889b4b8a00
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
12 changed files with 54 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/status/StatusActions.vue
View file

@ -36,15 +36,15 @@ const toggleBookmark = () => toggleStatusAction(
</script>
<template>
<div flex gap-8>
<RouterLink flex gap-1 items-center w-full rounded op50 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
<div flex justify-between gap-8>
<RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
<div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
</RouterLink>
<button
flex gap-1 items-center w-full rounded op50 hover="op100 text-green" group
flex gap-1 items-center rounded op50 hover="op100 text-green" group
:class="(status.reblogged ? 'text-green op100' : 'op50') + (isLoading.reblogged ? ' pointer-events-none' : '')"
@click="toggleReblog()"
>
@ -54,7 +54,7 @@ const toggleBookmark = () => toggleStatusAction(
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
</button>
<button
flex gap-1 items-center w-full rounded hover="op100 text-rose" group
flex gap-1 items-center rounded hover="op100 text-rose" group
:class="status.favourited ? 'text-rose op100' : 'op50'"
@click="toggleFavourite()"
>
@ -64,7 +64,7 @@ const toggleBookmark = () => toggleStatusAction(
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button>
<button
flex gap-1 items-center w-full rounded hover="op100 text-yellow" group
flex gap-1 items-center rounded hover="op100 text-yellow" group
:class="status.bookmarked ? 'text-yellow op100' : 'op50'"
@click="toggleBookmark()"
>
@ -72,7 +72,7 @@ const toggleBookmark = () => toggleStatusAction(
<div :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
</div>
</button>
<!-- <button flex gap-1 items-center w-full rounded op50 hover="op100 text-purple" group>
<!-- <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>

4
components/status/StatusCard.vue
View file

@ -63,7 +63,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script>
<template>
<div ref="el" flex flex-col gap-2 px-4 hover:bg="gray/10" transition="duration-100" cursor-pointer @click="go">
<div ref="el" flex flex-col gap-2 px-4 hover:bg-active transition-100 cursor-pointer @click="go">
<div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 />
@ -92,6 +92,6 @@ const timeago = useTimeAgo(() => status.createdAt, {
:actions="false"
/>
</div>
<StatusActions v-if="actions !== false" pl13 :status="status" />
<StatusActions v-if="actions !== false" px13 :status="status" />
</div>
</template>