Merge pull request #888 from pixelfed/frontend-ui-refactor

Frontend ui refactor

resources/assets/js/components/Timeline.vue

@@ -227,12 +227,12 @@
 							<a class="text-dark small" href="/account/activity">See All</a>
 						</p>
 					</div>
-					<div class="card-body loader text-center" style="height: 170px;">
+					<div class="card-body loader text-center" style="height: 270px;">
 						<div class="spinner-border" role="status">
 							<span class="sr-only">Loading...</span>
 						</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: 270px; overflow-y: scroll;">
 						<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">
 							<div class="media-body font-weight-light small">
@@ -262,7 +262,12 @@
 									</p>	
 								</div>
 							</div>
-							
+						</div>
+						<div v-if="notifications.length">
+							<infinite-loading @infinite="infiniteNotifications">
+								<div slot="no-results" class="font-weight-bold"></div>
+								<div slot="no-more" class="font-weight-bold"></div>
+							</infinite-loading>
 						</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>
@@ -318,6 +323,7 @@
 				min_id: 0,
 				max_id: 0,
 				notifications: {},
+				notificationCursor: 2,
 				stories: {},
 				suggestions: {},
 				loading: true,
@@ -438,17 +444,44 @@
 			fetchNotifications() {
 				axios.get('/api/v1/notifications')
 				.then(res => {
-					this.notifications = res.data.filter(n => {
+					let data = res.data.filter(n => {
 						if(n.type == 'share' && !status) {
 							return false;
 						}
 						return true;
 					});
+					this.notifications = data;
 					$('.notification-card .loader').addClass('d-none');
 					$('.notification-card .contents').removeClass('d-none');
 				});
 			},
 
+			infiniteNotifications($state) {
+				if(this.notificationCursor > 10) {
+					$state.complete();
+					return;
+				}
+				axios.get('/api/v1/notifications', {
+					params: {
+						page: this.notificationCursor
+					}
+				}).then(res => {
+					if(res.data.length) {
+						let data = res.data.filter(n => {
+							if(n.type == 'share' && !status) {
+								return false;
+							}
+							return true;
+						});
+						this.notifications.push(...data);
+						this.notificationCursor++;
+						$state.loaded();
+					} else {
+						$state.complete();
+					}
+				});
+			},
+
 			reportUrl(status) {
 				let type = status.in_reply_to ? 'comment' : 'post';
 				let id = status.id;

resources/views/site/fediverse.blade.php

@@ -8,10 +8,13 @@
   <hr>
   <section>
     <p class="lead">Fediverse is a portmanteau of “federation” and “universe”. It is a common, informal name for a somewhat broad federation of social network servers.</p>
-    <p class="lead font-weight-bold text-muted mt-4">Supported Fediverse Projects</p>
+    <p class="lead font-weight-bold text-muted mt-4 mb-0">Supported Fediverse Projects</p>
+    <p class="small text-muted">This is a partial list of well known supported projects</p>
     <ul class="lead pl-4">
-      <li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> – A federated twitter alternative.</li>
       <li><a href="https://anfora.app/" rel="nofollow noopener">Anfora</a> – Self-hosted photo gallery social network.</li>
+      <li><a href="https://pleroma.social/" rel="nofollow noopener">Pleroma</a> – A federated microblogging alternative.</li>
+      <li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> – A federated microblogging alternative.</li>
+      <li><a href="https://github.com/syuilo/misskey" rel="nofollow noopener">Misskey</a> – A federated microblogging alternative.</li>
     </ul>
   </section>
 @endsection