This commit is contained in:
syuilo 2017-08-30 01:37:33 +09:00
parent 1134898003
commit 9f477549dd
5 changed files with 291 additions and 5 deletions

View file

@ -2,8 +2,12 @@ ChangeLog (Release Notes)
========================= =========================
主に notable な changes を書いていきます 主に notable な changes を書いていきます
2498 (2017/08/29) unreleased
---------- ----------
* New: モバイルのユーザーページを刷新
2498 (2017/08/29)
-----------------
* Fix: repostのborder-radiusが効いていない (#743) * Fix: repostのborder-radiusが効いていない (#743)
* テーマカラーを赤に戻してみた * テーマカラーを赤に戻してみた
* ユーザビリティの向上 * ユーザビリティの向上

View file

@ -472,9 +472,23 @@ mobile:
is-followed: "Followed you" is-followed: "Followed you"
following: "Following" following: "Following"
followers: "Followers" followers: "Followers"
overview: "Overview"
posts: "Timeline" posts: "Timeline"
media: "Media" media: "Media"
mk-user-overview:
recent-posts: "Recent posts"
images: "Images"
activity: "Activity"
mk-user-overview-posts:
loading: "Loading"
no-posts: "No posts"
mk-user-overview-photos:
loading: "Loading"
no-photos: "No photos"
mk-users-list: mk-users-list:
all: "All" all: "All"
known: "You know" known: "You know"

View file

@ -472,10 +472,24 @@ mobile:
is-followed: "フォローされています" is-followed: "フォローされています"
following: "フォロー" following: "フォロー"
followers: "フォロワー" followers: "フォロワー"
overview: "概要"
posts: "タイムライン" posts: "タイムライン"
posts-count: "ポスト" posts-count: "ポスト"
media: "メディア" media: "メディア"
mk-user-overview:
recent-posts: "最近の投稿"
images: "画像"
activity: "アクティビティ"
mk-user-overview-posts:
loading: "読み込み中"
no-posts: "投稿はありません"
mk-user-overview-photos:
loading: "読み込み中"
no-photos: "写真はありません"
mk-users-list: mk-users-list:
all: "すべて" all: "すべて"
known: "知り合い" known: "知り合い"

View file

@ -23,7 +23,7 @@ export default me => {
route('/post/new', newPost); route('/post/new', newPost);
route('/post::post', post); route('/post::post', post);
route('/search::query', search); route('/search::query', search);
route('/:user', user.bind(null, 'posts')); route('/:user', user.bind(null, 'overview'));
route('/:user/graphs', user.bind(null, 'graphs')); route('/:user/graphs', user.bind(null, 'graphs'));
route('/:user/followers', userFollowers); route('/:user/followers', userFollowers);
route('/:user/following', userFollowing); route('/:user/following', userFollowing);

View file

@ -37,14 +37,15 @@
<i>%i18n:mobile.tags.mk-user.followers%</i> <i>%i18n:mobile.tags.mk-user.followers%</i>
</a> </a>
</div> </div>
<mk-activity-table user={ user }/>
</div> </div>
<nav> <nav>
<a data-is-active={ page == 'overview' } onclick={ go.bind(null, 'overview') }>%i18n:mobile.tags.mk-user.overview%</a>
<a data-is-active={ page == 'posts' } onclick={ go.bind(null, 'posts') }>%i18n:mobile.tags.mk-user.posts%</a> <a data-is-active={ page == 'posts' } onclick={ go.bind(null, 'posts') }>%i18n:mobile.tags.mk-user.posts%</a>
<a data-is-active={ page == 'media' } onclick={ go.bind(null, 'media') }>%i18n:mobile.tags.mk-user.media%</a> <a data-is-active={ page == 'media' } onclick={ go.bind(null, 'media') }>%i18n:mobile.tags.mk-user.media%</a>
</nav> </nav>
</header> </header>
<div class="body"> <div class="body">
<mk-user-overview if={ page == 'overview' } user={ user }/>
<mk-user-timeline if={ page == 'posts' } user={ user }/> <mk-user-timeline if={ page == 'posts' } user={ user }/>
<mk-user-timeline if={ page == 'media' } user={ user } with-media={ true }/> <mk-user-timeline if={ page == 'media' } user={ user } with-media={ true }/>
</div> </div>
@ -55,6 +56,8 @@
> .user > .user
> header > header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
> .banner > .banner
padding-bottom 33.3% padding-bottom 33.3%
background-color #1b1b1b background-color #1b1b1b
@ -159,7 +162,6 @@
justify-content center justify-content center
margin 0 auto margin 0 auto
max-width 600px max-width 600px
border-bottom solid 1px rgba(0, 0, 0, 0.2)
> a > a
display block display block
@ -190,7 +192,7 @@
this.mixin('api'); this.mixin('api');
this.username = this.opts.user; this.username = this.opts.user;
this.page = this.opts.page ? this.opts.page : 'posts'; this.page = this.opts.page ? this.opts.page : 'overview';
this.fetching = true; this.fetching = true;
this.on('mount', () => { this.on('mount', () => {
@ -211,3 +213,255 @@
}; };
</script> </script>
</mk-user> </mk-user>
<mk-user-overview>
<section class="recent-posts">
<h2><i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
<div>
<mk-user-overview-posts user={ user }/>
</div>
</section>
<section class="images">
<h2><i class="fa fa-picture-o"></i>%i18n:mobile.tags.mk-user-overview.images%</h2>
<div>
<mk-user-overview-photos user={ user }/>
</div>
</section>
<section class="activity">
<h2><i class="fa fa-bar-chart"></i>%i18n:mobile.tags.mk-user-overview.activity%</h2>
<div>
<mk-activity-table user={ user }/>
</div>
</section>
<style>
:scope
display block
max-width 600px
margin 0 auto
> section
background #eee
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
&:not(:last-child)
margin-bottom 8px
> h2
margin 0
padding 8px 10px
font-size 16px
font-weight normal
color #465258
background #fff
border-radius 8px 8px 0 0
> i
margin-right 6px
> .activity
> div
padding 8px
</style>
<script>
this.user = this.opts.user;
</script>
</mk-user-overview>
<mk-user-overview-posts>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
<div if={ !initializing && posts.length > 0 }>
<virtual each={ posts }>
<mk-user-overview-posts-post-card post={ this }/>
</virtual>
</div>
<p class="empty" if={ !initializing && posts.length == 0 }>%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
<style>
:scope
display block
> div
overflow-x scroll
-webkit-overflow-scrolling touch
white-space nowrap
padding 8px
> *
vertical-align top
&:not(:last-child)
margin-right 8px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>
<script>
this.mixin('api');
this.user = this.opts.user;
this.initializing = true;
this.on('mount', () => {
this.api('users/posts', {
user_id: this.user.id
}).then(posts => {
this.update({
posts: posts,
initializing: false
});
});
});
</script>
</mk-user-overview-posts>
<mk-user-overview-posts-post-card>
<a href={ '/' + post.user.username + '/' + post.id }>
<header>
<img src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/><h3>{ post.user.name }</h3>
</header>
<div>
{ text }
</div>
<mk-time time={ post.created_at }/>
</a>
<style>
:scope
display inline-block
width 150px
//height 120px
font-size 12px
background #fff
border-radius 4px
> a
display block
color #2c3940
&:hover
text-decoration none
> header
> img
position absolute
top 8px
left 8px
width 28px
height 28px
border-radius 6px
> h3
display inline-block
overflow hidden
width calc(100% - 45px)
margin-left 44px
white-space nowrap
text-overflow ellipsis
> div
padding 0 8px 8px 8px
height 60px
overflow hidden
white-space normal
&:after
content ""
display block
position absolute
top 40px
left 0
width 100%
height 20px
background linear-gradient(to bottom, transparent 0%, #fff 100%)
> mk-time
display inline-block
padding 8px
color #aaa
</style>
<script>
import summary from '../../common/scripts/get-post-summary';
this.post = this.opts.post;
this.text = summary(this.post);
</script>
</mk-user-overview-posts-post-card>
<mk-user-overview-photos>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
<div class="stream" if={ !initializing && images.length > 0 }>
<virtual each={ image in images }>
<a class="img" style={ 'background-image: url(' + image.media.url + '?thumbnail&size=256)' } href={ '/' + image.post.user.username + '/' + image.post.id }></a>
</virtual>
</div>
<p class="empty" if={ !initializing && images.length == 0 }>%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
<style>
:scope
display block
> .stream
display -webkit-flex
display -moz-flex
display -ms-flex
display flex
justify-content center
flex-wrap wrap
padding 8px
> .img
flex 1 1 33%
width 33%
height 80px
background-position center center
background-size cover
background-clip content-box
border solid 2px transparent
border-radius 4px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>
<script>
this.mixin('api');
this.images = [];
this.initializing = true;
this.user = this.opts.user;
this.on('mount', () => {
this.api('users/posts', {
user_id: this.user.id,
with_media: true,
limit: 9
}).then(posts => {
this.initializing = false;
posts.forEach(post => {
post.media.forEach(media => {
if (this.images.length < 9) this.images.push({
post,
media
});
});
});
this.update();
});
});
</script>
</mk-user-overview-photos>