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
+ > .notification
+ padding 16px
+ overflow-wrap break-word
- &:after
- content ""
- display block
- clear both
+ &:after
+ content ""
+ display block
+ clear both
- .avatar-anchor
- display block
- float left
+ > .mk-time
+ display inline
+ position absolute
+ top 16px
+ right 12px
+ vertical-align top
+ color rgba(0, 0, 0, 0.6)
+ font-size 0.9em
- img
- min-width 36px
- min-height 36px
- max-width 36px
- max-height 36px
- border-radius 6px
+ > .avatar-anchor
+ display block
+ float left
- .text
- float right
- width calc(100% - 36px)
- padding-left 8px
+ img
+ min-width 36px
+ min-height 36px
+ max-width 36px
+ max-height 36px
+ border-radius 6px
- p
- margin 0
+ > .text
+ float right
+ width calc(100% - 36px)
+ padding-left 8px
- i, .mk-reaction-icon
- margin-right 4px
+ p
+ margin 0
- .post-preview
- color rgba(0, 0, 0, 0.7)
+ i, .mk-reaction-icon
+ margin-right 4px
- .post-ref
- color rgba(0, 0, 0, 0.7)
+ > .post-preview
+ color rgba(0, 0, 0, 0.7)
- [data-fa]
- font-size 1em
- font-weight normal
- font-style normal
- display inline-block
- margin-right 3px
+ > .post-ref
+ color rgba(0, 0, 0, 0.7)
- &.repost, &.quote
- .text p i
- color #77B255
+ [data-fa]
+ font-size 1em
+ font-weight normal
+ font-style normal
+ display inline-block
+ margin-right 3px
- &.follow
- .text p i
- color #53c7ce
+ &.repost
+ .text p i
+ color #77B255
- &.reply, &.mention
- .text p i
- color #555
-
- .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
similarity index 100%
rename from src/web/app/mobile/views/components/posts.post.sub.vue
rename to 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
similarity index 99%
rename from src/web/app/mobile/views/components/posts.post.vue
rename to 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,