From 08d0c46d2838a3d6e7a5618f73dbc3961175d0a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
 <syuilotan@yahoo.co.jp>
Date: Wed, 14 Feb 2018 13:35:51 +0900
Subject: [PATCH] wip

---
 src/web/app/mobile/tags/init-following.tag | 130 ---------------------
 src/web/app/mobile/views/friends-maker.vue | 126 ++++++++++++++++++++
 src/web/app/mobile/views/timeline.vue      |   2 +-
 3 files changed, 127 insertions(+), 131 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/init-following.tag
 create mode 100644 src/web/app/mobile/views/friends-maker.vue

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 bf8313872..000000000
--- 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 000000000..a7a81aeb7
--- /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 3a5df7792..77c24a469 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>