From e4e3c21c98d1ea55411de74e5fa8b42733e30e32 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Thu, 19 Nov 2020 02:15:07 -0700
Subject: [PATCH] Update DM components

---
 resources/assets/js/components/DirectMessage.vue          | 2 ++
 resources/assets/js/components/StoryTimelineComponent.vue | 2 +-
 resources/assets/js/components/Timeline.vue               | 8 ++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/DirectMessage.vue b/resources/assets/js/components/DirectMessage.vue
index bc879a2ba..6b1b825eb 100644
--- a/resources/assets/js/components/DirectMessage.vue
+++ b/resources/assets/js/components/DirectMessage.vue
@@ -84,6 +84,7 @@
 									{{convo.text}}
 								</p>
 								<p v-if="!hideTimestamps" class="small text-muted font-weight-bold ml-2 d-flex align-items-center justify-content-start" data-timestamp="timestamp"> <span v-if="convo.hidden" class="mr-2 small" title="Filtered Message" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-lock"></i></span> {{convo.timeAgo}}</p>
+								<p v-else>&nbsp;</p>
 							</div>
 						</div>
 						<div v-else class="media d-inline-flex float-right mb-0">
@@ -131,6 +132,7 @@
 								</p>
 								<p v-if="!hideTimestamps" class="small text-muted font-weight-bold text-right mr-2"> <span v-if="convo.hidden" class="mr-2 small" title="Filtered Message" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-lock"></i></span> {{convo.timeAgo}}
 								</p>
+								<p v-else>&nbsp;</p>
 							</div>
 							<img v-if="!hideAvatars" class="ml-3 mt-2 rounded-circle img-thumbnail" :src="profile.avatar" alt="avatar" width="32px">
 						</div>
diff --git a/resources/assets/js/components/StoryTimelineComponent.vue b/resources/assets/js/components/StoryTimelineComponent.vue
index fa3724740..ac4d2f10a 100644
--- a/resources/assets/js/components/StoryTimelineComponent.vue
+++ b/resources/assets/js/components/StoryTimelineComponent.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div v-if="show" class="card card-body p-0 border mt-4 mb-3 shadow-none">
+		<div v-if="show" class="card card-body p-0 border mt-md-4 mb-md-3 shadow-none">
 			<div id="storyContainer" :class="[list == true ? 'mt-1 mr-3 mb-0 ml-1':'mx-3 mt-3 mb-0 pb-0']"></div>
 		</div>
 	</div>
diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index 5a9ef6a5a..f33de86b0 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -6,7 +6,7 @@
 				<button class="btn btn-dark px-4 rounded-pill font-weight-bold shadow" @click="syncNewPosts">Load New Posts</button>
 			</p>
 		</div>
-		<div class="col-12 pl-3 pl-md-0 pt-3 pl-0">
+		<div class="d-none d-md-block col-12 pl-3 pl-md-0 pt-3 pl-0">
 			<div class="d-none d-md-flex justify-content-between align-items-center">
 				<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
 				<p class="mb-0">
@@ -24,7 +24,7 @@
 			<hr>
 		</div>
 		<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 mb-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1']">
-			<div style="margin-top:-8px;">
+			<div style="margin-top:-2px;">
 				<story-component v-if="config.features.stories"></story-component>
 			</div>
 			<div>
@@ -33,7 +33,7 @@
 						<span class="sr-only">Loading...</span>
 					</div>
 				</div>
-				<div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`" class="pt-4">
+				<div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
 					<div v-if="index == 0 && showTips && !loading" class="mb-4 card-tips">
 						<announcements-card v-on:show-tips="showTips = $event"></announcements-card>
 					</div>
@@ -257,7 +257,7 @@
 			</div>
 		</div>
 
-		<div v-if="!modes.distractionFree" class="col-md-4 col-lg-4 my-3 order-1 order-md-2 d-none d-md-block">
+		<div v-if="!modes.distractionFree" class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
 			<div>
 
 				<!-- <div class="mb-4">