diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue index 44db7eb8..cce85f9b 100644 --- a/components/account/AccountAvatar.vue +++ b/components/account/AccountAvatar.vue @@ -3,6 +3,7 @@ import type { Account } from 'masto' defineProps<{ account: Account + square?: boolean }>() const loaded = $ref(false) @@ -17,8 +18,7 @@ const error = $ref(false) :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar" :alt="$t('account.avatar_description', [account.username])" loading="lazy" - rounded-full - :class="loaded ? 'bg-base' : 'bg-gray:10'" + :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')" v-bind="$attrs" @load="loaded = true" @error="error = true" diff --git a/components/account/AccountBigAvatar.vue b/components/account/AccountBigAvatar.vue index ecc0b3b0..afe705de 100644 --- a/components/account/AccountBigAvatar.vue +++ b/components/account/AccountBigAvatar.vue @@ -6,11 +6,12 @@ import type { Account } from 'masto' defineProps<{ account: Account + square?: boolean }>() </script> <template> <div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center> - <AccountAvatar :account="account" w-48px h-48px /> + <AccountAvatar :account="account" w-48px h-48px :square="square" /> </div> </template> diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue index 526faa64..f47bbb37 100644 --- a/components/account/AccountInfo.vue +++ b/components/account/AccountInfo.vue @@ -5,6 +5,7 @@ const { account, as = 'div' } = defineProps<{ account: Account as?: string hoverCard?: boolean + square?: boolean }>() defineOptions({ @@ -17,7 +18,7 @@ defineOptions({ <template> <component :is="as" flex gap-3 v-bind="$attrs"> <AccountHoverWrapper :disabled="!hoverCard" :account="account"> - <AccountBigAvatar :account="account" shrink-0 /> + <AccountBigAvatar :account="account" shrink-0 :square="square" /> </AccountHoverWrapper> <div flex="~ col" shrink overflow-hidden justify-center leading-none> <div flex="~" gap-2> diff --git a/components/nav/NavUser.vue b/components/nav/NavUser.vue index 6944978c..70ce813a 100644 --- a/components/nav/NavUser.vue +++ b/components/nav/NavUser.vue @@ -7,6 +7,7 @@ h-8 w-8 :draggable="false" + square /> </div> diff --git a/components/user/UserDropdown.vue b/components/user/UserDropdown.vue index 80281b95..95b3e7b6 100644 --- a/components/user/UserDropdown.vue +++ b/components/user/UserDropdown.vue @@ -2,7 +2,7 @@ <VDropdown :distance="0" placement="top-start"> <button btn-action-icon :aria-label="$t('action.switch_account')"> <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line /> - <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 /> + <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square /> </button> <template #popper="{ hide }"> <UserSwitcher @click="hide" /> diff --git a/layouts/default.vue b/layouts/default.vue index 2dee1f96..d5737734 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -28,7 +28,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false) hover:bg-active cursor-pointer transition-100 :to="getAccountRoute(currentUser.account)" > - <AccountInfo :account="currentUser.account" md:break-words /> + <AccountInfo :account="currentUser.account" md:break-words square /> </NuxtLink> <UserDropdown /> </div>