versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 💄 Make sure avatars never shrink in flex containers

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-02 17:28:31 -10:00
parent eb0385ab8a
commit 8eaccb31c2
No known key found for this signature in database
5 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/social-elements/notes/header.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="small" class="flex flex-row"> <div v-if="small" class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-6 w-6"> <Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
<NuxtLink :href="accountUrl"> <NuxtLink :href="accountUrl" class="shrink-0">
<img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar" <img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" /> :alt="`${note?.account.acct}'s avatar`" />
</NuxtLink> </NuxtLink>
@ -24,7 +24,7 @@
</div> </div>
<div v-else class="flex flex-row"> <div v-else class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-12 w-12"> <Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
<NuxtLink :href="accountUrl"> <NuxtLink :href="accountUrl" class="shrink-0">
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" /> :alt="`${note?.account.acct}'s avatar`" />
</NuxtLink> </NuxtLink>
@ -46,7 +46,7 @@
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full"> <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect"> <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
@{{ @{{
note?.account.acct note?.account.acct
}} }}
</Skeleton> </Skeleton>
</span> </span>

2
components/social-elements/notes/note.vue
View file

@ -8,7 +8,7 @@
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%"> <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" /> <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
<img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`" <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
class="h-6 w-6 rounded ring-1 ring-white/10" /> class="h-6 w-6 rounded shrink-0 ring-1 ring-white/10" />
<span><strong v-html="reblogDisplayName"></strong> reblogged</span> <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
</Skeleton> </Skeleton>
</div> </div>

3
components/social-elements/notifications/notif.vue
View file

@ -5,7 +5,8 @@
width-unit="%"> width-unit="%">
<Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" /> <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
<img v-if="notification?.account?.avatar" :src="notification?.account.avatar" <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
:alt="`${notification?.account.acct}'s avatar'`" class="h-6 w-6 rounded ring-1 ring-white/10" /> :alt="`${notification?.account.acct}'s avatar'`"
class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
<span class="text-gray-200"><strong v-html="accountName"></strong> {{ text <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text
}}</span> }}</span>
</Skeleton> </Skeleton>

2
components/social-elements/users/Account.vue
View file

@ -9,7 +9,7 @@
</Skeleton> </Skeleton>
<div class="flex items-start justify-between px-4 py-3"> <div class="flex items-start justify-between px-4 py-3">
<div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded overflow-hidden"> <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
<Skeleton :enabled="skeleton" class="!h-full !w-full"> <Skeleton :enabled="skeleton" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar" <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar"
:alt="`${account?.acct}'s avatar'`" /> :alt="`${account?.acct}'s avatar'`" />

2
components/social-elements/users/SmallCard.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<NuxtLink :href="accountUrl" class="flex flex-row"> <NuxtLink :href="accountUrl" class="flex flex-row">
<Skeleton :enabled="!account" shape="rect" class="!h-12 w-12"> <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
<div> <div class="shrink-0">
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar" <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
:alt="`${account?.acct}'s avatar'`" /> :alt="`${account?.acct}'s avatar'`" />
</div> </div>