From e2b497de2a07ce2b301bfe201c42494f4d4feb9b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 Aug 2017 15:32:52 +0900
Subject: [PATCH] :v:

---
 CHANGELOG.md                                  |  5 ++++
 .../app/mobile/tags/page/settings/profile.tag | 29 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5f4b1e42..3195a42d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@ ChangeLog (Release Notes)
 =========================
 主に notable な changes を書いていきます
 
+unlereased
+----------
+* ユーザビリティの向上
+* デザインの調整
+
 2487 (2017/08/29)
 -----------------
 * New: パスワードを変更する際に新しいパスワードを二度入力させる (#739)
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
index 4d00f19d5..f427db327 100644
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -21,6 +21,9 @@
 	<div>
 		<p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
 		<div class="form">
+			<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } onclick={ clickBanner }>
+				<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" onclick={ clickAvatar }/>
+			</div>
 			<label>
 				<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
 				<input ref="name" type="text" value={ I.name }/>
@@ -60,7 +63,7 @@
 				> p
 					display block
 					margin 0 0 8px 0
-					padding 16px
+					padding 12px 16px
 					color #79d4e6
 					//color #276f86
 					//background #f8ffff
@@ -98,6 +101,20 @@
 						border-bottom solid 8px transparent
 						border-left solid 8px transparent
 
+					> div
+						height 128px
+						background-color #e4e4e4
+						border-radius 8px 8px 0 0
+
+						> img
+							position absolute
+							top 25px
+							left calc(50% - 40px)
+							width 80px
+							height 80px
+							border solid 2px #fff
+							border-radius 8px
+
 					> label
 						display block
 						margin 0
@@ -190,6 +207,16 @@
 			});
 		};
 
+		this.clickAvatar = e => {
+			this.setAvatar();
+			return false;
+		};
+
+		this.clickBanner = e => {
+			this.setBanner();
+			return false;
+		};
+
 		this.save = () => {
 			this.update({
 				saving: true