UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 00:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update DiscoverComponent

Browse source
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> </div>
<p class="lead font-weight-bold mb-0 text-truncate"><a :href="profile.url" class="text-dark">{{profile.username}}</a></p> <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> <p class="text-muted text-truncate">{{profile.name}}</p>
<form class="follow-form" method="post" action="/i/follow" data-id="#" data-action="follow"> <button class="btn btn-primary font-weight-bold px-4 py-0" v-on:click="followUser(profile.id, $event)">Follow</button>
<input type="hidden" name="item" value="#">
<button class="btn btn-primary font-weight-bold px-4 py-0" type="submit">Follow</button>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -36,16 +33,6 @@
<a class="card info-overlay card-md-border-0" :href="post.url"> <a class="card info-overlay card-md-border-0" :href="post.url">
<div class="square filter_class"> <div class="square filter_class">
<div class="square-content" v-bind:style="{ 'background-image': 'url(' + post.thumb + ')' }"></div> <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> </div>
</a> </a>
</div> </div>
@ -53,7 +40,7 @@
</div> </div>
</section> </section>
<section class="mb-5"> <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> </section>
</div> </div>
</template> </template>
@ -68,10 +55,26 @@ export default {
} }
}, },
mounted() { mounted() {
this.fetchData(); this.slowTimeout();
this.fetchData();
}, },
methods: { 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() { fetchData() {
axios.get('/api/v2/discover') axios.get('/api/v2/discover')
.then((res) => { .then((res) => {
@ -80,16 +83,23 @@ export default {
this.posts = data.posts; this.posts = data.posts;
if(this.people.length > 1) { if(this.people.length > 1) {
$('.section-people .lds-ring').hide(); $('.section-people .loader').hide();
$('.section-people .row.d-none').removeClass('d-none'); $('.section-people .row.d-none').removeClass('d-none');
} }
if(this.posts.length > 1) { if(this.posts.length > 1) {
$('.section-explore .lds-ring').hide(); $('.section-explore .loader').hide();
$('.section-explore .row.d-none').removeClass('d-none'); $('.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> </script>