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

feat: use square avatar when on own profile (#961)

Browse source
This commit is contained in:
wheat 2023-01-11 03:39:49 -05:00 committed by GitHub
parent e690422266
commit 2af1fec425
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/account/AccountHeader.vue
View file

@ -70,8 +70,8 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
<div p4 mt--18 flex flex-col gap-4> <div p4 mt--18 flex flex-col gap-4>
<div relative> <div relative>
<div flex="~ col gap-2 1"> <div flex="~ col gap-2 1">
<button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar"> <button :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
<AccountAvatar :account="account" hover:opacity-90 transition-opacity /> <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
</button> </button>
<div flex="~ col gap1"> <div flex="~ col gap1">
<div flex justify-between> <div flex justify-between>

4
styles/global.css
View file

@ -232,3 +232,7 @@ footer {
--at-apply: 'hover:underline'; --at-apply: 'hover:underline';
} }
} }
.squircle {
clip-path: url(#avatar-mask);
}