From c4e76b0c8912470efa5484b331b823ee2be4375c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 26 May 2017 16:12:52 +0900
Subject: [PATCH] #192
---
src/web/app/mobile/tags/home-timeline.tag | 7 +
src/web/app/mobile/tags/index.js | 1 +
src/web/app/mobile/tags/init-following.tag | 169 +++++++++++++++++++++
3 files changed, 177 insertions(+)
create mode 100644 src/web/app/mobile/tags/init-following.tag
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 34cea212b1..c5aeacd4d5 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -1,14 +1,21 @@
<mk-home-timeline>
+ <mk-init-following if={ noFollowing } />
<mk-timeline ref="timeline" init={ init } more={ more } empty={ '%i18n:mobile.tags.mk-home-timeline.empty-timeline%' }></mk-timeline>
<style>
:scope
display block
+
+ > mk-init-following
+ border-bottom solid 1px #eee
+
</style>
<script>
this.mixin('i');
this.mixin('api');
this.mixin('stream');
+ this.noFollowing = this.I.following_count == 0;
+
this.init = new Promise((res, rej) => {
this.api('posts/timeline').then(posts => {
res(posts);
diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js
index 3797e1a159..02d1541fcd 100644
--- a/src/web/app/mobile/tags/index.js
+++ b/src/web/app/mobile/tags/index.js
@@ -49,3 +49,4 @@ require('./user-preview.tag');
require('./users-list.tag');
require('./user-following.tag');
require('./user-followers.tag');
+require('./init-following.tag');
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
new file mode 100644
index 0000000000..e7388972ae
--- /dev/null
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -0,0 +1,169 @@
+<mk-init-following>
+ <p class="title">気になるユーザーをフォロー:</p>
+ <div class="users" if={ !fetching && users.length > 0 }>
+ <div class="user" each={ users }><a class="avatar-anchor" href={ '/' + username }><img class="avatar" src={ avatar_url + '?thumbnail&size=42' } alt=""/></a>
+ <div class="body"><a class="name" href={ '/' + username } target="_blank">{ name }</a>
+ <p class="username">@{ username }</p>
+ </div>
+ <mk-follow-button user={ this }></mk-follow-button>
+ </div>
+ </div>
+ <p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
+ <p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
+ <mk-ellipsis></mk-ellipsis>
+ </p><a class="refresh" onclick={ refresh }>もっと見る</a>
+ <button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+ <style>
+ :scope
+ display block
+ padding 16px
+
+ > .title
+ margin 0 0 12px 0
+ font-size 1em
+ font-weight bold
+ color #888
+
+ > .users
+ &:after
+ content ""
+ display block
+ clear both
+
+ > .user
+ padding 16px
+ width 238px
+ float left
+
+ &:after
+ content ""
+ display block
+ clear both
+
+ > .avatar-anchor
+ display block
+ float left
+ margin 0 12px 0 0
+
+ > .avatar
+ display block
+ width 42px
+ height 42px
+ margin 0
+ border-radius 8px
+ vertical-align bottom
+
+ > .body
+ float left
+ width calc(100% - 54px)
+
+ > .name
+ margin 0
+ font-size 16px
+ line-height 24px
+ color #555
+
+ > .username
+ margin 0
+ font-size 15px
+ line-height 16px
+ color #ccc
+
+ > mk-follow-button
+ position absolute
+ top 16px
+ right 16px
+
+ > .empty
+ margin 0
+ padding 16px
+ text-align center
+ color #aaa
+
+ > .fetching
+ margin 0
+ padding 16px
+ text-align center
+ color #aaa
+
+ > i
+ margin-right 4px
+
+ > .refresh
+ display block
+ margin 0 8px 0 0
+ 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
+
+ > i
+ padding 14px
+
+ </style>
+ <script>
+ 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.unmount();
+ };
+ </script>
+</mk-init-following>