5 files changed, 68 insertions, 101 deletions
diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts
index fe65aab207..19135d08dc 100644
--- a/src/web/app/mobile/views/components/index.ts
+++ b/src/web/app/mobile/views/components/index.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 
 import ui from './ui.vue';
 import timeline from './timeline.vue';
+import post from './post.vue';
 import posts from './posts.vue';
 import imagesImage from './images-image.vue';
 import drive from './drive.vue';
@@ -23,6 +24,7 @@ import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-timeline', timeline);
+Vue.component('mk-post', post);
 Vue.component('mk-posts', posts);
 Vue.component('mk-images-image', imagesImage);
 Vue.component('mk-drive', drive);
diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue
index 2a0e5c117f..506ce3493b 100644
--- a/src/web/app/mobile/views/components/notification.vue
+++ b/src/web/app/mobile/views/components/notification.vue
@@ -1,8 +1,7 @@
 <template>
-<div class="mk-notification" :class="notification.type">
-	<mk-time :time="notification.created_at"/>
-
-	<template v-if="notification.type == 'reaction'">
+<div class="mk-notification">
+	<div class="notification reaction" v-if="notification.type == 'reaction'">
+		<mk-time :time="notification.created_at"/>
 		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
@@ -16,9 +15,10 @@
 				%fa:quote-right%
 			</router-link>
 		</div>
-	</template>
+	</div>
 
-	<template v-if="notification.type == 'repost'">
+	<div class="notification repost" v-if="notification.type == 'repost'">
+		<mk-time :time="notification.created_at"/>
 		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
@@ -31,22 +31,14 @@
 				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
 			</router-link>
 		</div>
-	</template>
+	</div>
 
 	<template v-if="notification.type == 'quote'">
-		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
-			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:quote-left%
-				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
-			</p>
-			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
-		</div>
+		<mk-post :post="notification.post"/>
 	</template>
 
-	<template v-if="notification.type == 'follow'">
+	<div class="notification follow" v-if="notification.type == 'follow'">
+		<mk-time :time="notification.created_at"/>
 		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
@@ -56,35 +48,18 @@
 				<router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link>
 			</p>
 		</div>
-	</template>
+	</div>
 
 	<template v-if="notification.type == 'reply'">
-		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
-			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:reply%
-				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
-			</p>
-			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
-		</div>
+		<mk-post :post="notification.post"/>
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<router-link class="avatar-anchor" :to="`/${notification.post.user.username}`">
-			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:at%
-				<router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
-			</p>
-			<router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
-		</div>
+		<mk-post :post="notification.post"/>
 	</template>
 
-	<template v-if="notification.type == 'poll_vote'">
+	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+		<mk-time :time="notification.created_at"/>
 		<router-link class="avatar-anchor" :to="`/${notification.user.username}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
@@ -97,7 +72,7 @@
 				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
 			</router-link>
 		</div>
-	</template>
+	</div>
 </div>
 </template>
 
@@ -117,73 +92,67 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notification
-	margin 0
-	padding 16px
-	overflow-wrap break-word
-
-	> .mk-time
-		display inline
-		position absolute
-		top 16px
-		right 12px
-		vertical-align top
-		color rgba(0, 0, 0, 0.6)
-		font-size 12px
 
-	&:after
-		content ""
-		display block
-		clear both
+	> .notification
+		padding 16px
+		overflow-wrap break-word
 
-	.avatar-anchor
-		display block
-		float left
+		&:after
+			content ""
+			display block
+			clear both
 
-		img
-			min-width 36px
-			min-height 36px
-			max-width 36px
-			max-height 36px
-			border-radius 6px
+		> .mk-time
+			display inline
+			position absolute
+			top 16px
+			right 12px
+			vertical-align top
+			color rgba(0, 0, 0, 0.6)
+			font-size 0.9em
 
-	.text
-		float right
-		width calc(100% - 36px)
-		padding-left 8px
+		> .avatar-anchor
+			display block
+			float left
 
-		p
-			margin 0
+			img
+				min-width 36px
+				min-height 36px
+				max-width 36px
+				max-height 36px
+				border-radius 6px
 
-			i, .mk-reaction-icon
-				margin-right 4px
+		> .text
+			float right
+			width calc(100% - 36px)
+			padding-left 8px
 
-	.post-preview
-		color rgba(0, 0, 0, 0.7)
+			p
+				margin 0
 
-	.post-ref
-		color rgba(0, 0, 0, 0.7)
+				i, .mk-reaction-icon
+					margin-right 4px
 
-		[data-fa]
-			font-size 1em
-			font-weight normal
-			font-style normal
-			display inline-block
-			margin-right 3px
+			> .post-preview
+				color rgba(0, 0, 0, 0.7)
 
-	&.repost, &.quote
-		.text p i
-			color #77B255
+			> .post-ref
+				color rgba(0, 0, 0, 0.7)
 
-	&.follow
-		.text p i
-			color #53c7ce
+				[data-fa]
+					font-size 1em
+					font-weight normal
+					font-style normal
+					display inline-block
+					margin-right 3px
 
-	&.reply, &.mention
-		.text p i
-			color #555
+		&.repost
+			.text p i
+				color #77B255
 
-		.post-preview
-			color rgba(0, 0, 0, 0.7)
+		&.follow
+			.text p i
+				color #53c7ce
 
 </style>
 
diff --git a/src/web/app/mobile/views/components/posts.post.sub.vue b/src/web/app/mobile/views/components/post.sub.vue
index f1c858675e..f1c858675e 100644
--- a/src/web/app/mobile/views/components/posts.post.sub.vue
+++ b/src/web/app/mobile/views/components/post.sub.vue
diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/post.vue
index d0a897db65..4c8937f516 100644
--- a/src/web/app/mobile/views/components/posts.post.vue
+++ b/src/web/app/mobile/views/components/post.vue
@@ -77,7 +77,7 @@
 import Vue from 'vue';
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './posts.post.sub.vue';
+import XSub from './post.sub.vue';
 
 export default Vue.extend({
 	components: {
diff --git a/src/web/app/mobile/views/components/posts.vue b/src/web/app/mobile/views/components/posts.vue
index 9a9f9a3133..7e71fa0982 100644
--- a/src/web/app/mobile/views/components/posts.vue
+++ b/src/web/app/mobile/views/components/posts.vue
@@ -3,7 +3,7 @@
 	<slot name="head"></slot>
 	<slot></slot>
 	<template v-for="(post, i) in _posts">
-		<x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
+		<mk-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
 		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
 			<span>%fa:angle-up%{{ post._datetext }}</span>
 			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
@@ -17,12 +17,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XPost from './posts.post.vue';
 
 export default Vue.extend({
-	components: {
-		XPost
-	},
 	props: {
 		posts: {
 			type: Array,