versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: 💄 Add slight "frosted glass" effect to some cards, improve color variety, make avatars smaller

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-31 15:55:02 +01:00
parent 4b67f6ab9a
commit 2e2572bd51
No known key found for this signature in database
7 changed files with 25 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/notes/header.vue
View file

@ -6,8 +6,8 @@
}
}" :open-delay="2000">
<HoverCardTrigger :as-child="true">
<NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
<Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="author.avatar"
<NuxtLink :href="urlAsPath" :class="cn('relative size-12', smallLayout && 'size-8')">
<Avatar :class="cn('size-12 border border-card', smallLayout && 'size-8')" :src="author.avatar"
:name="author.display_name" />
<Avatar v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1" :src="cornerAvatar" />
</NuxtLink>
@ -114,4 +114,4 @@ const visibilities = {
text: "This note is direct: it can only be seen by mentioned users.",
},
};
</script>
</script>

4
components/notes/note.vue
View file

@ -7,8 +7,8 @@
:corner-avatar="note.reblog ? note.account.avatar : undefined" :note-url="url"
:visibility="noteToUse.visibility" :created-at="new Date(noteToUse.created_at)"
:small-layout="smallLayout" class="z-[1]" />
<div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3.25rem]')"></div>
<div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3.25rem]')"></div>
<div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3rem]')"></div>
<div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3rem]')"></div>
</CardHeader>
<!-- Simply offset by the size of avatar + 0.75rem (the gap) -->
<CardContent :class="contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-[4.25rem]')">