From ff259667023b8bb46bf8b122e4d1caaa6503274e Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Mon, 1 Apr 2019 22:30:23 -0400
Subject: display users in stacked avatarlist

---
 src/components/avatar_list/avatar_list.vue | 54 ++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/avatar_list/avatar_list.vue

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
new file mode 100644
index 00000000..204ccb9a
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.vue
@@ -0,0 +1,54 @@
+<template>
+  <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 10 }">
+      <li class="avatars__item" v-for="(avatar, index) in slicedAvatars" :key="index">
+        <UserAvatar :src="avatar.src" class="avatars__img" />
+      </li>
+  </ul>
+</template>
+
+<script src="./avatar_list.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.avatars {
+  display: inline-flex; /* Causes LI items to display in row. */
+  list-style-type: none;
+  margin: 0;
+  padding: 0px 16px 0px 0px;
+  flex-direction: row-reverse;
+
+  &__item {
+    height: 40px;
+    margin: 0;
+    padding: 0;
+    width: 25px;
+
+    .avatars__img {
+      border-radius: 50%;
+      height: 40px;
+      width: 40px;
+      line-height: 40px;
+    }
+  }
+}
+
+.transparent-avatar {
+  .avatars__item {
+    &:first-child {
+      position: relative;
+
+      .avatars__img {
+        &::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(255, 255, 255, 0.7);
+          left: 0;
+          top: 0;
+        }
+      }
+    }
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 0d8eb1d00b9044398fccf0760329fb81887c9b18 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Mon, 1 Apr 2019 22:38:56 -0400
Subject: set default avatar background

---
 src/components/avatar_list/avatar_list.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 204ccb9a..3241609c 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -28,6 +28,7 @@
       height: 40px;
       width: 40px;
       line-height: 40px;
+      background-color: $main-background;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 44d07ceb25ab8902a4d67b156474e737d6541362 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Tue, 2 Apr 2019 04:25:08 -0400
Subject: support mobile size screen

---
 src/components/avatar_list/avatar_list.vue | 20 ++++++++++++++++----
 src/components/status/status.vue           |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 3241609c..56ca12a2 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -14,14 +14,26 @@
   display: inline-flex; /* Causes LI items to display in row. */
   list-style-type: none;
   margin: 0;
-  padding: 0px 16px 0px 0px;
-  flex-direction: row-reverse;
+  padding: 0px 20px 0px 0px;
+  flex-direction: row;
+  flex-wrap: wrap;
 
   &__item {
     height: 40px;
     margin: 0;
     padding: 0;
-    width: 25px;
+    width: 20px;
+
+    &: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 {
       border-radius: 50%;
@@ -35,7 +47,7 @@
 
 .transparent-avatar {
   .avatars__item {
-    &:first-child {
+    &:last-child {
       position: relative;
 
       .avatars__img {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6b8e0b3d..f67f849c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -629,7 +629,9 @@ a.unmute {
 
   .favourited-users,
   .reblogged-users {
-    flex: 1;
+    flex-basis: 50%;
+    flex-grow: 1;
+    flex-shrink: 1;
 
     .title {
       margin: 0 0 10px 0;
-- 
cgit v1.2.3-70-g09d2


From 4ab2ddb03cdd3740eb18d8c7d85de80e176db29f Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Tue, 2 Apr 2019 11:04:39 -0400
Subject: improve code quality

---
 src/components/avatar_list/avatar_list.vue  |  4 ++--
 src/components/conversation/conversation.js | 16 ++--------------
 src/modules/statuses.js                     |  8 ++++----
 3 files changed, 8 insertions(+), 20 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 56ca12a2..a3bed515 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, index) in slicedAvatars" :key="index">
-        <UserAvatar :src="avatar.src" class="avatars__img" />
+      <li class="avatars__item" v-for="avatar in slicedAvatars" :key="avatar.id">
+        <UserAvatar :src="avatar.avatar_static" class="avatars__img" />
       </li>
   </ul>
 </template>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 18635aa1..851d30e9 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -153,22 +153,10 @@ const conversation = {
       }
     },
     fetchFavouritedByUsers (id) {
-      this.$store.state.api.backendInteractor.fetchFavouritedByUsers({id}).then((response) => {
-        const favoritedByUsers = response.map(item => ({
-          src: item.avatar_static,
-          name: item.display_name
-        }))
-        this.$store.dispatch('addFavoritedByUsers', { favoritedByUsers, id })
-      })
+      this.$store.dispatch('fetchFavouritedByUsers', { id })
     },
     fetchRebloggedByUsers (id) {
-      this.$store.state.api.backendInteractor.fetchRebloggedByUsers({id}).then((response) => {
-        const rebloggedByUsers = response.map(item => ({
-          src: item.avatar_static,
-          name: item.display_name
-        }))
-        this.$store.dispatch('addRebloggedByUsers', { rebloggedByUsers, id })
-      })
+      this.$store.dispatch('fetchRebloggedByUsers', { id })
     }
   }
 }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index c749e60f..2cfc3ff1 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -537,11 +537,11 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
-    addFavoritedByUsers ({ rootState, commit }, { favoritedByUsers, id }) {
-      commit('addFavoritedByUsers', { favoritedByUsers, id })
+    fetchFavouritedByUsers ({ rootState, commit }, { id }) {
+      rootState.api.backendInteractor.fetchFavouritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id }))
     },
-    addRebloggedByUsers ({ rootState, commit }, { rebloggedByUsers, id }) {
-      commit('addRebloggedByUsers', { rebloggedByUsers, id })
+    fetchRebloggedByUsers ({ rootState, commit }, { id }) {
+      rootState.api.backendInteractor.fetchRebloggedByUsers({id}).then((rebloggedByUsers) => commit('addRebloggedByUsers', { rebloggedByUsers, id }))
     }
   },
   mutations
-- 
cgit v1.2.3-70-g09d2


From 6511166631aa752faff02568802362155918e804 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Tue, 2 Apr 2019 12:02:40 -0400
Subject: display favs & favorited user in one line

---
 src/components/avatar_list/avatar_list.vue | 42 +++++++++++-------------------
 src/components/status/status.js            | 10 +++----
 src/components/status/status.vue           | 29 ++++-----------------
 3 files changed, 25 insertions(+), 56 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

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) {
-- 
cgit v1.2.3-70-g09d2


From 8a2f55644c56cdedf27c5bdb8bd54c642fadbe4d Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Tue, 2 Apr 2019 16:00:09 -0400
Subject: improve code quality

---
 src/components/avatar_list/avatar_list.vue  | 35 ++++++-----------------------
 src/components/conversation/conversation.js | 10 ++-------
 2 files changed, 9 insertions(+), 36 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index fd6d8336..5df62ce5 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,6 +1,6 @@
 <template>
-  <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }">
-      <li class="avatars-item" v-for="avatar in slicedAvatars" :key="avatar.id">
+  <ul class="avatars">
+      <li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`">
         <UserAvatar :src="avatar.profile_image_url" class="avatars-img" />
       </li>
   </ul>
@@ -18,37 +18,16 @@
   flex-direction: row-reverse;
 
   &-item {
-    height: 30px;
+    height: 25px;
     margin: 0;
     padding: 0;
     width: 15px;
 
     .avatars-img {
-      border-radius: 50%;
-      height: 30px;
-      width: 30px;
-      line-height: 30px;
-      background-color: $main-background;
-    }
-  }
-}
-
-.transparent-avatar {
-  .avatars-item {
-    &:first-child {
-      position: relative;
-
-      .avatars-img {
-        &::after {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(255, 255, 255, 0.7);
-          left: 0;
-          top: 0;
-        }
-      }
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      height: 25px !important;
+      width: 25px !important;
     }
   }
 }
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index ba90746e..115ac640 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -121,8 +121,8 @@ const conversation = {
         this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
           .then(({ancestors, descendants}) => {
             const ancestorId = ancestors.length ? ancestors[0].id : this.status.id
-            this.fetchFavoritedByUsers(ancestorId)
-            this.fetchRebloggedByUsers(ancestorId)
+            this.$store.dispatch('fetchFavoritedByUsers', { id: ancestorId })
+            this.$store.dispatch('fetchRebloggedByUsers', { id: ancestorId })
             this.$store.dispatch('addNewStatuses', { statuses: ancestors })
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
           })
@@ -151,12 +151,6 @@ const conversation = {
       if (!this.expanded) {
         this.setHighlight(null)
       }
-    },
-    fetchFavoritedByUsers (id) {
-      this.$store.dispatch('fetchFavoritedByUsers', { id })
-    },
-    fetchRebloggedByUsers (id) {
-      this.$store.dispatch('fetchRebloggedByUsers', { id })
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 0f5ea9c164b0ac11b1554c39386b12550e3f02cb Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Tue, 2 Apr 2019 16:31:18 -0400
Subject: apply theming to avatars list

---
 src/components/avatar_list/avatar_list.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 5df62ce5..3941aa0a 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="avatars">
+  <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }">
       <li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`">
         <UserAvatar :src="avatar.profile_image_url" class="avatars-img" />
       </li>
@@ -28,6 +28,29 @@
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       height: 25px !important;
       width: 25px !important;
+      background-color: $fallback--lightText;
+      background-color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+
+.transparent-avatar {
+  .avatars-item {
+    &:first-child {
+      position: relative;
+
+      .avatars-img {
+        &::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-color: $fallback--faint;
+          background-color: var(--faint, $fallback--faint);
+          left: 0;
+          top: 0;
+        }
+      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From df622e6ed6e78d9b49be3d9856b88d47afb7110e Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Thu, 4 Apr 2019 23:10:40 -0400
Subject: layout avatars side by side

---
 src/components/avatar_list/avatar_list.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 3941aa0a..aa2fa48b 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -14,14 +14,12 @@
   display: inline-flex; /* Causes LI items to display in row. */
   list-style-type: none;
   margin: 0;
-  padding: 0px 15px 0px 0px;
-  flex-direction: row-reverse;
 
   &-item {
     height: 25px;
+    width: 25px;
     margin: 0;
     padding: 0;
-    width: 15px;
 
     .avatars-img {
       border-radius: $fallback--avatarAltRadius;
-- 
cgit v1.2.3-70-g09d2


From 87a4cd450cc080bab6f3a1c66286bd6267f9f421 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Thu, 4 Apr 2019 23:12:37 -0400
Subject: adjust space between avatars

---
 src/components/avatar_list/avatar_list.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index aa2fa48b..dea1267e 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -14,13 +14,18 @@
   display: inline-flex; /* Causes LI items to display in row. */
   list-style-type: none;
   margin: 0;
+  padding: 0;
 
   &-item {
     height: 25px;
     width: 25px;
-    margin: 0;
+    margin: 0 2px 0 0;
     padding: 0;
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     .avatars-img {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-- 
cgit v1.2.3-70-g09d2


From f6847c163cf7fb82af73ab413c9459b89df77143 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Fri, 5 Apr 2019 05:49:31 -0400
Subject: adjust avatar size of avatar list

---
 src/components/avatar_list/avatar_list.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index dea1267e..d7ac22dd 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -17,10 +17,15 @@
   padding: 0;
 
   &-item {
-    height: 25px;
-    width: 25px;
-    margin: 0 2px 0 0;
-    padding: 0;
+    height: 24px;
+    width: 24px;
+    margin: 0 5px 0 0;
+    padding: 11px 0;
+
+    &:first-child {
+      border-left: 1px solid var(--faint, $fallback--faint);
+      padding-left: 12px !important;
+    }
 
     &:last-child {
       margin-right: 0;
@@ -29,8 +34,8 @@
     .avatars-img {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      height: 25px !important;
-      width: 25px !important;
+      height: 24px !important;
+      width: 24px !important;
       background-color: $fallback--lightText;
       background-color: var(--lightText, $fallback--lightText);
     }
-- 
cgit v1.2.3-70-g09d2


From 80ba4f27c8109be6871a8c2b539cbb392eb8513f Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Fri, 5 Apr 2019 14:20:50 -0400
Subject: add hover effect to label

---
 src/components/avatar_list/avatar_list.vue |  2 -
 src/components/status/status.vue           | 61 +++++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 12 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index d7ac22dd..dcffb7cd 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -20,10 +20,8 @@
     height: 24px;
     width: 24px;
     margin: 0 5px 0 0;
-    padding: 11px 0;
 
     &:first-child {
-      border-left: 1px solid var(--faint, $fallback--faint);
       padding-left: 12px !important;
     }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8d95343d..9be6b2b9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -135,11 +135,13 @@
 
           <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0" :class="{ 'status-fadein': combinedFavsAndRepeatsAvatars.length > 0 }">
             <ul class="stats">
-              <li class="stat-count" v-if="statusoid.favoritedBy && statusoid.favoritedBy.length > 0">
-                <a class="request-favorited-popup"><strong>{{statusoid.favoritedBy.length}}</strong> {{ $t('user_card.favorites') }}</a>
-              </li>
               <li class="stat-count" v-if="statusoid.rebloggedBy && statusoid.rebloggedBy.length > 0">
-                <a class="request-favorited-popup"><strong>{{statusoid.rebloggedBy.length}}</strong> {{ $t('settings.notification_visibility_repeats') }}</a>
+                <div class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</div>
+                <div class="stat-number">{{ statusoid.rebloggedBy.length }}</div>
+              </li>
+              <li class="stat-count" v-if="statusoid.favoritedBy && statusoid.favoritedBy.length > 0">
+                <div class="stat-title">{{ $t('user_card.favorites') }}</div>
+                <div class="stat-number">{{ statusoid.favoritedBy.length }}</div>
               </li>
               <li class="avatar-row">
                 <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList>
@@ -627,25 +629,52 @@ a.unmute {
 }
 
 .favs-repeated-users {
-  margin-top: 10px;
+  margin-top: 0.75em;
 
   .stats {
-    border-bottom: 1px solid var(--faint, $fallback--faint);
-    border-top: 1px solid var(--faint, $fallback--faint);
     width: 100%;
     margin: 0;
     list-style: none;
     overflow: hidden;
     padding: 0;
     display: flex;
+    line-height: 1em;
 
     .stat-count {
       margin-right: 10px;
 
+      .stat-title {
+        color: var(--faint, rgba(185, 185, 186, 0.5));
+        font-weight: lighter;
+        font-size: 12px;
+        text-transform: uppercase;
+        position: relative;
+        margin-bottom: 3px;
+        cursor: pointer;
+        line-height: 1em;
+
+        &:hover,
+        &:focus {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 100%;
+            width: 100%;
+            height: 1px;
+            background-color: var(--faint, $fallback--faint);
+          }
+        }
+      }
+
+      .stat-number {
+        font-weight: bolder;
+        font-size: 16px;
+        line-height: 1em;
+      }
+
       a {
         cursor: pointer;
-        padding-top: 14px;
-        float: left;
         color: var(--faint, $fallback--faint);
 
         strong {
@@ -662,10 +691,22 @@ a.unmute {
     .avatar-row {
       flex: 1;
       overflow: hidden;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 1px;
+        left: 0;
+        background-color: var(--faint, $fallback--faint);
+      }
     }
 
     li {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From c1001da860055b45c1ba09d640b3f45d731e047e Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Sat, 6 Apr 2019 14:07:09 -0400
Subject: remove important in css property

---
 src/components/avatar_list/avatar_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index dcffb7cd..9cbcbee0 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -22,7 +22,7 @@
     margin: 0 5px 0 0;
 
     &:first-child {
-      padding-left: 12px !important;
+      padding-left: 12px;
     }
 
     &:last-child {
-- 
cgit v1.2.3-70-g09d2


From 7885955344ba787549b1ccc07b0d3901e3a6b0d6 Mon Sep 17 00:00:00 2001
From: Brenden Bice <brenden.next@gmail.com>
Date: Sat, 6 Apr 2019 14:25:26 -0400
Subject: remove important in the property value

---
 src/components/avatar_list/avatar_list.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 9cbcbee0..077d002d 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -16,7 +16,7 @@
   margin: 0;
   padding: 0;
 
-  &-item {
+  li.avatars-item {
     height: 24px;
     width: 24px;
     margin: 0 5px 0 0;
@@ -32,8 +32,8 @@
     .avatars-img {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      height: 24px !important;
-      width: 24px !important;
+      height: 24px;
+      width: 24px;
       background-color: $fallback--lightText;
       background-color: var(--lightText, $fallback--lightText);
     }
-- 
cgit v1.2.3-70-g09d2


From 75a650aa6de13eaf1e0e17d5ec7bfffeee0db212 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 17 Apr 2019 18:28:44 +0300
Subject: update styles and remove unnecessary stuff

---
 src/components/avatar_list/avatar_list.vue | 49 ++++++++----------------------
 src/components/status/status.vue           | 30 ++++++------------
 2 files changed, 22 insertions(+), 57 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 077d002d..fc5abf01 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 == 15 }">
-      <li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`">
-        <UserAvatar :src="avatar.profile_image_url" class="avatars-img" />
+  <ul class="avatars">
+      <li class="avatars-item" v-for="avatar in slicedAvatars">
+        <UserAvatar :src="avatar.profile_image_url" class="avatar-small" />
       </li>
   </ul>
 </template>
@@ -10,53 +10,28 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+
 .avatars {
-  display: inline-flex; /* Causes LI items to display in row. */
-  list-style-type: none;
+  display: flex;
   margin: 0;
   padding: 0;
 
+  // For hiding overflowing elements
+  flex-wrap: wrap;
+  height: 24px;
+
   li.avatars-item {
-    height: 24px;
-    width: 24px;
-    margin: 0 5px 0 0;
+    margin: 0 0 5px 5px;
 
     &:first-child {
-      padding-left: 12px;
+      padding-left: 10px;
     }
 
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .avatars-img {
+    .avatar-small {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       height: 24px;
       width: 24px;
-      background-color: $fallback--lightText;
-      background-color: var(--lightText, $fallback--lightText);
-    }
-  }
-}
-
-.transparent-avatar {
-  .avatars-item {
-    &:first-child {
-      position: relative;
-
-      .avatars-img {
-        &::after {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          background-color: $fallback--faint;
-          background-color: var(--faint, $fallback--faint);
-          left: 0;
-          top: 0;
-        }
-      }
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b0882964..d79bb2b9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -135,19 +135,19 @@
 
           <transition name="fade">
             <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0 && isFocused">
-              <ul class="stats">
-                <li class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
+              <div class="stats">
+                <div class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
                   <a class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</a>
                   <div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div>
-                </li>
-                <li class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
+                </div>
+                <div class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
                   <a class="stat-title">{{ $t('user_card.favorites') }}</a>
                   <div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div>
-                </li>
-                <li class="avatar-row">
+                </div>
+                <div class="avatar-row">
                   <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
           </transition>
 
@@ -631,19 +631,15 @@ a.unmute {
 }
 
 .favs-repeated-users {
-  margin-top: 0.75em;
+  margin-top: $status-margin;
 
   .stats {
     width: 100%;
-    margin: 0;
-    list-style: none;
-    overflow: hidden;
-    padding: 0;
     display: flex;
     line-height: 1em;
 
     .stat-count {
-      margin-right: 10px;
+      margin-right: 0.8em;
 
       .stat-title {
         color: var(--faint, $fallback--faint);
@@ -651,13 +647,7 @@ a.unmute {
         text-transform: uppercase;
         position: relative;
         margin-bottom: 3px;
-        cursor: pointer;
         line-height: 1em;
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-        }
       }
 
       .stat-number {
-- 
cgit v1.2.3-70-g09d2


From 3e23b341687a94e0b5df74447a5e19bbfb59343b Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 22 Apr 2019 21:07:29 +0300
Subject: fix overflow behavior

---
 src/components/avatar_list/avatar_list.vue | 12 ++++++------
 src/components/status/status.vue           | 12 +++---------
 2 files changed, 9 insertions(+), 15 deletions(-)

(limited to 'src/components/avatar_list/avatar_list.vue')

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index fc5abf01..b14474ba 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,9 +1,9 @@
 <template>
-  <ul class="avatars">
-      <li class="avatars-item" v-for="avatar in slicedAvatars">
+  <div class="avatars">
+      <div class="avatars-item" v-for="avatar in slicedAvatars">
         <UserAvatar :src="avatar.profile_image_url" class="avatar-small" />
-      </li>
-  </ul>
+      </div>
+  </div>
 </template>
 
 <script src="./avatar_list.js" ></script>
@@ -20,11 +20,11 @@
   flex-wrap: wrap;
   height: 24px;
 
-  li.avatars-item {
+  .avatars-item {
     margin: 0 0 5px 5px;
 
     &:first-child {
-      padding-left: 10px;
+      padding-left: 5px;
     }
 
     .avatar-small {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d79bb2b9..a9ce722c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -639,15 +639,13 @@ a.unmute {
     line-height: 1em;
 
     .stat-count {
-      margin-right: 0.8em;
+      margin-right: $status-margin;
 
       .stat-title {
         color: var(--faint, $fallback--faint);
         font-size: 12px;
         text-transform: uppercase;
         position: relative;
-        margin-bottom: 3px;
-        line-height: 1em;
       }
 
       .stat-number {
@@ -661,6 +659,8 @@ a.unmute {
       flex: 1;
       overflow: hidden;
       position: relative;
+      display: flex;
+      align-items: center;
 
       &::before {
         content: '';
@@ -671,12 +671,6 @@ a.unmute {
         background-color: var(--faint, $fallback--faint);
       }
     }
-
-    li {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2

