From d41f5dbe775f81cc3a99b83232313c1b21d11622 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 Aug 2017 19:27:06 +0900
Subject: [PATCH] v2493

---
 CHANGELOG.md                                  |   4 +
 locales/en.yml                                |   4 +-
 locales/ja.yml                                |   4 +-
 package.json                                  |   2 +-
 src/web/app/common/tags/activity-table.tag    |   1 -
 src/web/app/mobile/tags/home-timeline.tag     |   2 +-
 src/web/app/mobile/tags/home.tag              |   1 +
 src/web/app/mobile/tags/init-following.tag    | 101 +--
 src/web/app/mobile/tags/notifications.tag     |  22 +-
 src/web/app/mobile/tags/page/home.tag         |   1 +
 .../app/mobile/tags/page/notifications.tag    |   1 +
 src/web/app/mobile/tags/page/post.tag         |  46 +-
 src/web/app/mobile/tags/page/search.tag       |   1 +
 .../app/mobile/tags/page/settings/profile.tag |  11 +-
 .../app/mobile/tags/page/user-followers.tag   |   1 +
 .../app/mobile/tags/page/user-following.tag   |   1 +
 src/web/app/mobile/tags/page/user.tag         |   1 +
 src/web/app/mobile/tags/post-detail.tag       | 618 ++++++++++--------
 src/web/app/mobile/tags/post-form.tag         |  71 +-
 src/web/app/mobile/tags/search-posts.tag      |   8 +
 src/web/app/mobile/tags/timeline.tag          |   6 +
 src/web/app/mobile/tags/user-timeline.tag     |   2 -
 src/web/app/mobile/tags/user.tag              |  18 +-
 src/web/app/mobile/tags/users-list.tag        |  20 +-
 24 files changed, 555 insertions(+), 392 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6980e4a48..dc50bb7b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@ ChangeLog (Release Notes)
 =========================
 主に notable な changes を書いていきます
 
+2493 (2017/08/29)
+-----------------
+* デザインの変更など
+
 2491 (2017/08/29)
 -----------------
 * デザインの修正と調整
diff --git a/locales/en.yml b/locales/en.yml
index b0488a775..5e11339db 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -355,7 +355,9 @@ mobile:
       notifications: "Notifications"
 
     mk-post-page:
-      submit: "Post"
+      title: "Post"
+      prev: "Previous post"
+      next: "Next post"
 
     mk-search-page:
       search: "Search"
diff --git a/locales/ja.yml b/locales/ja.yml
index 9a040f798..62ac4cb81 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -355,7 +355,9 @@ mobile:
       notifications: "通知"
 
     mk-post-page:
-      submit: "投稿"
+      title: "投稿"
+      prev: "前の投稿"
+      next: "次の投稿"
 
     mk-search-page:
       search: "検索"
diff --git a/package.json b/package.json
index a6aca1a20..5e33be56a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "misskey",
   "author": "syuilo <i@syuilo.com>",
-  "version": "0.0.2491",
+  "version": "0.0.2493",
   "license": "MIT",
   "description": "A miniblog-based SNS",
   "bugs": "https://github.com/syuilo/misskey/issues",
diff --git a/src/web/app/common/tags/activity-table.tag b/src/web/app/common/tags/activity-table.tag
index 6331e7c9c..1d26d1788 100644
--- a/src/web/app/common/tags/activity-table.tag
+++ b/src/web/app/common/tags/activity-table.tag
@@ -17,7 +17,6 @@
 			display block
 			max-width 600px
 			margin 0 auto
-			background #fff
 
 			> svg
 				display block
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 7357d1391..051158597 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -6,7 +6,7 @@
 			display block
 
 			> mk-init-following
-				border-bottom solid 1px #eee
+				margin-bottom 8px
 
 	</style>
 	<script>
diff --git a/src/web/app/mobile/tags/home.tag b/src/web/app/mobile/tags/home.tag
index 48b5a67c3..d92e3ae4e 100644
--- a/src/web/app/mobile/tags/home.tag
+++ b/src/web/app/mobile/tags/home.tag
@@ -7,6 +7,7 @@
 			> mk-home-timeline
 				max-width 600px
 				margin 0 auto
+				padding 8px
 
 			@media (min-width 500px)
 				padding 16px
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
index 0c54d3a6a..2fb7499d2 100644
--- a/src/web/app/mobile/tags/init-following.tag
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -1,10 +1,14 @@
 <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>
+		<div class="user" each={ users }>
+			<header style={ banner_url ? 'background-image: url(' + banner_url + '?thumbnail&size=1024)' : '' }>
+				<a href={ '/' + username }>
+					<img src={ avatar_url + '?thumbnail&size=200' } alt="avatar"/>
+				</a>
+			</header>
+			<a class="name" href={ '/' + username } target="_blank">{ name }</a>
+			<p class="username">@{ username }</p>
 			<mk-follow-button user={ this }/>
 		</div>
 	</div>
@@ -15,63 +19,65 @@
 	<style>
 		:scope
 			display block
-			padding 16px
+			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
 
 			> .title
-				margin 0 0 12px 0
+				margin 0
+				padding 8px 16px
 				font-size 1em
 				font-weight bold
 				color #888
 
 			> .users
-				&:after
-					content ""
-					display block
-					clear both
+				overflow-x scroll
+				white-space nowrap
+				padding 16px
+				background #eee
 
 				> .user
-					padding 16px
-					width 238px
-					float left
+					display inline-block
+					width 200px
+					text-align center
+					border-radius 8px
+					background #fff
 
-					&:after
-						content ""
+					&:not(:last-child)
+						margin-right 16px
+
+					> header
 						display block
-						clear both
+						height 80px
+						background-color #ddd
+						background-size cover
+						background-position center
+						border-radius 8px 8px 0 0
 
-					> .avatar-anchor
+						> a
+							> img
+								position absolute
+								top 20px
+								left calc(50% - 40px)
+								width 80px
+								height 80px
+								border solid 2px #fff
+								border-radius 8px
+
+					> .name
 						display block
-						float left
-						margin 0 12px 0 0
+						margin 24px 0 2px 0
+						font-size 16px
+						color #555
 
-						> .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
+					> .username
+						margin 0
+						font-size 15px
+						color #ccc
 
 					> mk-follow-button
-						position absolute
-						top 16px
-						right 16px
+						display inline-block
+						margin 8px 0 16px 0
 
 			> .empty
 				margin 0
@@ -90,7 +96,8 @@
 
 			> .refresh
 				display block
-				margin 0 8px 0 0
+				margin 0
+				padding 8px 16px
 				text-align right
 				font-size 0.9em
 				color #999
@@ -117,7 +124,7 @@
 					color #222
 
 				> i
-					padding 14px
+					padding 10px
 
 	</style>
 	<script>
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index 21a941e63..2f314769d 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -1,9 +1,7 @@
 <mk-notifications>
 	<div class="notifications" if={ notifications.length != 0 }>
 		<virtual each={ notification, i in notifications }>
-			<div>
-				<mk-notification notification={ notification }/>
-			</div>
+			<mk-notification notification={ notification }/>
 			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
@@ -15,20 +13,28 @@
 	<style>
 		:scope
 			display block
+			margin 8px auto
+			padding 0
+			max-width 500px
+			width calc(100% - 16px)
 			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+			@media (min-width 500px)
+				margin 16px auto
+				width calc(100% - 32px)
 
 			> .notifications
 
-				> div
+				> mk-notification
+					margin 0 auto
+					max-width 500px
 					border-bottom solid 1px rgba(0, 0, 0, 0.05)
 
 					&:last-child
 						border-bottom none
 
-					> mk-notification
-						margin 0 auto
-						max-width 500px
-
 				> .date
 					display block
 					margin 0
diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag
index 32c80fd20..efb5068a5 100644
--- a/src/web/app/mobile/tags/page/home.tag
+++ b/src/web/app/mobile/tags/page/home.tag
@@ -20,6 +20,7 @@
 		this.on('mount', () => {
 			document.title = 'Misskey'
 			ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%');
+			document.documentElement.style.background = '#313a42';
 
 			ui.trigger('func', () => {
 				openPostForm();
diff --git a/src/web/app/mobile/tags/page/notifications.tag b/src/web/app/mobile/tags/page/notifications.tag
index f90cd1628..06a5be039 100644
--- a/src/web/app/mobile/tags/page/notifications.tag
+++ b/src/web/app/mobile/tags/page/notifications.tag
@@ -13,6 +13,7 @@
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
 			ui.trigger('title', '<i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-notifications-page.notifications%');
+			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
 
diff --git a/src/web/app/mobile/tags/page/post.tag b/src/web/app/mobile/tags/page/post.tag
index 7ab4ea271..198acf179 100644
--- a/src/web/app/mobile/tags/page/post.tag
+++ b/src/web/app/mobile/tags/page/post.tag
@@ -1,7 +1,9 @@
 <mk-post-page>
 	<mk-ui ref="ui">
-		<main>
+		<main if={ !parent.fetching }>
+			<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:mobile.tags.mk-post-page.next%</a>
 			<mk-post-detail ref="post" post={ parent.post }/>
+			<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:mobile.tags.mk-post-page.prev%</a>
 		</main>
 	</mk-ui>
 	<style>
@@ -9,31 +11,51 @@
 			display block
 
 			main
-				background #fff
+				text-align center
 
-				> mk-post-detail
-					width 100%
-					max-width 500px
-					margin 0 auto
+				> a
+					display inline-block
 
+					&:first-child
+						margin-top 8px
+
+						@media (min-width 500px)
+							margin-top 16px
+
+					&:last-child
+						margin-bottom 8px
+
+						@media (min-width 500px)
+							margin-bottom 16px
+
+					> i
+						margin-right 4px
 	</style>
 	<script>
 		import ui from '../../scripts/ui-event';
 		import Progress from '../../../common/scripts/loading';
 
-		this.post = this.opts.post;
+		this.mixin('api');
+
+		this.fetching = true;
+		this.post = null;
 
 		this.on('mount', () => {
 			document.title = 'Misskey';
-			ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.submit%');
+			ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.title%');
+			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
 
-			this.refs.ui.refs.post.on('post-fetched', () => {
-				Progress.set(0.5);
-			});
+			this.api('posts/show', {
+				post_id: this.opts.post
+			}).then(post => {
+
+				this.update({
+					fetching: false,
+					post: post
+				});
 
-			this.refs.ui.refs.post.on('loaded', () => {
 				Progress.done();
 			});
 		});
diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag
index 869d5c853..a66f07971 100644
--- a/src/web/app/mobile/tags/page/search.tag
+++ b/src/web/app/mobile/tags/page/search.tag
@@ -14,6 +14,7 @@
 			document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
 			// TODO: クエリをHTMLエスケープ
 			ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
+			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
 
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
index 66b3fbde2..7e1bedbf4 100644
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -56,9 +56,13 @@
 			display block
 
 			> div
-				margin 16px auto
+				margin 8px auto
 				max-width 500px
-				width calc(100% - 32px)
+				width calc(100% - 16px)
+
+				@media (min-width 500px)
+					margin 16px auto
+					width calc(100% - 32px)
 
 				> p
 					display block
@@ -66,9 +70,10 @@
 					padding 12px 16px
 					font-size 14px
 					color #79d4e6
+					border solid 1px #71afbb
 					//color #276f86
 					//background #f8ffff
-					border solid 1px #a9d5de
+					//border solid 1px #a9d5de
 					border-radius 8px
 
 					> i
diff --git a/src/web/app/mobile/tags/page/user-followers.tag b/src/web/app/mobile/tags/page/user-followers.tag
index f6fcffebe..cffb2b58c 100644
--- a/src/web/app/mobile/tags/page/user-followers.tag
+++ b/src/web/app/mobile/tags/page/user-followers.tag
@@ -29,6 +29,7 @@
 				document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
 				// TODO: ユーザー名をエスケープ
 				ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' +  '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name));
+				document.documentElement.style.background = '#313a42';
 
 				this.refs.ui.refs.list.on('loaded', () => {
 					Progress.done();
diff --git a/src/web/app/mobile/tags/page/user-following.tag b/src/web/app/mobile/tags/page/user-following.tag
index 4b289b6aa..369cb4642 100644
--- a/src/web/app/mobile/tags/page/user-following.tag
+++ b/src/web/app/mobile/tags/page/user-following.tag
@@ -29,6 +29,7 @@
 				document.title = '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) + ' | Misskey';
 				// TODO: ユーザー名をエスケープ
 				ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name));
+				document.documentElement.style.background = '#313a42';
 
 				this.refs.ui.refs.list.on('loaded', () => {
 					Progress.done();
diff --git a/src/web/app/mobile/tags/page/user.tag b/src/web/app/mobile/tags/page/user.tag
index 05ccef311..1abeab492 100644
--- a/src/web/app/mobile/tags/page/user.tag
+++ b/src/web/app/mobile/tags/page/user.tag
@@ -13,6 +13,7 @@
 		this.user = this.opts.user;
 
 		this.on('mount', () => {
+			document.documentElement.style.background = '#313a42';
 			Progress.start();
 
 			this.refs.ui.refs.user.on('loaded', user => {
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 9d62a2b59..9215bafdb 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -1,261 +1,265 @@
 <mk-post-detail>
-	<div class="fetching" if={ fetching }>
-		<mk-ellipsis-icon/>
+	<button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
+		<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
+		<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
+	</button>
+	<div class="context">
+		<virtual each={ post in context }>
+			<mk-post-detail-sub post={ post }/>
+		</virtual>
 	</div>
-	<div class="main" if={ !fetching }>
-		<button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
-			<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
-			<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
-		</button>
-		<div class="context">
-			<virtual each={ post in context }>
-				<mk-post-preview post={ post }/>
-			</virtual>
-		</div>
-		<div class="reply-to" if={ p.reply_to }>
-			<mk-post-preview post={ p.reply_to }/>
-		</div>
-		<div class="repost" if={ isRepost }>
-			<p>
-				<a class="avatar-anchor" href={ '/' + post.user.username }>
-					<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
-					<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
-					{ post.user.name }
-				</a>
-				がRepost
-			</p>
-		</div>
-		<article>
-			<header>
-				<a class="avatar-anchor" href={ '/' + p.user.username }>
-					<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
-				</a>
-				<div>
-					<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
-					<span class="username">@{ p.user.username }</span>
-				</div>
-			</header>
-			<div class="body">
-				<div class="text" ref="text"></div>
-				<div class="media" if={ p.media }>
-					<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
-				</div>
-				<mk-poll if={ p.poll } post={ p }/>
-			</div>
-			<a class="time" href={ url }>
-				<mk-time time={ p.created_at } mode="detail"/>
+	<div class="reply-to" if={ p.reply_to }>
+		<mk-post-detail-sub post={ p.reply_to }/>
+	</div>
+	<div class="repost" if={ isRepost }>
+		<p>
+			<a class="avatar-anchor" href={ '/' + post.user.username }>
+				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
+				<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
+				{ post.user.name }
 			</a>
-			<footer>
-				<mk-reactions-viewer post={ p }/>
-				<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%"><i class="fa fa-reply"></i>
-					<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
-				</button>
-				<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
-					<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
-				</button>
-				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"><i class="fa fa-plus"></i>
-					<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
-				</button>
-				<button><i class="fa fa-ellipsis-h"></i></button>
-			</footer>
-		</article>
-		<div class="replies">
-			<virtual each={ post in replies }>
-				<mk-post-preview post={ post }/>
-			</virtual>
+			がRepost
+		</p>
+	</div>
+	<article>
+		<header>
+			<a class="avatar-anchor" href={ '/' + p.user.username }>
+				<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+			</a>
+			<div>
+				<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
+				<span class="username">@{ p.user.username }</span>
+			</div>
+		</header>
+		<div class="body">
+			<div class="text" ref="text"></div>
+			<div class="media" if={ p.media }>
+				<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
+			</div>
+			<mk-poll if={ p.poll } post={ p }/>
 		</div>
+		<a class="time" href={ url }>
+			<mk-time time={ p.created_at } mode="detail"/>
+		</a>
+		<footer>
+			<mk-reactions-viewer post={ p }/>
+			<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%"><i class="fa fa-reply"></i>
+				<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
+			</button>
+			<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
+				<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
+			</button>
+			<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"><i class="fa fa-plus"></i>
+				<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
+			</button>
+			<button><i class="fa fa-ellipsis-h"></i></button>
+		</footer>
+	</article>
+	<div class="replies">
+		<virtual each={ post in replies }>
+			<mk-post-detail-sub post={ post }/>
+		</virtual>
 	</div>
 	<style>
 		:scope
 			display block
-			margin 0
+			overflow hidden
+			margin 8px auto
 			padding 0
+			max-width 500px
+			width calc(100% - 16px)
+			text-align left
+			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+			@media (min-width 500px)
+				margin 16px auto
+				width calc(100% - 32px)
 
 			> .fetching
 				padding 64px 0
 
-			> .main
+			> .read-more
+				display block
+				margin 0
+				padding 10px 0
+				width 100%
+				font-size 1em
+				text-align center
+				color #999
+				cursor pointer
+				background #fafafa
+				outline none
+				border none
+				border-bottom solid 1px #eef0f2
+				border-radius 6px 6px 0 0
+				box-shadow none
 
-				> .read-more
-					display block
-					margin 0
-					padding 10px 0
-					width 100%
-					font-size 1em
-					text-align center
-					color #999
-					cursor pointer
-					background #fafafa
-					outline none
-					border none
-					border-bottom solid 1px #eef0f2
-					border-radius 6px 6px 0 0
-					box-shadow none
+				&:hover
+					background #f6f6f6
 
-					&:hover
-						background #f6f6f6
+				&:active
+					background #f0f0f0
 
-					&:active
-						background #f0f0f0
+				&:disabled
+					color #ccc
 
-					&:disabled
-						color #ccc
-
-				> .context
-					> *
-						border-bottom 1px solid #eef0f2
-
-				> .repost
-					color #9dbb00
-					background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-					> p
-						margin 0
-						padding 16px 32px
-
-						.avatar-anchor
-							display inline-block
-
-							.avatar
-								vertical-align bottom
-								min-width 28px
-								min-height 28px
-								max-width 28px
-								max-height 28px
-								margin 0 8px 0 0
-								border-radius 6px
-
-						i
-							margin-right 4px
-
-						.name
-							font-weight bold
-
-					& + article
-						padding-top 8px
-
-				> .reply-to
+			> .context
+				> *
 					border-bottom 1px solid #eef0f2
 
-				> article
-					padding 14px 16px 9px 16px
+			> .repost
+				color #9dbb00
+				background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-					@media (min-width 500px)
-						padding 28px 32px 18px 32px
+				> p
+					margin 0
+					padding 16px 32px
 
-					&:after
-						content ""
+					.avatar-anchor
+						display inline-block
+
+						.avatar
+							vertical-align bottom
+							min-width 28px
+							min-height 28px
+							max-width 28px
+							max-height 28px
+							margin 0 8px 0 0
+							border-radius 6px
+
+					i
+						margin-right 4px
+
+					.name
+						font-weight bold
+
+				& + article
+					padding-top 8px
+
+			> .reply-to
+				border-bottom 1px solid #eef0f2
+
+			> article
+				padding 14px 16px 9px 16px
+
+				@media (min-width 500px)
+					padding 28px 32px 18px 32px
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				&:hover
+					> .main > footer > button
+						color #888
+
+				> header
+					display flex
+					line-height 1.1
+
+					> .avatar-anchor
 						display block
-						clear both
+						padding 0 .5em 0 0
 
-					&:hover
-						> .main > footer > button
-							color #888
-
-					> header
-						display flex
-						line-height 1.1
-
-						> .avatar-anchor
-							display block
-							padding 0 .5em 0 0
-
-							> .avatar
-								display block
-								width 54px
-								height 54px
-								margin 0
-								border-radius 8px
-								vertical-align bottom
-
-								@media (min-width 500px)
-									width 60px
-									height 60px
-
-						> div
-
-							> .name
-								display inline-block
-								margin .4em 0
-								color #777
-								font-size 16px
-								font-weight bold
-								text-align left
-								text-decoration none
-
-								&:hover
-									text-decoration underline
-
-							> .username
-								display block
-								text-align left
-								margin 0
-								color #ccc
-
-					> .body
-						padding 8px 0
-
-						> .text
-							cursor default
+						> .avatar
 							display block
+							width 54px
+							height 54px
 							margin 0
-							padding 0
-							overflow-wrap break-word
-							font-size 16px
-							color #717171
+							border-radius 8px
+							vertical-align bottom
 
 							@media (min-width 500px)
-								font-size 24px
+								width 60px
+								height 60px
 
-							.link
-								&:after
-									content "\f14c"
-									display inline-block
-									padding-left 2px
-									font-family FontAwesome
-									font-size .9em
-									font-weight 400
-									font-style normal
+					> div
 
-							> mk-url-preview
-								margin-top 8px
-
-						> .media
-							> img
-								display block
-								max-width 100%
-
-					> .time
-						font-size 16px
-						color #c0c0c0
-
-					> footer
-						font-size 1.2em
-
-						> button
-							margin 0 28px 0 0
-							padding 8px
-							background transparent
-							border none
-							box-shadow none
-							font-size 1em
-							color #ddd
-							cursor pointer
+						> .name
+							display inline-block
+							margin .4em 0
+							color #777
+							font-size 16px
+							font-weight bold
+							text-align left
+							text-decoration none
 
 							&:hover
-								color #666
+								text-decoration underline
 
-							> .count
-								display inline
-								margin 0 0 0 8px
-								color #999
+						> .username
+							display block
+							text-align left
+							margin 0
+							color #ccc
 
-							&.reacted
-								color $theme-color
+				> .body
+					padding 8px 0
 
-				> .replies
-					> *
-						border-top 1px solid #eef0f2
+					> .text
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 16px
+						color #717171
+
+						@media (min-width 500px)
+							font-size 24px
+
+						.link
+							&:after
+								content "\f14c"
+								display inline-block
+								padding-left 2px
+								font-family FontAwesome
+								font-size .9em
+								font-weight 400
+								font-style normal
+
+						> mk-url-preview
+							margin-top 8px
+
+					> .media
+						> img
+							display block
+							max-width 100%
+
+				> .time
+					font-size 16px
+					color #c0c0c0
+
+				> footer
+					font-size 1.2em
+
+					> button
+						margin 0 28px 0 0
+						padding 8px
+						background transparent
+						border none
+						box-shadow none
+						font-size 1em
+						color #ddd
+						cursor pointer
+
+						&:hover
+							color #666
+
+						> .count
+							display inline
+							margin 0 0 0 8px
+							color #999
+
+						&.reacted
+							color $theme-color
+
+			> .replies
+				> *
+					border-top 1px solid #eef0f2
 
 	</style>
 	<script>
@@ -265,56 +269,42 @@
 
 		this.mixin('api');
 
-		this.fetching = true;
+		this.post = this.opts.post;
+		this.isRepost = this.post.repost != null;
+		this.p = this.isRepost ? this.post.repost : this.post;
+		this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+		this.summary = getPostSummary(this.p);
+
 		this.loadingContext = false;
 		this.context = null;
-		this.post = null;
 
 		this.on('mount', () => {
-			this.api('posts/show', {
-				post_id: this.opts.post
-			}).then(post => {
-				const isRepost = post.repost != null;
-				const p = isRepost ? post.repost : post;
-				p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+			if (this.p.text) {
+				const tokens = this.p.ast;
 
-				this.update({
-					fetching: false,
-					post: post,
-					isRepost: isRepost,
-					p: p,
-					summary: getPostSummary(p)
+				this.refs.text.innerHTML = compile(tokens);
+
+				this.refs.text.children.forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
 				});
 
-				this.trigger('loaded');
-
-				if (this.p.text) {
-					const tokens = this.p.ast;
-
-					this.refs.text.innerHTML = compile(tokens);
-
-					this.refs.text.children.forEach(e => {
-						if (e.tagName == 'MK-URL') riot.mount(e);
+				// URLをプレビュー
+				tokens
+				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+				.map(t => {
+					riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
+						url: t.url
 					});
+				});
+			}
 
-					// URLをプレビュー
-					tokens
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => {
-						riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
-							url: t.url
-						});
-					});
-				}
-
-				// Get replies
-				this.api('posts/replies', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(replies => {
-					this.update({
-						replies: replies
-					});
+			// Get replies
+			this.api('posts/replies', {
+				post_id: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.update({
+					replies: replies
 				});
 			});
 		});
@@ -357,3 +347,101 @@
 		};
 	</script>
 </mk-post-detail>
+
+<mk-post-detail-sub>
+	<article>
+		<a class="avatar-anchor" href={ '/' + post.user.username }>
+			<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
+		<div class="main">
+			<header>
+				<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>
+				<span class="username">@{ post.user.username }</span>
+				<a class="time" href={ '/' + post.user.username + '/' + post.id }>
+					<mk-time time={ post.created_at }/>
+				</a>
+			</header>
+			<div class="body">
+				<mk-sub-post-content class="text" post={ post }/>
+			</div>
+		</div>
+	</article>
+	<style>
+		:scope
+			display block
+			margin 0
+			padding 8px
+			font-size 0.9em
+			background #fdfdfd
+
+			@media (min-width 500px)
+				padding 12px
+
+			> article
+				&:after
+					content ""
+					display block
+					clear both
+
+				&:hover
+					> .main > footer > button
+						color #888
+
+				> .avatar-anchor
+					display block
+					float left
+					margin 0 12px 0 0
+
+					> .avatar
+						display block
+						width 48px
+						height 48px
+						margin 0
+						border-radius 8px
+						vertical-align bottom
+
+				> .main
+					float left
+					width calc(100% - 60px)
+
+					> header
+						display flex
+						margin-bottom 4px
+						white-space nowrap
+
+						> .name
+							display block
+							margin 0 .5em 0 0
+							padding 0
+							overflow hidden
+							color #607073
+							font-size 1em
+							font-weight 700
+							text-align left
+							text-decoration none
+							text-overflow ellipsis
+
+							&:hover
+								text-decoration underline
+
+						> .username
+							text-align left
+							margin 0 .5em 0 0
+							color #d1d8da
+
+						> .time
+							margin-left auto
+							color #b2b8bb
+
+					> .body
+
+						> .text
+							cursor default
+							margin 0
+							padding 0
+							font-size 1.1em
+							color #717171
+
+	</style>
+	<script>this.post = this.opts.post</script>
+</mk-post-detail-sub>
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 28c779684..cf267de94 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -1,11 +1,9 @@
 <mk-post-form>
 	<header>
+		<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
 		<div>
-			<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
-			<div>
-				<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
-				<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
-			</div>
+			<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
+			<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
 		</div>
 	</header>
 	<div class="form">
@@ -30,46 +28,47 @@
 	<style>
 		:scope
 			display block
-			padding-top 50px
+			max-width 500px
+			width calc(100% - 16px)
+			margin 8px auto
+			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+			@media (min-width 500px)
+				margin 16px auto
+				width calc(100% - 32px)
 
 			> header
-				position fixed
-				z-index 1000
-				top 0
-				left 0
-				width 100%
+				z-index 1
 				height 50px
-				background #fff
+				box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1)
+
+				> .cancel
+					width 50px
+					line-height 50px
+					font-size 24px
+					color #555
 
 				> div
-					max-width 500px
-					margin 0 auto
+					position absolute
+					top 0
+					right 0
 
-					> .cancel
-						width 50px
+					> .text-count
 						line-height 50px
-						font-size 24px
-						color #555
+						color #657786
 
-					> div
-						position absolute
-						top 0
-						right 0
+					> .submit
+						margin 8px
+						padding 0 16px
+						line-height 34px
+						color $theme-color-foreground
+						background $theme-color
+						border-radius 4px
 
-						> .text-count
-							line-height 50px
-							color #657786
-
-						> .submit
-							margin 8px
-							padding 0 16px
-							line-height 34px
-							color $theme-color-foreground
-							background $theme-color
-							border-radius 4px
-
-							&:disabled
-								opacity 0.7
+						&:disabled
+							opacity 0.7
 
 			> .form
 				max-width 500px
diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag
index 3e6caa1df..967764bc2 100644
--- a/src/web/app/mobile/tags/search-posts.tag
+++ b/src/web/app/mobile/tags/search-posts.tag
@@ -3,8 +3,16 @@
 	<style>
 		:scope
 			display block
+			margin 8px auto
+			max-width 500px
+			width calc(100% - 16px)
 			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
 
+			@media (min-width 500px)
+				margin 16px auto
+				width calc(100% - 32px)
 	</style>
 	<script>
 		this.mixin('api');
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 11f4e0740..9e39cf80d 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -22,6 +22,8 @@
 		:scope
 			display block
 			background #fff
+			border-radius 8px
+			box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
 
 			> .init
 				padding 64px 0
@@ -47,6 +49,9 @@
 			> mk-timeline-post
 				border-bottom solid 1px #eaeaea
 
+				&:first-child
+					border-radius 8px 8px 0 0
+
 				&:last-of-type
 					border-bottom none
 
@@ -77,6 +82,7 @@
 					padding 16px
 					width 100%
 					color $theme-color
+					border-radius 0 0 8px 8px
 
 					&:disabled
 						opacity 0.7
diff --git a/src/web/app/mobile/tags/user-timeline.tag b/src/web/app/mobile/tags/user-timeline.tag
index f7b2b36da..4dbe719f5 100644
--- a/src/web/app/mobile/tags/user-timeline.tag
+++ b/src/web/app/mobile/tags/user-timeline.tag
@@ -5,8 +5,6 @@
 			display block
 			max-width 600px
 			margin 0 auto
-			background #fff
-
 	</style>
 	<script>
 		this.mixin('api');
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index 81eb6ba2e..59c89ad1c 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -57,7 +57,7 @@
 				> header
 					> .banner
 						padding-bottom 33.3%
-						background-color #f5f5f5
+						background-color #1b1b1b
 						background-size cover
 						background-position center
 
@@ -84,13 +84,13 @@
 									left -2px
 									bottom -2px
 									width 100%
-									border 2px solid #fff
+									border 2px solid #313a42
 									border-radius 6px
 
 									@media (min-width 500px)
 										left -4px
 										bottom -4px
-										border 4px solid #fff
+										border 4px solid #313a42
 										border-radius 12px
 
 							> mk-follow-button
@@ -104,7 +104,7 @@
 								margin 0
 								line-height 22px
 								font-size 20px
-								color #222
+								color #fff
 
 							> .username
 								display inline-block
@@ -131,7 +131,7 @@
 							> p
 								display inline
 								margin 0 16px 0 0
-								color #555
+								color #a9b9c1
 
 								> i
 									margin-right 4px
@@ -146,7 +146,7 @@
 								> b
 									margin-right 4px
 									font-size 16px
-									color #14171a
+									color #fff
 
 								> i
 									font-size 14px
@@ -159,7 +159,7 @@
 						justify-content center
 						margin 0 auto
 						max-width 600px
-						border-bottom solid 1px #ddd
+						border-bottom solid 1px rgba(0, 0, 0, 0.2)
 
 						> a
 							display block
@@ -177,8 +177,10 @@
 								border-color $theme-color
 
 				> .body
+					padding 8px
+
 					@media (min-width 500px)
-						padding 16px 0 0 0
+						padding 16px
 
 	</style>
 	<script>
diff --git a/src/web/app/mobile/tags/users-list.tag b/src/web/app/mobile/tags/users-list.tag
index fb70f184d..295ae0669 100644
--- a/src/web/app/mobile/tags/users-list.tag
+++ b/src/web/app/mobile/tags/users-list.tag
@@ -14,14 +14,13 @@
 	<style>
 		:scope
 			display block
-			background #fff
 
 			> nav
 				display flex
 				justify-content center
 				margin 0 auto
 				max-width 600px
-				border-bottom solid 1px #ddd
+				border-bottom solid 1px rgba(0, 0, 0, 0.2)
 
 				> span
 					display block
@@ -43,14 +42,23 @@
 						padding 2px 5px
 						font-size 12px
 						line-height 1
-						color #888
-						background #eee
+						color #fff
+						background rgba(0, 0, 0, 0.3)
 						border-radius 20px
 
 			> .users
+				margin 8px auto
+				max-width 500px
+				width calc(100% - 16px)
+				background #fff
+				border-radius 8px
+				box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+				@media (min-width 500px)
+					margin 16px auto
+					width calc(100% - 32px)
+
 				> *
-					max-width 600px
-					margin 0 auto
 					border-bottom solid 1px rgba(0, 0, 0, 0.05)
 
 			> .no