display users in stacked avatarlist

2 files changed, 69 insertions, 0 deletions

diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
new file mode 100644
index 00000000..0fb61691
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.js
@@ -0,0 +1,15 @@
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
+const AvatarList = {
+  props: ['avatars'],
+  computed: {
+    slicedAvatars () {
+      return this.avatars ? this.avatars.slice(0, 9) : []
+    }
+  },
+  components: {
+    UserAvatar
+  }
+}
+
+export default AvatarList
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>