mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Update DiscoverComponent

This commit is contained in:
Daniel Supernault 2018-11-27 01:56:22 -07:00
parent 2254ecf27d
commit 9a7d13ebf2
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/assets/js/components/DiscoverComponent.vue
View File

@ -16,10 +16,7 @@
</div>
<p class="lead font-weight-bold mb-0 text-truncate"><a :href="profile.url" class="text-dark">{{profile.username}}</a></p>
<p class="text-muted text-truncate">{{profile.name}}</p>
<form class="follow-form" method="post" action="/i/follow" data-id="#" data-action="follow">
<input type="hidden" name="item" value="#">
<button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
</form>
<button class="btn btn-primary font-weight-bold px-4 py-0" v-on:click="followUser(profile.id, $event)">Follow</button>
</div>
</div>
</div>
@ -36,16 +33,6 @@
<a class="card info-overlay card-md-border-0" :href="post.url">
<div class="square filter_class">
<div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }"></div>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span class="pr-4">
<span class="far fa-heart fa-lg pr-1"></span> {{post.likes_count}}
</span>
<span>
<span class="far fa-comment fa-lg pr-1"></span> {{post.comments_count}}
</span>
</h5>
</div>
</div>
</a>
</div>
@ -53,7 +40,7 @@
</div>
</section>
<section class="mb-5">
<p class="lead text-center">To view more posts, check the <a href="#" class="font-weight-bold">home</a>, <a href="#" class="font-weight-bold">local</a> or <a href="#" class="font-weight-bold">federated</a> timelines.</p>
<p class="lead text-center">To view more posts, check the <a href="/" class="font-weight-bold">home</a> or <a href="/timeline/public" class="font-weight-bold">local</a> timelines.</p>
</section>
</div>
</template>
@ -68,10 +55,26 @@ export default {
}
},
mounted() {
this.fetchData();
this.slowTimeout();
this.fetchData();
},
methods: {
followUser(id, event) {
axios.post('/i/follow', {
item: id
}).then(res => {
let el = $(event.target);
el.addClass('btn-outline-secondary').removeClass('btn-primary');
el.text('Unfollow');
}).catch(err => {
swal(
'Whoops! Something went wrong...',
'An error occured, please try again later.',
'error'
);
});
},
fetchData() {
axios.get('/api/v2/discover')
.then((res) => {
@ -80,16 +83,23 @@ export default {
this.posts = data.posts;
if(this.people.length > 1) {
$('.section-people .lds-ring').hide();
$('.section-people .loader').hide();
$('.section-people .row.d-none').removeClass('d-none');
}
if(this.posts.length > 1) {
$('.section-explore .lds-ring').hide();
$('.section-explore .loader').hide();
$('.section-explore .row.d-none').removeClass('d-none');
}
});
}
},
slowTimeout() {
setTimeout(function() {
let el = $('<p>').addClass('font-weight-bold').text('This is taking longer than expected to load. Please try reloading the page if this does not load after 30 seconds.');
$('.section-people .loader').append(el);
$('.section-explore .loader').append(el);
}, 5000);
}
}
}
</script>