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

Frontend ui refactor

public/mix-manifest.json

@@ -8,8 +8,8 @@
     "/js/compose.js": "/js/compose.js?id=4d8c53b4575f463214f2",
     "/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
-    "/js/profile.js": "/js/profile.js?id=2043c303330c48d1fb55",
+    "/js/profile.js": "/js/profile.js?id=0bb23e4365ea2cd8516c",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=0b11c2129b9ebdb0eddf",
-    "/js/timeline.js": "/js/timeline.js?id=4cc8011487b7b60bd26d"
+    "/js/timeline.js": "/js/timeline.js?id=dfbe3fad9f49a2d3b995"
 }

resources/assets/js/components/Profile.vue

@@ -158,7 +158,7 @@
 			<div class="container">
 				<div class="profile-timeline mt-md-4">
 					<div class="row" v-if="mode == 'grid'">
-						<div class="col-4 p-0 p-sm-2 p-md-3" v-for="(s, index) in timeline">
+						<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in timeline">
 							<a class="card info-overlay card-md-border-0" :href="s.url">
 								<div class="square">
 									<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>

resources/assets/js/components/Timeline.vue

@@ -155,21 +155,16 @@
 
 		<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2  d-none d-md-block">
 			<div class="mb-4">
-				<div class="card profile-card">
+				<div class="">
-					<div class="card-body loader text-center">
+					<div class="">
-						<div class="spinner-border" role="status">
-							<span class="sr-only">Loading...</span>
-						</div>
-					</div>
-					<div class="card-body contents d-none">
 						<div class="media d-flex align-items-center">
 							<a :href="profile.url">
 								<img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px">
 							</a>
 							<div class="media-body d-flex justify-content-between word-break" >
 								<div>
-									<p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">&commat;{{profile.username}}</a></p>
+									<p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">{{profile.username || 'loading...'}}</a></p>
-									<p class="my-0 text-muted pb-0">{{profile.display_name}}</p>
+									<p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
 								</div>
 								<div class="ml-2">
 									<a :class="[optionMenuState == true ? 'text-primary' :'text-muted']" v-on:click="toggleOptionsMenu()"><i class="fas fa-cog"></i></a>
@@ -177,7 +172,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="card-footer bg-white py-1 d-none">
+					<!-- <div class="card-footer bg-white py-1 d-none">
 						<div class="d-flex justify-content-between text-center">
 							<span class="pl-3 cursor-pointer" v-on:click="redirect(profile.url)">
 								<p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
@@ -192,7 +187,7 @@
 								<p class="mb-0 small text-muted">Following</p>
 							</span>
 						</div>
-					</div>
+					</div> -->
 				</div>
 			</div>