forked from AkkomaGang/akkoma-fe
display favs & favorited user in one line
This commit is contained in:
parent
df68ce4d83
commit
6511166631
3 changed files with 25 additions and 56 deletions
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 10 }">
|
<ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }">
|
||||||
<li class="avatars__item" v-for="avatar in slicedAvatars" :key="avatar.id">
|
<li class="avatars-item" v-for="avatar in slicedAvatars" :key="avatar.id">
|
||||||
<UserAvatar :src="avatar.avatar_static" class="avatars__img" />
|
<UserAvatar :src="avatar.profile_image_url" class="avatars-img" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
@ -14,43 +14,31 @@
|
||||||
display: inline-flex; /* Causes LI items to display in row. */
|
display: inline-flex; /* Causes LI items to display in row. */
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0px 20px 0px 0px;
|
padding: 0px 15px 0px 0px;
|
||||||
flex-direction: row;
|
flex-direction: row-reverse;
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&__item {
|
&-item {
|
||||||
height: 40px;
|
height: 30px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 20px;
|
width: 15px;
|
||||||
|
|
||||||
&:nth-child( 1 ) { z-index: 10 ; }
|
.avatars-img {
|
||||||
&:nth-child( 2 ) { z-index: 9 ; }
|
|
||||||
&:nth-child( 3 ) { z-index: 8 ; }
|
|
||||||
&:nth-child( 4 ) { z-index: 7 ; }
|
|
||||||
&:nth-child( 5 ) { z-index: 6 ; }
|
|
||||||
&:nth-child( 6 ) { z-index: 5 ; }
|
|
||||||
&:nth-child( 7 ) { z-index: 4 ; }
|
|
||||||
&:nth-child( 8 ) { z-index: 3 ; }
|
|
||||||
&:nth-child( 9 ) { z-index: 2 ; }
|
|
||||||
&:nth-child( 10 ) { z-index: 1 ; }
|
|
||||||
|
|
||||||
.avatars__img {
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
width: 40px;
|
width: 30px;
|
||||||
line-height: 40px;
|
line-height: 30px;
|
||||||
background-color: $main-background;
|
background-color: $main-background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparent-avatar {
|
.transparent-avatar {
|
||||||
.avatars__item {
|
.avatars-item {
|
||||||
&:last-child {
|
&:first-child {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.avatars__img {
|
.avatars-img {
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -259,11 +259,11 @@ const Status = {
|
||||||
}
|
}
|
||||||
return this.status.summary_html + '<br />' + this.status.statusnet_html
|
return this.status.summary_html + '<br />' + this.status.statusnet_html
|
||||||
},
|
},
|
||||||
favouritedByUsers () {
|
combinedFavsAndRepeatsAvatars () {
|
||||||
return this.statusoid.favoritedBy ? this.statusoid.favoritedBy : []
|
return [].concat(
|
||||||
},
|
this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [],
|
||||||
rebloggedByUsers () {
|
this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : []
|
||||||
return this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : []
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -133,6 +133,10 @@
|
||||||
<link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
|
<link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="favs-favourited-users" v-if="combinedFavsAndRepeatsAvatars.length > 0" :class="{ 'status-fadein': combinedFavsAndRepeatsAvatars.length > 0 }">
|
||||||
|
<AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="!noHeading && !isPreview" class='status-actions media-body'>
|
<div v-if="!noHeading && !isPreview" class='status-actions media-body'>
|
||||||
<div v-if="loggedIn">
|
<div v-if="loggedIn">
|
||||||
<i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
|
<i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
|
||||||
|
@ -142,16 +146,6 @@
|
||||||
<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
|
<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
|
||||||
<delete-button :status='status'></delete-button>
|
<delete-button :status='status'></delete-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="boosted-users">
|
|
||||||
<div class="reblogged-users" v-if="rebloggedByUsers.length > 0" :class="{ 'status-fadein': rebloggedByUsers.length > 0 }">
|
|
||||||
<p class="title">Boosted By {{rebloggedByUsers.length}}:</p>
|
|
||||||
<AvatarList :avatars='rebloggedByUsers'></AvatarList>
|
|
||||||
</div>
|
|
||||||
<div class="favourited-users" v-if="favouritedByUsers.length > 0" :class="{ 'status-fadein': favouritedByUsers.length > 0 }">
|
|
||||||
<p class="title">Favourited By {{favouritedByUsers.length}}:</p>
|
|
||||||
<AvatarList :avatars='favouritedByUsers'></AvatarList>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container" v-if="replying">
|
<div class="container" v-if="replying">
|
||||||
|
@ -622,21 +616,8 @@ a.unmute {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.boosted-users {
|
.favs-favourited-users {
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
||||||
.favourited-users,
|
|
||||||
.reblogged-users {
|
|
||||||
flex-basis: 50%;
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 800px) {
|
@media all and (max-width: 800px) {
|
||||||
|
|
Loading…
Reference in a new issue