Sharkey/src/client/app/desktop/views/pages/user/user.followers-you-know.vue

83 lines
1.6 KiB
Vue
Raw Normal View History

2018-02-14 17:32:13 +02:00
<template>
2018-09-01 06:58:04 +03:00
<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
2018-11-13 15:45:28 +02:00
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
2018-02-20 15:31:12 +02:00
<div v-if="!fetching && users.length > 0">
2018-04-09 12:52:29 +03:00
<router-link v-for="user in users" :to="user | userPage" :key="user.id">
2018-07-24 17:43:14 +03:00
<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>
2018-02-20 15:31:12 +02:00
</router-link>
2018-02-14 17:32:13 +02:00
</div>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
2018-02-14 17:32:13 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
2018-03-27 10:51:12 +03:00
2018-02-14 17:32:13 +02:00
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.followers-you-know.vue'),
2018-02-14 17:32:13 +02:00
props: ['user'],
data() {
return {
users: [],
fetching: true
};
},
mounted() {
2018-11-09 01:13:34 +02:00
this.$root.api('users/followers', {
2018-03-29 08:48:47 +03:00
userId: this.user.id,
2018-02-14 17:32:13 +02:00
iknow: true,
limit: 16
}).then(x => {
this.users = x.users;
2018-02-19 16:37:09 +02:00
this.fetching = false;
2018-02-14 17:32:13 +02:00
});
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 13:59:19 +03:00
.vahgrswmbzfdlmomxnqftuueyvwaafth
2018-09-26 14:28:13 +03:00
background var(--face)
2018-09-22 14:39:12 +03:00
box-shadow var(--shadow)
border-radius var(--round)
2018-02-14 17:32:13 +02:00
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
2018-09-27 08:52:10 +03:00
color var(--faceHeaderText)
2018-04-29 02:51:17 +03:00
box-shadow 0 1px rgba(#000, 0.07)
2018-02-14 17:32:13 +02:00
> i
margin-right 4px
> div
padding 8px
> a
display inline-block
margin 4px
> img
width 48px
height 48px
vertical-align bottom
border-radius 100%
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>