diff options
| -rw-r--r-- | src/components/avatar_list/avatar_list.vue | 42 | ||||
| -rw-r--r-- | src/components/status/status.js | 10 | ||||
| -rw-r--r-- | src/components/status/status.vue | 29 |
3 files changed, 25 insertions, 56 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index a3bed515..fd6d8336 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,7 +1,7 @@ <template> - <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 10 }"> - <li class="avatars__item" v-for="avatar in slicedAvatars" :key="avatar.id"> - <UserAvatar :src="avatar.avatar_static" class="avatars__img" /> + <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }"> + <li class="avatars-item" v-for="avatar in slicedAvatars" :key="avatar.id"> + <UserAvatar :src="avatar.profile_image_url" class="avatars-img" /> </li> </ul> </template> @@ -14,43 +14,31 @@ display: inline-flex; /* Causes LI items to display in row. */ list-style-type: none; margin: 0; - padding: 0px 20px 0px 0px; - flex-direction: row; - flex-wrap: wrap; + padding: 0px 15px 0px 0px; + flex-direction: row-reverse; - &__item { - height: 40px; + &-item { + height: 30px; margin: 0; padding: 0; - width: 20px; + width: 15px; - &:nth-child( 1 ) { z-index: 10 ; } - &: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 { + .avatars-img { border-radius: 50%; - height: 40px; - width: 40px; - line-height: 40px; + height: 30px; + width: 30px; + line-height: 30px; background-color: $main-background; } } } .transparent-avatar { - .avatars__item { - &:last-child { + .avatars-item { + &:first-child { position: relative; - .avatars__img { + .avatars-img { &::after { content: ''; position: absolute; diff --git a/src/components/status/status.js b/src/components/status/status.js index eda96373..b275d4fa 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -259,11 +259,11 @@ const Status = { } return this.status.summary_html + '<br />' + this.status.statusnet_html }, - favouritedByUsers () { - return this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [] - }, - rebloggedByUsers () { - return this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : [] + combinedFavsAndRepeatsAvatars () { + return [].concat( + this.statusoid.favoritedBy ? this.statusoid.favoritedBy : [], + this.statusoid.rebloggedBy ? this.statusoid.rebloggedBy : [] + ) } }, components: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f67f849c..ce4b2554 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -133,6 +133,10 @@ <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" /> </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="loggedIn"> <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> <delete-button :status='status'></delete-button> </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 class="container" v-if="replying"> @@ -622,21 +616,8 @@ a.unmute { } } -.boosted-users { - display: flex; - justify-content: space-between; +.favs-favourited-users { 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) { |