1 files changed, 48 insertions, 27 deletions
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index d489f3a053..82025291da 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -1,15 +1,22 @@
 <template>
 <div class="sub">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
 			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="created-at" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
+			<div class="info">
+				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+				<router-link class="created-at" :to="note | notePage">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+				<span class="visibility" v-if="note.visibility != 'public'">
+					<template v-if="note.visibility == 'home'">%fa:home%</template>
+					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
+					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
+					<template v-if="note.visibility == 'private'">%fa:lock%</template>
+				</span>
+			</div>
 		</header>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
@@ -27,34 +34,31 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
-	font-size 0.9em
+root(isDark)
 	padding 16px
+	font-size 0.9em
+	background isDark ? #21242d : #fcfcfc
+
+	@media (min-width 600px)
+		padding 24px 32px
 
 	&:after
 		content ""
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 10px 0 0
+		width 44px
+		height 44px
+		border-radius 8px
 
 		@media (min-width 500px)
 			margin-right 16px
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-			@media (min-width 500px)
-				width 52px
-				height 52px
+			width 52px
+			height 52px
 
 	> .main
 		float left
@@ -65,6 +69,7 @@ export default Vue.extend({
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 2px
 			white-space nowrap
 
@@ -73,7 +78,7 @@ export default Vue.extend({
 				margin 0 0.5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight 700
 				text-align left
@@ -86,24 +91,40 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
-			> .created-at
+			> .info
 				margin-left auto
-				color #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
+			max-height 128px
+			overflow hidden
 
 			> .text
 				cursor default
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
 				pre
 					max-height 120px
 					font-size 80%
 
-</style>
+.sub[data-darkmode]
+	root(true)
 
+.sub:not([data-darkmode])
+	root(false)
+
+</style>