:art:

6 files changed, 112 insertions, 82 deletions

diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index 26c8a7d25c..1d9ee2cd0a 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -5,9 +5,18 @@
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
 			<span class="username"><mk-acct :user="note.user"/></span>
-			<router-link class="time" :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"/>
@@ -32,24 +41,20 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	display flex
 	font-size 0.9em
 
-	&:after
-		content ""
-		display block
-		clear both
-
 	> .avatar
+		flex-shrink 0
 		display block
-		float left
 		margin 0 12px 0 0
 		width 48px
 		height 48px
 		border-radius 8px
 
 	> .main
-		float left
-		width calc(100% - 60px)
+		flex 1
+		min-width 0
 
 		> header
 			display flex
@@ -75,9 +80,18 @@ root(isDark)
 				text-overflow ellipsis
 				color isDark ? #606984 : #d1d8da
 
-			> .time
+			> .info
 				margin-left auto
-				color isDark ? #606984 : #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
 
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index ca8aaeede0..4938b7984e 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -44,27 +44,23 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	display flex
 	margin 0
 	padding 16px 32px
 	font-size 0.9em
 	background isDark ? #21242d : #fcfcfc
 
-	&:after
-		content ""
-		display block
-		clear both
-
 	> .avatar
+		flex-shrink 0
 		display block
-		float left
 		margin 0 12px 0 0
 		width 48px
 		height 48px
 		border-radius 8px
 
 	> .main
-		float left
-		width calc(100% - 60px)
+		flex 1
+		min-width 0
 
 		> header
 			display flex
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 271332ba0b..5f4b0532a8 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -387,20 +387,16 @@ root(isDark)
 			padding-top 8px
 
 	> article
+		display flex
 		padding 28px 32px 18px 32px
 
-		&:after
-			content ""
-			display block
-			clear both
-
 		&:hover
 			> .main > footer > button
 				color isDark ? #707b97 : #888
 
 		> .avatar
+			flex-shrink 0
 			display block
-			float left
 			margin 0 16px 10px 0
 			width 58px
 			height 58px
@@ -410,8 +406,8 @@ root(isDark)
 			//top 74px
 
 		> .main
-			float left
-			width calc(100% - 74px)
+			flex 1
+			min-width 0
 
 			> header
 				display flex
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index c3e57d3381..77ca99e978 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -9,9 +9,18 @@
 			<span class="is-bot" v-if="note.user.isBot">%i18n:@bot%</span>
 			<span class="is-cat" v-if="note.user.isCat">%i18n:@cat%</span>
 			<span class="username"><mk-acct :user="note.user"/></span>
-			<router-link class="time" :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"/>
@@ -30,14 +39,16 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	display flex
 	margin 0
 	padding 0
-	font-size 0.9em
+	font-size 10px
 
-	&:after
-		content ""
-		display block
-		clear both
+	@media (min-width 350px)
+		font-size 12px
+
+	@media (min-width 500px)
+		font-size 14px
 
 	&.smart
 		> .main
@@ -47,24 +58,26 @@ root(isDark)
 				align-items center
 
 	> .avatar
+		flex-shrink 0
 		display block
-		float left
-		margin 0 12px 0 0
-		width 48px
-		height 48px
+		margin 0 10px 0 0
+		width 40px
+		height 40px
 		border-radius 8px
 
-		@media (max-width 500px)
+		@media (min-width 350px)
 			margin 0 10px 0 0
 			width 44px
 			height 44px
 
-	> .main
-		float left
-		width calc(100% - 60px)
+		@media (min-width 500px)
+			margin 0 12px 0 0
+			width 48px
+			height 48px
 
-		@media (max-width 500px)
-			width calc(100% - 54px)
+	> .main
+		flex 1
+		min-width 0
 
 		> header
 			display flex
@@ -97,7 +110,7 @@ root(isDark)
 				align-self center
 				margin 0 0.5em 0 0
 				padding 1px 6px
-				font-size 10px
+				font-size 0.8em
 				color isDark ? #758188 : #aaa
 				border solid 1px isDark ? #57616f : #ddd
 				border-radius 3px
@@ -112,9 +125,18 @@ root(isDark)
 				text-overflow ellipsis
 				color isDark ? #606984 : #d1d8da
 
-			> .time
+			> .info
 				margin-left auto
-				color isDark ? #606984 : #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
 
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 9b9dd9e667..a0084e6c29 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -39,10 +39,17 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+	display flex
 	padding 16px
-	font-size 0.9em
+	font-size 10px
 	background isDark ? #21242d : #fcfcfc
 
+	@media (min-width 350px)
+		font-size 12px
+
+	@media (min-width 500px)
+		font-size 14px
+
 	@media (min-width 600px)
 		padding 24px 32px
 
@@ -53,30 +60,27 @@ root(isDark)
 			> header
 				align-items center
 
-	&:after
-		content ""
-		display block
-		clear both
-
 	> .avatar
+		flex-shrink 0
 		display block
-		float left
-		margin 0 10px 0 0
-		width 42px
-		height 42px
+		margin 0 8px 0 0
+		width 38px
+		height 38px
 		border-radius 8px
 
+		@media (min-width 350px)
+			margin-right 10px
+			width 42px
+			height 42px
+
 		@media (min-width 500px)
 			margin-right 14px
 			width 50px
 			height 50px
 
 	> .main
-		float left
-		width calc(100% - 52px)
-
-		@media (min-width 500px)
-			width calc(100% - 64px)
+		flex 1
+		min-width 0
 
 		> header
 			display flex
@@ -112,7 +116,7 @@ root(isDark)
 				align-self center
 				margin 0 0.5em 0 0
 				padding 1px 5px
-				font-size 10px
+				font-size 0.8em
 				color isDark ? #758188 : #aaa
 				border solid 1px isDark ? #57616f : #ddd
 				border-radius 3px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index c3994197c4..34326e12f3 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -269,8 +269,6 @@ root(isDark)
 	&.smart
 		> article
 			> .main
-				width 100%
-
 				> header
 					align-items center
 					margin-bottom 4px
@@ -328,27 +326,28 @@ root(isDark)
 			padding-top 8px
 
 	> article
+		display flex
 		padding 16px 16px 9px
 
 		@media (min-width 600px)
 			padding 32px 32px 22px
 
-		&:after
-			content ""
-			display block
-			clear both
-
 		> .avatar
+			flex-shrink 0
 			display block
-			float left
 			margin 0 10px 8px 0
-			width 48px
-			height 48px
+			width 42px
+			height 42px
 			border-radius 6px
 			//position -webkit-sticky
 			//position sticky
 			//top 62px
 
+			@media (min-width 350px)
+				width 48px
+				height 48px
+				border-radius 6px
+
 			@media (min-width 500px)
 				margin-right 16px
 				width 58px
@@ -356,11 +355,8 @@ root(isDark)
 				border-radius 8px
 
 		> .main
-			float left
-			width calc(100% - 58px)
-
-			@media (min-width 500px)
-				width calc(100% - 74px)
+			flex 1
+			min-width 0
 
 			> header
 				display flex
@@ -393,7 +389,7 @@ root(isDark)
 					align-self center
 					margin 0 0.5em 0 0
 					padding 1px 6px
-					font-size 12px
+					font-size 0.8em
 					color isDark ? #758188 : #aaa
 					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
@@ -422,6 +418,8 @@ root(isDark)
 						margin-left 6px
 
 			> .body
+				@media (min-width 700px)
+					font-size 1.1em
 
 				> .cw
 					cursor default