rudeshark.net/src/client/app/desktop/views/pages/user/user.friends.vue

125 lines
2.4 KiB
Vue
Raw Normal View History

2018-02-14 16:32:13 +01:00
<template>
2018-02-20 17:39:51 +01:00
<div class="friends">
2018-02-14 16:32:13 +01:00
<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
2018-02-19 15:37:09 +01:00
<template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users">
2018-03-27 09:51:12 +02:00
<router-link class="avatar-anchor" :to="`/@${getAcct(friend)}`">
2018-03-29 07:48:47 +02:00
<img class="avatar" :src="`${friend.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
2018-02-19 15:37:09 +01:00
</router-link>
<div class="body">
2018-03-27 09:51:12 +02:00
<router-link class="name" :to="`/@${getAcct(friend)}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
<p class="username">@{{ getAcct(friend) }}</p>
2018-02-19 15:37:09 +01:00
</div>
<mk-follow-button :user="friend"/>
2018-02-14 16:32:13 +01:00
</div>
2018-02-19 15:37:09 +01:00
</template>
2018-02-14 16:32:13 +01:00
<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-04-02 06:44:32 +02:00
import getAcct from '../../../../../../acct/render';
2018-03-27 09:51:12 +02:00
2018-02-14 16:32:13 +01:00
export default Vue.extend({
props: ['user'],
data() {
return {
users: [],
fetching: true
};
},
2018-03-27 09:51:12 +02:00
method() {
getAcct
},
2018-02-14 16:32:13 +01:00
mounted() {
2018-02-18 04:35:18 +01:00
(this as any).api('users/get_frequently_replied_users', {
2018-03-29 07:48:47 +02:00
userId: this.user.id,
2018-02-14 16:32:13 +01:00
limit: 4
}).then(docs => {
this.users = docs.map(doc => doc.user);
2018-02-19 15:37:09 +01:00
this.fetching = false;
2018-02-14 16:32:13 +01:00
});
}
});
</script>
<style lang="stylus" scoped>
2018-02-20 17:39:51 +01:00
.friends
2018-02-14 16:32:13 +01:00
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i
margin-right 4px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
> .user
padding 16px
border-bottom solid 1px #eee
&:last-child
border-bottom none
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
display block
width 42px
height 42px
margin 0
border-radius 8px
vertical-align bottom
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color #555
> .username
display block
margin 0
font-size 15px
line-height 16px
color #ccc
2018-02-16 19:01:00 +01:00
> .mk-follow-button
2018-02-14 16:32:13 +01:00
position absolute
top 16px
right 16px
</style>