Update components

resources/assets/js/components/PostComponent.vue

@@ -45,7 +45,14 @@
          </div>
           <div class="col-12 col-md-8 px-0 mx-0">
               <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center" style="background: #000;">
-                <div v-if="status.pf_type === 'photo'" class="w-100">
+                <div v-if="status.pf_type === 'text'" class="w-100">
+                  <div class="w-100 card-img-top border-bottom rounded-0" style="background-image: url(/storage/textimg/bg_1.jpg);background-size: cover;width: 100%;height: 540px;">
+                    <div class="w-100 h-100 d-flex justify-content-center align-items-center">
+                      <p class="text-center text-break h3 px-5 font-weight-bold" v-html="status.content"></p>
+                    </div>
+                  </div>
+                </div>
+                <div v-else-if="status.pf_type === 'photo'" class="w-100">
                   <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
                 </div>
 
@@ -104,7 +111,7 @@
             </div>
             <div class="d-flex flex-md-column flex-column-reverse h-100" style="overflow-y: auto;">
               <div class="card-body status-comments pt-0">
-                <div class="status-comment">
+                <div v-if="status.pf_type != 'text'" class="status-comment">
                   <div v-if="status.content.length" class="pt-3">
                     <div v-if="showCaption != true">
                       <span class="py-3">
@@ -839,11 +846,12 @@ export default {
     beforeMount() {
       let u = new URLSearchParams(window.location.search);
       let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
-      if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
+      if(this.statusTemplate == 'text') {
         this.layout = 'metro';
+        return;
       }
-      if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
-        this.layout = 'moment';
+      if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
+        this.layout = 'metro';
       }
     },
 

resources/assets/js/components/Profile.vue

@@ -1,5 +1,12 @@
 <template>
 <div class="w-100 h-100">
+	<div v-if="owner && layout == 'moment'">
+		<div class="bg-primary shadow">
+			<p class="text-center text-white mb-0 py-3 font-weight-bold border-bottom border-info">
+				<i class="fas fa-exclamation-triangle fa-lg mr-2"></i> The Moment UI layout has been deprecated and will be removed in a future release.
+			</p>
+		</div>
+	</div>
 	<div v-if="isMobile" class="bg-white p-3 border-bottom">
 		<div class="d-flex justify-content-between align-items-center">
 			<div @click="goBack" class="cursor-pointer">
@@ -679,10 +686,7 @@
 			if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
 				this.layout = 'metro';
 			}
-			if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
-				Vue.use(VueMasonry);
-				this.layout = 'moment';
-			}
+			
 			if(this.layout == 'metro' && u.has('t')) {
 				if(this.modes.indexOf(u.get('t')) != -1) {
 					if(u.get('t') == 'bookmarks') {

resources/assets/js/components/SearchResults.vue

@@ -33,7 +33,7 @@
 						<div class="pb-2">
 							<div class="media align-items-center py-2">
 								<div class="media-body text-truncate">
-									<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
+									<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
 										<i class="fas fa-map-marker-alt text-lighter mr-2"></i> {{hashtag.value}}
 									</p>
 								</div>
@@ -74,7 +74,7 @@
 								<i class="fas fa-hashtag text-muted"></i>
 								</span>
 								<div class="media-body text-truncate">
-									<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
+									<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
 										#{{hashtag.value}}
 									</p>
 									<p v-if="hashtag.count > 2" class="mb-0 small font-weight-bold text-muted text-uppercase">
@@ -99,7 +99,7 @@
 							<div class="media align-items-center py-2 pr-3">
 								<img class="mr-3 rounded-circle border" :src="profile.avatar" width="50px" height="50px">
 								<div class="media-body">
-									<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
+									<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
 										{{profile.value}}
 									</p>
 									<p class="mb-0 small font-weight-bold text-muted text-uppercase">