mirror of https://github.com/pixelfed/pixelfed.git
84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="discover-daily-trending">
|
||
|
|
<div class="card bg-stellar">
|
||
|
|
<div class="card-body m-5">
|
||
|
|
<div class="row d-flex align-items-center">
|
||
|
|
<div class="col-12 col-md-5">
|
||
|
|
<p class="font-default text-light mb-0">Popular and trending posts</p>
|
||
|
|
<h1 class="display-4 font-default text-white" style="font-weight: 700;">Daily Trending</h1>
|
||
|
|
<button class="btn btn-outline-light rounded-pill" @click="viewMore()">View more trending posts</button>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-md-7">
|
||
|
|
<div v-if="isLoaded" class="row">
|
||
|
|
<div v-for="(post, index) in trending" class="col-4">
|
||
|
|
<a :href="post.url" @click.prevent="gotoPost(post.id)">
|
||
|
|
<img :src="post.media_attachments[0].url" class="shadow m-1" width="170" height="170" style="object-fit: cover;border-radius:8px">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="row">
|
||
|
|
<div class="col-12 d-flex justify-content-center">
|
||
|
|
<b-spinner type="grow" variant="light" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isLoaded: false,
|
||
|
|
initialFetch: false,
|
||
|
|
trending: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
if(!this.initialFetch) {
|
||
|
|
this.fetchTrending();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchTrending() {
|
||
|
|
axios.get('/api/pixelfed/v2/discover/posts/trending', {
|
||
|
|
params: {
|
||
|
|
range: 'daily'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
this.trending = res.data.filter(p => p.pf_type === 'photo').slice(0, 9);
|
||
|
|
this.isLoaded = true;
|
||
|
|
this.initialFetch = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
gotoPost(id) {
|
||
|
|
this.$router.push('/i/web/post/' + id);
|
||
|
|
},
|
||
|
|
|
||
|
|
viewMore() {
|
||
|
|
this.$emit('btn-click', 'trending');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.discover-daily-trending {
|
||
|
|
.bg-stellar {
|
||
|
|
background: #7474BF;
|
||
|
|
background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
|
||
|
|
background: linear-gradient(to right, #348AC7, #7474BF);
|
||
|
|
}
|
||
|
|
.font-default {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||
|
|
letter-spacing: -0.7px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|