SWREI/switched
0
0
Fork 0
Code

#192

Browse Source
This commit is contained in:
syuilo 2017-05-26 16:12:52 +09:00
parent a4e5933ed8
commit c4e76b0c89
3 changed files with 177 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/web/app/mobile/tags/home-timeline.tag
View File

@ -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);

1
src/web/app/mobile/tags/index.js
View File

@ -49,3 +49,4 @@ require('./user-preview.tag');
require('./users-list.tag');
require('./user-following.tag');
require('./user-followers.tag');
require('./init-following.tag');

169
src/web/app/mobile/tags/init-following.tag Normal file
View File

@ -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>