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

Update Timeline.vue component, fix infinite scroll and improve empty state in home timeline

This commit is contained in:
Daniel Supernault 2019-02-12 23:27:24 -07:00
parent d08b059184
commit 758a5d02ef
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
resources/assets/js/components/Timeline.vue
View File

@ -2,6 +2,11 @@
<div class="container" style=""> <div class="container" style="">
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1"> <div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
<div v-if="loading" class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id"> <div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
<div class="card-header d-inline-flex align-items-center bg-white"> <div class="card-header d-inline-flex align-items-center bg-white">
@ -123,15 +128,29 @@
</form> </form>
</div> </div>
</div> </div>
<div v-if="modes.infinite == true"> <div v-if="modes.infinite == true && !loading && feed.length > 0">
<div class="card">
<div class="card-body">
<infinite-loading @infinite="infiniteTimeline"> <infinite-loading @infinite="infiniteTimeline">
<div slot="no-more" class="font-weight-bold text-light">No more posts to load</div> <div slot="no-more" class="font-weight-bold">No more posts to load</div>
<div slot="no-results" class="font-weight-bold text-light">No posts found</div> <div slot="no-results" class="font-weight-bold">No posts found</div>
</infinite-loading> </infinite-loading>
</div> </div>
<div v-if="modes.infinite == false" class="pagination d-none"> </div>
</div>
<div v-if="modes.infinite == false && !loading && feed.length > 0" class="pagination d-none">
<p class="btn btn-outline-secondary font-weight-bold btn-block" v-on:click="loadMore">Load more posts</p> <p class="btn btn-outline-secondary font-weight-bold btn-block" v-on:click="loadMore">Load more posts</p>
</div> </div>
<div v-if="!loading && scope == 'home' && feed.length == 0">
<div class="card">
<div class="card-body text-center">
<p class="h2 font-weight-lighter p-5">Hello, {{profile.acct}}</p>
<p class="text-lighter"><i class="fas fa-camera-retro fa-5x"></i></p>
<p class="h3 font-weight-lighter p-5">Start following people to build your timeline.</p>
<p><a href="/discover" class="btn btn-primary font-weight-bold py-0">Discover new people and posts</a></p>
</div>
</div>
</div>
</div> </div>
<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2"> <div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2">
@ -214,7 +233,7 @@
</div> </div>
</div> </div>
<div class="card-body pt-2 contents" style="max-height: 170px; overflow-y: scroll;"> <div class="card-body pt-2 contents" style="max-height: 170px; overflow-y: scroll;">
<div class="media mb-3 align-items-center" v-for="(n, index) in notifications"> <div v-if="notifications.length > 0" class="media mb-3 align-items-center" v-for="(n, index) in notifications">
<img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px"> <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px">
<div class="media-body font-weight-light small"> <div class="media-body font-weight-light small">
<div v-if="n.type == 'favourite'"> <div v-if="n.type == 'favourite'">
@ -245,6 +264,10 @@
</div> </div>
</div> </div>
<div v-if="notifications.length == 0" class="text-lighter text-center py-3">
<p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
<p class="mb-0 small font-weight-bold">0 Notifications!</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -297,7 +320,7 @@
page: 2, page: 2,
feed: [], feed: [],
profile: {}, profile: {},
scope: window.location.pathname, scope: window.location.pathname == '/' ? 'home' : 'local',
min_id: 0, min_id: 0,
max_id: 0, max_id: 0,
notifications: {}, notifications: {},
@ -357,7 +380,7 @@
fetchTimelineApi() { fetchTimelineApi() {
let homeTimeline = '/api/v1/timelines/home?page=1'; let homeTimeline = '/api/v1/timelines/home?page=1';
let localTimeline = '/api/v1/timelines/public?page=1'; let localTimeline = '/api/v1/timelines/public?page=1';
let apiUrl = this.scope == '/' ? homeTimeline : localTimeline; let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
axios.get(apiUrl).then(res => { axios.get(apiUrl).then(res => {
let data = res.data; let data = res.data;
this.feed.push(...data); this.feed.push(...data);