diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/web/app/mobile/tags/home-timeline.tag | 7 | ||||
| -rw-r--r-- | src/web/app/mobile/tags/index.js | 1 | ||||
| -rw-r--r-- | src/web/app/mobile/tags/init-following.tag | 169 |
3 files changed, 177 insertions, 0 deletions
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> |