diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
deleted file mode 100644
index bf8313872c..0000000000
--- a/src/web/app/mobile/tags/init-following.tag
+++ /dev/null
@@ -1,130 +0,0 @@
-<mk-init-following>
- <p class="title">気になるユーザーをフォロー:</p>
- <div class="users" v-if="!fetching && users.length > 0">
- <template each={ users }>
- <mk-user-card user={ this } />
- </template>
- </div>
- <p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
- <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
- <a class="refresh" @click="refresh">もっと見る</a>
- <button class="close" @click="close" title="閉じる">%fa:times%</button>
- <style lang="stylus" scoped>
- :scope
- display block
- background #fff
- border-radius 8px
- box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-
- > .title
- margin 0
- padding 8px 16px
- font-size 1em
- font-weight bold
- color #888
-
- > .users
- overflow-x scroll
- -webkit-overflow-scrolling touch
- white-space nowrap
- padding 16px
- background #eee
-
- > mk-user-card
- &:not(:last-child)
- margin-right 16px
-
- > .empty
- margin 0
- padding 16px
- text-align center
- color #aaa
-
- > .fetching
- margin 0
- padding 16px
- text-align center
- color #aaa
-
- > [data-fa]
- margin-right 4px
-
- > .refresh
- display block
- margin 0
- padding 8px 16px
- text-align right
- font-size 0.9em
- color #999
-
- > .close
- cursor pointer
- display block
- position absolute
- top 0
- right 0
- z-index 1
- margin 0
- padding 0
- font-size 1.2em
- color #999
- border none
- outline none
- background transparent
-
- &:hover
- color #555
-
- &:active
- color #222
-
- > [data-fa]
- padding 10px
-
- </style>
- <script lang="typescript">
- this.mixin('api');
-
- this.users = null;
- this.fetching = true;
-
- this.limit = 6;
- this.page = 0;
-
- this.on('mount', () => {
- this.fetch();
- });
-
- this.fetch = () => {
- this.update({
- fetching: true,
- users: null
- });
-
- this.api('users/recommendation', {
- limit: this.limit,
- offset: this.limit * this.page
- }).then(users => {
- this.fetching = false
- this.users = users
- this.update({
- fetching: false,
- users: users
- });
- });
- };
-
- this.refresh = () => {
- if (this.users.length < this.limit) {
- this.page = 0;
- } else {
- this.page++;
- }
- this.fetch();
- };
-
- this.close = () => {
- this.$destroy();
- };
- </script>
-</mk-init-following>
diff --git a/src/web/app/mobile/views/friends-maker.vue b/src/web/app/mobile/views/friends-maker.vue
new file mode 100644
index 0000000000..a7a81aeb72
--- /dev/null
+++ b/src/web/app/mobile/views/friends-maker.vue
@@ -0,0 +1,126 @@
+<template>
+<div class="mk-friends-maker">
+ <p class="title">気になるユーザーをフォロー:</p>
+ <div class="users" v-if="!fetching && users.length > 0">
+ <template each={ users }>
+ <mk-user-card user={ this } />
+ </template>
+ </div>
+ <p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
+ <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+ <a class="refresh" @click="refresh">もっと見る</a>
+ <button class="close" @click="close" title="閉じる">%fa:times%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+ data() {
+ return {
+ users: [],
+ fetching: true,
+ limit: 6,
+ page: 0
+ };
+ },
+ mounted() {
+ this.fetch();
+ },
+ methods: {
+ fetch() {
+ this.fetching = true;
+ this.users = [];
+
+ this.$root.$data.os.api('users/recommendation', {
+ limit: this.limit,
+ offset: this.limit * this.page
+ }).then(users => {
+ this.fetching = false;
+ this.users = users;
+ });
+ },
+ refresh() {
+ if (this.users.length < this.limit) {
+ this.page = 0;
+ } else {
+ this.page++;
+ }
+ this.fetch();
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-friends-maker
+ background #fff
+ border-radius 8px
+ box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+ > .title
+ margin 0
+ padding 8px 16px
+ font-size 1em
+ font-weight bold
+ color #888
+
+ > .users
+ overflow-x scroll
+ -webkit-overflow-scrolling touch
+ white-space nowrap
+ padding 16px
+ background #eee
+
+ > mk-user-card
+ &:not(:last-child)
+ margin-right 16px
+
+ > .empty
+ margin 0
+ padding 16px
+ text-align center
+ color #aaa
+
+ > .fetching
+ margin 0
+ padding 16px
+ text-align center
+ color #aaa
+
+ > [data-fa]
+ margin-right 4px
+
+ > .refresh
+ display block
+ margin 0
+ padding 8px 16px
+ text-align right
+ font-size 0.9em
+ color #999
+
+ > .close
+ cursor pointer
+ display block
+ position absolute
+ top 0
+ right 0
+ z-index 1
+ margin 0
+ padding 0
+ font-size 1.2em
+ color #999
+ border none
+ outline none
+ background transparent
+
+ &:hover
+ color #555
+
+ &:active
+ color #222
+
+ > [data-fa]
+ padding 10px
+
+</style>
diff --git a/src/web/app/mobile/views/timeline.vue b/src/web/app/mobile/views/timeline.vue
index 3a5df7792f..77c24a4692 100644
--- a/src/web/app/mobile/views/timeline.vue
+++ b/src/web/app/mobile/views/timeline.vue
@@ -1,7 +1,7 @@
<template>
<div class="mk-timeline">
+ <mk-friends-maker v-if="alone"/>
<mk-posts ref="timeline" :posts="posts">
- <mk-friends-maker v-if="alone" slot="head"/>
<div class="init" v-if="fetching">
%fa:spinner .pulse%%i18n:common.loading%
</div>