:v:

4 files changed, 88 insertions, 72 deletions

diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index afb8de4b2a..76b7c3f381 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -5,19 +5,32 @@
 		<div class="fade"></div>
 		<div class="title">
 			<p class="name">{{ user | userName }}</p>
-			<p class="username"><mk-acct :user="user"/></p>
-			<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
+			<div>
+				<template v-if="user.isBot">%fa:robot%</template>
+				<p class="username"><mk-acct :user="user"/></p>
+				<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
+				<p class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
+			</div>
 		</div>
 	</div>
 	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 	<div class="body">
-		<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
+		<div class="description">
+			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
+		</div>
+		<div class="status">
+			<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>
+			<span class="following clickable" @click="showFollowing"><b>{{ user.followingCount | number }}</b>%i18n:@following%</span>
+			<span class="followers clickable" @click="showFollowers"><b>{{ user.followersCount | number }}</b>%i18n:@followers%</span>
+		</div>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import MkFollowingWindow from '../../components/following-window.vue';
+import MkFollowersWindow from '../../components/followers-window.vue';
 
 export default Vue.extend({
 	props: ['user'],
@@ -64,7 +77,19 @@ export default Vue.extend({
 			(this as any).apis.updateBanner().then(i => {
 				this.user.bannerUrl = i.bannerUrl;
 			});
-		}
+		},
+
+		showFollowing() {
+			(this as any).os.new(MkFollowingWindow, {
+				user: this.user
+			});
+		},
+
+		showFollowers() {
+			(this as any).os.new(MkFollowersWindow, {
+				user: this.user
+			});
+		},
 	}
 });
 </script>
@@ -118,7 +143,6 @@ root(isDark)
 			width 100%
 			padding 0 0 8px 154px
 			color #5e6367
-			font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
 
 			> .name
 				display block
@@ -127,15 +151,15 @@ root(isDark)
 				font-weight bold
 				font-size 1.8em
 
-			> .username
-			> .location
-				display inline-block
-				margin 0 16px 0 0
-				line-height 20px
-				opacity 0.8
+			> div
+				> *
+					display inline-block
+					margin 0 16px 0 0
+					line-height 20px
+					opacity 0.8
 
-				> i
-					margin-right 4px
+					> i
+						margin-right 4px
 
 	> .avatar
 		display block
@@ -151,6 +175,32 @@ root(isDark)
 		padding 16px 16px 16px 154px
 		color isDark ? #c5ced6 : #555
 
+		> .status
+			margin-top 16px
+			padding-top 16px
+			border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+			font-size 80%
+
+			> *
+				display inline-block
+				padding-right 16px
+				margin-right 16px
+
+				&:not(:last-child)
+					border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+
+				&.clickable
+					cursor pointer
+
+					&:hover
+						color isDark ? #fff : #000
+
+				> b
+					margin-right 4px
+					font-size 1rem
+					font-weight bold
+					color $theme-color
+
 .header[data-darkmode]
 	root(true)
 
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 21f3c57c75..fda1db2849 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -15,25 +15,12 @@
 		</button>
 		<button class="mute ui" @click="list">%fa:list% リストに追加</button>
 	</div>
-	<div class="birthday" v-if="user.host === null && user.profile.birthday">
-		<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
-	</div>
-	<div class="twitter" v-if="user.host === null && user.twitter">
-		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
-	</div>
-	<div class="status">
-		<p class="notes-count">%fa:angle-right%<a>{{ user.notesCount }}</a><b>投稿</b></p>
-		<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.followingCount }}</a>人を<b>フォロー</b></p>
-		<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followersCount }}</a>人の<b>フォロワー</b></p>
-	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import * as age from 's-age';
-import MkFollowingWindow from '../../components/following-window.vue';
-import MkFollowersWindow from '../../components/followers-window.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
 
 export default Vue.extend({
@@ -44,17 +31,6 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		showFollowing() {
-			(this as any).os.new(MkFollowingWindow, {
-				user: this.user
-			});
-		},
-
-		showFollowers() {
-			(this as any).os.new(MkFollowersWindow, {
-				user: this.user
-			});
-		},
 
 		stalk() {
 			(this as any).api('following/stalk', {
@@ -152,40 +128,6 @@ root(isDark)
 			&:not(:last-child)
 				margin-bottom 12px
 
-	> .birthday
-		padding 16px
-		color isDark ? #e3e7ea : #555
-		border-bottom solid 1px isDark ? #21242f : #eee
-
-		> p
-			margin 0
-
-			> i
-				margin-right 8px
-
-	> .twitter
-		padding 16px
-		color isDark ? #e3e7ea : #555
-		border-bottom solid 1px isDark ? #21242f : #eee
-
-		> p
-			margin 0
-
-			> i
-				margin-right 8px
-
-	> .status
-		padding 16px
-		color isDark ? #e3e7ea : #555
-		border-bottom solid 1px isDark ? #21242f : #eee
-
-		> p
-			margin 8px 0
-
-			> i
-				margin-left 8px
-				margin-right 8px
-
 .profile[data-darkmode]
 	root(true)
 
diff --git a/src/client/app/desktop/views/pages/user/user.twitter.vue b/src/client/app/desktop/views/pages/user/user.twitter.vue
new file mode 100644
index 0000000000..a5707b475f
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.twitter.vue
@@ -0,0 +1,21 @@
+<template>
+<div class="adsvaidqfznoartcbplullnejvxjphcn">
+	<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.adsvaidqfznoartcbplullnejvxjphcn
+	padding 32px
+	background #1a94f2
+	color #fff
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 5cea4b99e5..3123614c72 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -11,6 +11,7 @@
 			</div>
 			<div class="side">
 				<x-profile :user="user"/>
+				<a-twitter :user="user" v-if="user.host === null && user.twitter"/>
 				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
 				<mk-activity :user="user"/>
 				<x-photos :user="user"/>
@@ -35,6 +36,7 @@ import XProfile from './user.profile.vue';
 import XPhotos from './user.photos.vue';
 import XFollowersYouKnow from './user.followers-you-know.vue';
 import XFriends from './user.friends.vue';
+import XTwitter from './user.twitter.vue';
 
 export default Vue.extend({
 	components: {
@@ -43,7 +45,8 @@ export default Vue.extend({
 		XProfile,
 		XPhotos,
 		XFollowersYouKnow,
-		XFriends
+		XFriends,
+		XTwitter
 	},
 	data() {
 		return {