Update Profile.vue component, add MomentUI

resources/assets/js/components/Profile.vue

@@ -10,6 +10,7 @@
 			<img src="/img/pixelfed-icon-grey.svg" class="">
 	</div>
 	<div v-if="!loading && !warning">
+		<div v-if="profileLayout == 'metro'">
 			<div class="bg-white py-5 border-bottom">
 				<div class="container">
 					<div class="row">
@@ -291,6 +292,59 @@
 				</div>
 			</div>
 		</div>
+
+		<div v-if="profileLayout == 'moment'">
+			<div class="w-100 h-100 mt-n3 bg-pixelfed" style="width:100%;min-height:274px;">
+			</div>
+			<div class="bg-white border-bottom">
+				<div class="container">
+					<div class="row">
+						<div class="col-12 d-flex justify-content-center">
+							<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
+						</div>
+
+						<div class="col-12 text-center">
+							<div class="profile-details my-3">
+								<p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
+								<div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
+								<div class="pb-3 text-muted text-center">
+									<a class="text-lighter" :href="profile.url">
+										<span class="font-weight-bold">{{profile.statuses_count}}</span>
+										Posts
+									</a>
+									<a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
+										<span class="font-weight-bold">{{profile.followers_count}}</span>
+										Followers
+									</a>
+									<a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
+										<span class="font-weight-bold">{{profile.following_count}}</span>
+										Following
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="container-fluid">
+				<div class="profile-timeline mt-md-4">
+					<div class="card-columns" v-if="mode == 'grid'">
+						<div class="p-sm-2 p-md-3" v-for="(s, index) in timeline">
+							<a class="card info-overlay card-md-border-0" :href="s.url">
+								<img :src="s.media_attachments[0].url" class="img-fluid">
+							</a>
+						</div>
+					</div>
+					<div v-if="timeline.length">
+						<infinite-loading @infinite="infiniteTimeline">
+							<div slot="no-more"></div>
+							<div slot="no-results"></div>
+						</infinite-loading>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 	<!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
 			<post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
 	</b-modal> -->
@@ -422,7 +476,8 @@
 export default {
 	props: [
 		'profile-id',
-		'profile-settings'
+		'profile-settings',
+		'profile-layout'
 	],
 	data() {
 		return {