akkoma-fe/src/components/avatar_list/avatar_list.vue

44 lines
794 B
Vue
Raw Normal View History

2019-04-02 02:30:23 +00:00
<template>
2019-04-22 18:07:29 +00:00
<div class="avatars">
<router-link
:to="userProfileLink(user)"
class="avatars-item"
v-for="user in slicedUsers"
:key="user.id"
>
<UserAvatar :user="user" class="avatar-small" />
</router-link>
2019-04-22 18:07:29 +00:00
</div>
2019-04-02 02:30:23 +00:00
</template>
<script src="./avatar_list.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
2019-04-02 02:30:23 +00:00
.avatars {
display: flex;
2019-04-02 02:30:23 +00:00
margin: 0;
2019-04-05 03:12:37 +00:00
padding: 0;
2019-04-02 02:30:23 +00:00
// For hiding overflowing elements
flex-wrap: wrap;
height: 24px;
2019-04-22 18:07:29 +00:00
.avatars-item {
margin: 0 0 5px 5px;
2019-04-05 09:49:31 +00:00
&:first-child {
2019-04-22 18:07:29 +00:00
padding-left: 5px;
2019-04-05 09:49:31 +00:00
}
2019-04-02 08:25:08 +00:00
.avatar-small {
2019-04-02 20:00:09 +00:00
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
2019-04-06 18:25:26 +00:00
height: 24px;
width: 24px;
2019-04-02 02:30:23 +00:00
}
}
}
</style>