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

Frontend ui refactor

public/mix-manifest.json

@@ -8,8 +8,8 @@
     "/js/compose.js": "/js/compose.js?id=041385233a3b1ed64d28",
     "/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
-    "/js/profile.js": "/js/profile.js?id=71deeec272baa24f40b8",
+    "/js/profile.js": "/js/profile.js?id=742fc029b8b7591f04bf",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
-    "/js/status.js": "/js/status.js?id=efd1a60dfa889e3654f7",
+    "/js/status.js": "/js/status.js?id=d30b9926fe4a4b2feee5",
     "/js/timeline.js": "/js/timeline.js?id=bc70f81d24b488ef564d"
 }

resources/assets/js/components/PostComponent.vue

@@ -490,6 +490,16 @@ export default {
           }
     },
 
+    beforeMount() {
+      let u = new URLSearchParams(window.location.search);
+      if(u.has('ui') && u.get('ui') == 'moment' && this.profileLayout != 'moment') {
+        this.profileLayout = 'moment';
+      }
+      if(u.has('ui') && u.get('ui') == 'metro' && this.profileLayout != 'metro') {
+        this.profileLayout = 'metro';
+      }
+    },
+
     mounted() {
       this.fetchRelationships();
     },

resources/assets/js/components/Profile.vue

@@ -546,6 +546,13 @@ export default {
 			$('nav.navbar').hide();
 			$('body').prepend('<div class="bg-white p-3 border-bottom"><div class="d-flex justify-content-between align-items-center"><div onclick="window.history.back();"><i class="fas fa-chevron-left fa-lg"></i></div><div class="font-weight-bold">' + this.profileUsername + '</div><div><i class="fas fa-chevron-right text-white fa-lg"></i></div></div></div>');
 		}
+		let u = new URLSearchParams(window.location.search);
+		if(u.has('ui') && u.get('ui') == 'moment' && this.profileLayout != 'moment') {
+			this.profileLayout = 'moment';
+		}
+		if(u.has('ui') && u.get('ui') == 'metro' && this.profileLayout != 'metro') {
+			this.profileLayout = 'metro';
+		}
 	},
 
 	mounted() {