feat(frontend): Add a link to profile to banner and avatar

Increase the area of links to click easily.
This commit is contained in:
Souma 2025-08-15 21:32:11 +09:00
parent bae92a944d
commit cc9cd28796
No known key found for this signature in database
2 changed files with 15 additions and 11 deletions

View File

@ -5,8 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_panel" :class="$style.root"> <div class="_panel" :class="$style.root">
<MkA :to="userPage(user)">
<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''"></div> <div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''"></div>
<MkAvatar :class="$style.avatar" :user="user" indicator/> <MkAvatar :class="$style.avatar" :user="user" indicator/>
</MkA>
<div :class="$style.title"> <div :class="$style.title">
<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<p :class="$style.username"><MkAcct :user="user"/></p> <p :class="$style.username"><MkAcct :user="user"/></p>

View File

@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }"> <div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
<MkError v-if="error" @retry="fetchUser()"/> <MkError v-if="error" @retry="fetchUser()"/>
<div v-else-if="user != null"> <div v-else-if="user != null">
<MkA :to="userPage(user)">
<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''"> <div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''">
<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span> <span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
</div> </div>
@ -23,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</g> </g>
</svg> </svg>
<MkAvatar :class="$style.avatar" :user="user" indicator/> <MkAvatar :class="$style.avatar" :user="user" indicator/>
</MkA>
<div :class="$style.title"> <div :class="$style.title">
<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<div :class="$style.username"><MkAcct :user="user"/></div> <div :class="$style.username"><MkAcct :user="user"/></div>