Merge pull request #2291 from pixelfed/staging

Add Grid Mode to Timelines

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Added New Post notification to Timeline ([a0e7c4d5](https://github.com/pixelfed/pixelfed/commit/a0e7c4d5))
 - Add Instagram Import ([e2a6bdd0](https://github.com/pixelfed/pixelfed/commit/e2a6bdd0))
 - Add notification preview to NotificationCard ([28445e27](https://github.com/pixelfed/pixelfed/commit/28445e27))
+- Add Grid Mode to Timelines ([c1853ca8](https://github.com/pixelfed/pixelfed/commit/c1853ca8))
 
 ### Updated
 - Updated PostComponent, fix remote urls ([42716ccc](https://github.com/pixelfed/pixelfed/commit/42716ccc))

resources/assets/js/components/Timeline.vue

@@ -6,8 +6,19 @@
 				<button class="btn btn-dark px-4 rounded-pill font-weight-bold shadow" @click="syncNewPosts">Load New Posts</button>
 			</p>
 		</div>
+		<div class="col-12 pl-3 pl-md-0 pt-3 pl-0">
+			<div class="d-flex justify-content-between align-items-center">
+				<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
+				<p class="mb-0">
+					<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a>
+					&nbsp; | &nbsp; 
+					<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a>
+				</p>
+			</div>
+			<hr>
+		</div>
 		<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 mb-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1']">
-			<div style="margin-top:32px;">
+			<div style="margin-top:-8px;">
 				<story-component v-if="config.features.stories"></story-component>
 			</div>
 			<div>
@@ -330,6 +341,17 @@
 				</div>
 			</div>
 			<div v-else class="row">
+				<div class="col-12 pt-3">
+					<div class="d-flex justify-content-between align-items-center">
+						<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
+						<p class="mb-0">
+							<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a>
+							&nbsp; | &nbsp; 
+							<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a>
+						</p>
+					</div>
+					<hr>
+				</div>
 				<div class="col-12 col-md-4 p-1 p-md-3 mb-3" v-for="(s, index) in feed" :key="`${index}-${s.id}`">
 					<div class="card info-overlay card-md-border-0 shadow-sm border border-light" :href="statusUrl(s)">
 						<div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
@@ -1557,7 +1579,16 @@
 				this.feed.unshift(...data);
 				this.morePostsAvailable = false;
 				this.mpData = null;
-			}
+			},
+
+			switchFeedLayout(toggle) {
+				this.loading = true;
+				this.layout = toggle;
+				let self = this;
+				setTimeout(function() {
+					self.loading = false;
+				}, 500);
+			},
 		},
 		beforeDestroy () {
 			clearInterval(this.mpInterval);

resources/views/timeline/local.blade.php

@@ -8,7 +8,11 @@
 	</div>
 </noscript>
 
+@if(request()->has('l') && request()->input('l') == 'grid')
+<timeline scope="local" layout="grid"></timeline>
+@else
 <timeline scope="local" layout="feed"></timeline>
+@endif
 
 <div class="modal pr-0" tabindex="-1" role="dialog" id="composeModal">
 	<div class="modal-dialog" role="document">