Update StatusCard, add text support

resources/assets/js/components/partials/StatusCard.vue

@@ -1,6 +1,55 @@
 <template>
 	<div>
-		<div class="card rounded-0 border-top-0 status-card card-md-rounded-0 shadow-none border">
+		<div v-if="status.pf_type === 'text'" class="card shadow-none border border-top-0 rounded-0">
+			<div class="card-body">
+				<div class="media">
+					<img class="rounded-circle box-shadow mr-2" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
+					<div class="media-body">
+						<div class="pl-2 d-flex align-items-top">
+							<a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
+								Loading...
+							</a>
+							<span class="px-1 text-lighter">
+								·
+							</span>
+							<a class="font-weight-bold text-lighter"
+							   :href="statusUrl(status)">
+								{{shortTimestamp(status.created_at)}}
+							</a>
+							<span class="text-right" style="flex-grow:1;">
+								<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
+									<span class="fas fa-ellipsis-v text-lighter"></span>
+									<span class="sr-only">Post Menu</span>
+								</button>
+							</span>
+						</div>
+						<div class="pl-2">
+
+							<details v-if="status.sensitive">
+								<summary class="mb-2 font-weight-bold text-muted">Content Warning</summary>
+								<p v-html="status.content" class="pt-2 text-break" style="font-size: 17px;"></p>
+							</details>
+
+							<p v-else v-html="status.content" class="pt-2 text-break" style="font-size: 17px;"></p>
+
+							<p class="mb-0">
+								<i class="fa-heart fa-lg cursor-pointer mr-3"
+								   :class="{ 'far text-muted': !status.favourited, 'fas text-danger': status.favourited }"
+								   @click="likeStatus(status, $event);">
+								 </i>
+
+								<i class="far fa-comment cursor-pointer text-muted fa-lg mr-3"
+								   @click="commentFocus(status, $event)">
+
+								</i>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div v-else class="card rounded-0 border-top-0 status-card card-md-rounded-0 shadow-none border">
 			<div v-if="status" class="card-header d-inline-flex align-items-center bg-white">
 				<div>
 					<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
@@ -27,15 +76,7 @@
 
 			<div class="postPresenterContainer" style="background: #000;">
 
-				<div v-if="config.ab.top && status.pf_type === 'text'" class="w-100">
+				<div v-if="status.pf_type === 'photo'" 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" v-on:togglecw="status.sensitive = false"></photo-presenter>
 				</div>
 
@@ -200,6 +241,10 @@
 				return ts.toDateString() + ' ' + ts.toLocaleTimeString();
 			},
 
+			shortTimestamp(ts) {
+				return window.App.util.format.timeAgo(ts);
+			},
+
 			statusCardUsernameFormat(status) {
 				if(status.account.local == true) {
 					return status.account.username;