teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: avatar on posts improvements (#561)

Browse source
This commit is contained in:
patak 2022-12-26 09:00:57 +01:00 committed by GitHub
parent 3e3a241474
commit 59d0cfa10e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/account/AccountInfo.vue
View file

@ -17,18 +17,18 @@ defineOptions({
<template>
<component :is="as" flex gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0>
<AccountAvatar :account="account" w-12 h-12 />
<AccountAvatar :account="account" account-avatar-normal />
</AccountHoverWrapper>
<div flex="~ col" shrink overflow-hidden>
<div flex="~ col" shrink overflow-hidden justify-center leading-none>
<div flex="~" gap-2>
<ContentRich
font-bold line-clamp-1 ws-pre-wrap break-all
font-bold line-clamp-1 ws-pre-wrap break-all text-lg
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountBotIndicator v-if="account.bot" />
</div>
<AccountHandle :account="account" text-sm text-secondary-light />
<AccountHandle :account="account" text-secondary-light />
</div>
</component>
</template>

6
components/publish/PublishWidget.vue
View file

@ -182,7 +182,7 @@ defineExpose({
</script>
<template>
<div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py4 px2 sm:px4>
<div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py3 px2 sm:px4>
<template v-if="draft.editingStatus">
<div flex="~ col gap-1">
<div id="state-editing" text-secondary self-center>
@ -194,8 +194,8 @@ defineExpose({
</template>
<div flex gap-4 flex-1>
<NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
<AccountAvatar :account="currentUser.account" f-full h-full />
<NuxtLink :to="getAccountRoute(currentUser.account)">
<AccountAvatar :account="currentUser.account" account-avatar-normal />
</NuxtLink>
<!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
<div

14
components/status/StatusCard.vue
View file

@ -76,16 +76,18 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
</slot>
<StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 />
</div>
<div flex gap-4 :class="faded ? 'text-secondary' : ''">
<div flex gap-3 :class="{ 'text-secondary': faded }">
<div relative>
<AccountHoverWrapper :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-4' : 'mt-1'">
<template v-if="showRebloggedByAvatarOnAvatar">
<div absolute top--3px left--0.8 z--1 w-25px h-25px rounded-full>
<AccountAvatar :account="rebloggedBy" />
</div>
</template>
<AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountAvatar w-12 h-12 :account="status.account" />
<AccountAvatar :account="status.account" account-avatar-normal :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" />
</NuxtLink>
</AccountHoverWrapper>
<div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
<AccountAvatar :account="rebloggedBy" />
</div>
<div v-if="connectReply" w-full h-full flex justify-center>
<div h-full class="w-2.5px" bg-border />
</div>

3
unocss.config.ts
View file

@ -46,6 +46,9 @@ export default defineConfig({
'flex-v-center': 'items-center',
'flex-h-center': 'justify-center',
'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
// account
'account-avatar-normal': 'w-54px h-54px border-3 border-bg-base',
},
],
presets: [