forked from mirror/pixelfed
108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="col-12">
|
||
|
|
<p class="font-weight-bold text-lighter text-uppercase">Profiles Directory</p>
|
||
|
|
<div v-if="loaded" class="">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 col-md-6 p-1" v-for="(profile, index) in profiles">
|
||
|
|
<div class="card card-body border shadow-none py-2">
|
||
|
|
<div class="media">
|
||
|
|
<a :href="profile.url"><img :src="profile.avatar" class="rounded-circle border mr-3" alt="..." width="40px" height="40px"></a>
|
||
|
|
<div class="media-body">
|
||
|
|
<p class="mt-0 mb-0 font-weight-bold">
|
||
|
|
<a :href="profile.url" class="text-dark">{{profile.username}}</a>
|
||
|
|
</p>
|
||
|
|
<p class="mb-1 small text-lighter d-flex justify-content-between font-weight-bold">
|
||
|
|
<span>
|
||
|
|
<span>{{prettyCount(profile.statuses_count)}}</span> POSTS
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
<span>{{prettyCount(profile.followers_count)}}</span> FOLLOWERS
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p class="mb-1">
|
||
|
|
<span v-for="(post, i) in profile.posts" class="shadow-sm" :key="'profile_posts_'+i">
|
||
|
|
<a :href="post.url" class="text-decoration-none mr-1">
|
||
|
|
<img :src="thumbUrl(post)" width="62.3px" height="62.3px" class="border rounded">
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="showLoadMore" class="col-12">
|
||
|
|
<p class="text-center mb-0 pt-3">
|
||
|
|
<button class="btn btn-outline-secondary btn-sm px-4 py-1 font-weight-bold" @click="loadMore()">Load More</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 d-flex justify-content-center align-items-center">
|
||
|
|
<div class="spinner-border" role="status">
|
||
|
|
<span class="sr-only">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style type="text/css" scoped></style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loaded: false,
|
||
|
|
showLoadMore: true,
|
||
|
|
profiles: [],
|
||
|
|
page: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeMount() {
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
fetchData() {
|
||
|
|
axios.get('/api/pixelfed/v2/discover/profiles', {
|
||
|
|
params: {
|
||
|
|
page: this.page
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
if(res.data.length == 0) {
|
||
|
|
this.showLoadMore = false;
|
||
|
|
this.loaded = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.profiles = res.data;
|
||
|
|
this.showLoadMore = this.profiles.length == 8;
|
||
|
|
this.loaded = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
prettyCount(val) {
|
||
|
|
return App.util.format.count(val);
|
||
|
|
},
|
||
|
|
|
||
|
|
loadMore() {
|
||
|
|
this.loaded = false;
|
||
|
|
this.page++;
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
|
||
|
|
thumbUrl(p) {
|
||
|
|
return p.media_attachments[0].url;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|