FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Show "follows you" badge on profile page

Browse source
This commit is contained in:
silverpill 2022-02-04 01:50:04 +00:00
parent 8bd2871175
commit dbfb707dbb
1 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/views/Profile.vue
View file

@ -5,8 +5,11 @@
<div class="profile-header"> <div class="profile-header">
<img v-if="profile.header" :src="profile.header"> <img v-if="profile.header" :src="profile.header">
</div> </div>
<div class="avatar-group"> <div class="avatar-menu-group">
<avatar :profile="profile"></avatar> <div class="avatar-group">
<avatar :profile="profile"></avatar>
<div class="badge" v-if="isFollowedBy()">Follows you</div>
</div>
<div <div
v-if="!isLocalUser()" v-if="!isLocalUser()"
class="dropdown-menu-wrapper" class="dropdown-menu-wrapper"
@ -184,6 +187,13 @@ export default class ProfileView extends Vue {
return this.store.currentUser.id === this.profile.id return this.store.currentUser.id === this.profile.id
} }
isFollowedBy(): boolean {
if (!this.relationship) {
return false
}
return this.relationship.followed_by
}
canFollow(): boolean { canFollow(): boolean {
if (!this.relationship) { if (!this.relationship) {
return false return false
@ -279,24 +289,42 @@ $avatar-size: 170px;
} }
} }
.avatar-group { .avatar-menu-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $block-inner-padding;
padding: $block-inner-padding; padding: $block-inner-padding;
.avatar-group {
align-items: flex-start;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
gap: $block-inner-padding;
}
.avatar { .avatar {
height: $avatar-size; height: $avatar-size;
margin-right: auto;
margin-top: -($avatar-size / 2 + $block-inner-padding); margin-top: -($avatar-size / 2 + $block-inner-padding);
min-width: $avatar-size; min-width: $avatar-size;
padding: 7px; padding: 7px;
width: $avatar-size; width: $avatar-size;
} }
.badge {
border: 1px solid $btn-text-color;
border-radius: $btn-border-radius;
font-size: 14px;
line-height: 30px;
padding: 0 7px;
white-space: nowrap;
}
.dropdown-menu-wrapper { .dropdown-menu-wrapper {
@include post-dropdown-menu; @include post-dropdown-menu;
margin-left: auto;
/* stylelint-disable-next-line selector-max-compound-selectors */ /* stylelint-disable-next-line selector-max-compound-selectors */
button img { button img {
height: 32px; height: 32px;