浏览代码

Update Timeline.vue, increase pagination limit from 3 to 12 and add empty feed placeholder

Daniel Supernault 4 年之前
父节点
当前提交
916e8f7111
共有 1 个文件被更改,包括 23 次插入8 次删除
  1. 23 8
      resources/assets/js/components/Timeline.vue

+ 23 - 8
resources/assets/js/components/Timeline.vue

@@ -280,17 +280,24 @@
 								:status="status"
 								:status="status"
 								:recommended="true" />
 								:recommended="true" />
 						</div>
 						</div>
+
+						<div v-if="!loading && emptyFeed">
+							<div class="card rounded-0 mt-3 status-card rounded-0 shadow-none border">
+								<div class="card-body py-5 my-5">
+									<p class="text-center"><i class="fas fa-battery-empty fa-8x text-lighter"></i></p>
+									<p class="text-center h3 font-weight-light">empty_timeline.jpg</p>
+									<p class="text-center text-muted font-weight-light">We cannot find any posts for this timeline.</p>
+									<p class="text-center mb-0">
+										<a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
+									</p>
+								</div>
+							</div>
+						</div>
 					</div>
 					</div>
 				</div>
 				</div>
 				<div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
 				<div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
 					<div>
 					<div>
 
 
-						<!-- <div class="mb-4">
-							<a class="btn btn-block btn-primary btn-sm font-weight-bold mb-3 border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
-								<i class="far fa-plus-square pr-3 fa-lg pt-1"></i> New Post
-							</a>
-						</div> -->
-
 						<div class="mb-4">
 						<div class="mb-4">
 							<div v-show="!loading" class="">
 							<div v-show="!loading" class="">
 								<div class="pb-2">
 								<div class="pb-2">
@@ -580,7 +587,8 @@
 				recentFeed: this.scope === 'home' ? true : false,
 				recentFeed: this.scope === 'home' ? true : false,
 				recentFeedMin: null,
 				recentFeedMin: null,
 				recentFeedMax: null,
 				recentFeedMax: null,
-				reactionBar: true
+				reactionBar: true,
+				emptyFeed: false
 			}
 			}
 		},
 		},
 
 
@@ -687,11 +695,18 @@
 				axios.get(apiUrl, {
 				axios.get(apiUrl, {
 					params: {
 					params: {
 						max_id: this.max_id,
 						max_id: this.max_id,
-						limit: 3,
+						limit: 12,
 						recent_feed: this.recentFeed
 						recent_feed: this.recentFeed
 					}
 					}
 				}).then(res => {
 				}).then(res => {
 					let data = res.data;
 					let data = res.data;
+
+					if(!data.length) {
+						this.loading = false;
+						this.emptyFeed = true;
+						return;
+					}
+
 					this.feed.push(...data);
 					this.feed.push(...data);
 					let ids = data.map(status => status.id);
 					let ids = data.map(status => status.id);
 					this.ids = ids;
 					this.ids = ids;