display favs & favorited user in one line

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;

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: {

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) {