aboutsummaryrefslogtreecommitdiff
path: root/src/components/avatar_list/avatar_list.vue
diff options
context:
space:
mode:
authorShpuld Shpludson <shp@cock.li>2020-01-15 16:35:13 +0000
committerShpuld Shpludson <shp@cock.li>2020-01-15 16:35:13 +0000
commit3ab128e73924ce34d190ff609cb9b081cdffe402 (patch)
treebba013a7d61688b90c1f59a8f9fa6c3323b72a05 /src/components/avatar_list/avatar_list.vue
parent7c26435e66fd7e142ea4b88fbe51eede32eeb5ce (diff)
parent7397636914a9d3e7fd30373034c25175273ab808 (diff)
Merge branch 'develop' into 'master'
`master` refresh with `develop` See merge request pleroma/pleroma-fe!1028
Diffstat (limited to 'src/components/avatar_list/avatar_list.vue')
-rw-r--r--src/components/avatar_list/avatar_list.vue46
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
new file mode 100644
index 00000000..e1b6e971
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.vue
@@ -0,0 +1,46 @@
+<template>
+ <div class="avatars">
+ <router-link
+ v-for="user in slicedUsers"
+ :key="user.id"
+ :to="userProfileLink(user)"
+ class="avatars-item"
+ >
+ <UserAvatar
+ :user="user"
+ class="avatar-small"
+ />
+ </router-link>
+ </div>
+</template>
+
+<script src="./avatar_list.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.avatars {
+ display: flex;
+ margin: 0;
+ padding: 0;
+
+ // For hiding overflowing elements
+ flex-wrap: wrap;
+ height: 24px;
+
+ .avatars-item {
+ margin: 0 0 5px 5px;
+
+ &:first-child {
+ padding-left: 5px;
+ }
+
+ .avatar-small {
+ border-radius: $fallback--avatarAltRadius;
+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+ height: 24px;
+ width: 24px;
+ }
+ }
+}
+</style>