✌️

CHANGELOG.md

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

locales/en.yml

@@ -472,9 +472,23 @@ mobile:
       is-followed: "Followed you"
       following: "Following"
       followers: "Followers"
+      overview: "Overview"
       posts: "Timeline"
       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:
       all: "All"
       known: "You know"

locales/ja.yml

@@ -472,10 +472,24 @@ mobile:
       is-followed: "フォローされています"
       following: "フォロー"
       followers: "フォロワー"
+      overview: "概要"
       posts: "タイムライン"
       posts-count: "ポスト"
       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:
       all: "すべて"
       known: "知り合い"

src/web/app/mobile/router.js

@@ -23,7 +23,7 @@ export default me => {
 	route('/post/new',                   newPost);
 	route('/post::post',                 post);
 	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/followers',            userFollowers);
 	route('/:user/following',            userFollowing);

src/web/app/mobile/tags/user.tag

@@ -37,14 +37,15 @@
 						<i>%i18n:mobile.tags.mk-user.followers%</i>
 					</a>
 				</div>
-				<mk-activity-table user={ user }/>
 			</div>
 			<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 == 'media' } onclick={ go.bind(null, 'media') }>%i18n:mobile.tags.mk-user.media%</a>
 			</nav>
 		</header>
 		<div class="body">
+			<mk-user-overview if={ page == 'overview' } user={ user }/>
 			<mk-user-timeline if={ page == 'posts' } user={ user }/>
 			<mk-user-timeline if={ page == 'media' } user={ user } with-media={ true }/>
 		</div>
@@ -55,6 +56,8 @@
 
 			> .user
 				> header
+					box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
+
 					> .banner
 						padding-bottom 33.3%
 						background-color #1b1b1b
@@ -159,7 +162,6 @@
 						justify-content center
 						margin 0 auto
 						max-width 600px
-						border-bottom solid 1px rgba(0, 0, 0, 0.2)
 
 						> a
 							display block
@@ -190,7 +192,7 @@
 		this.mixin('api');
 
 		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.on('mount', () => {
@@ -211,3 +213,255 @@
 		};
 	</script>
 </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>