Merge pull request #1558 from syuilo/better-mobile-design

Better mobile design

src/client/app/mobile/style.styl

@@ -8,6 +8,10 @@
 
 html
 	height 100%
+	background #ececed
+
+	&[data-darkmode]
+		background #191B22
 
 body
 	display flex

src/client/app/mobile/views/components/note.sub.vue

@@ -31,6 +31,9 @@ export default Vue.extend({
 	font-size 0.9em
 	padding 16px
 
+	@media (min-width 600px)
+		padding 24px 32px
+
 	&:after
 		content ""
 		display block

src/client/app/mobile/views/components/note.vue

@@ -238,7 +238,7 @@ export default Vue.extend({
 
 root(isDark)
 	font-size 12px
-	border-bottom solid 1px #eaeaea
+	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&:first-child
 		border-radius 8px 8px 0 0
@@ -266,6 +266,9 @@ root(isDark)
 		@media (min-width 500px)
 			padding 16px
 
+		@media (min-width 600px)
+			padding 16px 32px
+
 		.avatar-anchor
 			display inline-block
 
@@ -308,7 +311,10 @@ root(isDark)
 			background transparent
 
 	> article
-		padding 14px 16px 9px 16px
+		padding 16px 16px 9px
+
+		@media (min-width 600px)
+			padding 32px 32px 22px
 
 		&:after
 			content ""

src/client/app/mobile/views/components/notes.vue

@@ -199,10 +199,13 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-notes
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+
+	@media (min-width 500px)
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
 
 	.transition
 		.mk-notes-enter
@@ -260,8 +263,8 @@ export default Vue.extend({
 	> footer
 		text-align center
 		border-top solid 1px #eaeaea
-		border-bottom-left-radius 4px
+		border-bottom-left-radius 8px
-		border-bottom-right-radius 4px
+		border-bottom-right-radius 8px
 
 		&:empty
 			display none
@@ -270,10 +273,18 @@ export default Vue.extend({
 			margin 0
 			padding 16px
 			width 100%
-			color $theme-color
 			border-radius 0 0 8px 8px
 
+			@media (min-width 500px)
+				padding 20px
+
 			&:disabled
 				opacity 0.7
 
+.mk-notes[data-darkmode]
+	root(true)
+
+.mk-notes:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/components/notification.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
-		<mk-time :time="notification.createdAt"/>
 		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
-		<div class="text">
+		<div>
-			<p>
+			<header>
 				<mk-reaction-icon :reaction="notification.reaction"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
+				<mk-time :time="notification.createdAt"/>
+			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}
 				%fa:quote-right%
@@ -18,38 +18,54 @@
 	</div>
 
 	<div class="notification renote" v-if="notification.type == 'renote'">
-		<mk-time :time="notification.createdAt"/>
 		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
-		<div class="text">
+		<div>
-			<p>
+			<header>
 				%fa:retweet%
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
+				<mk-time :time="notification.createdAt"/>
+			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 			</router-link>
 		</div>
 	</div>
 
+	<div class="notification follow" v-if="notification.type == 'follow'">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
+			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		<div>
+			<header>
+				%fa:user-plus%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
+			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		<div>
+			<header>
+				%fa:chart-pie%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+			</router-link>
+		</div>
+	</div>
+
 	<template v-if="notification.type == 'quote'">
 		<mk-note :note="notification.note"/>
 	</template>
 
-	<div class="notification follow" v-if="notification.type == 'follow'">
-		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:user-plus%
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
-		</div>
-	</div>
-
 	<template v-if="notification.type == 'reply'">
 		<mk-note :note="notification.note"/>
 	</template>
@@ -57,22 +73,6 @@
 	<template v-if="notification.type == 'mention'">
 		<mk-note :note="notification.note"/>
 	</template>
-
-	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
-		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:chart-pie%
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
-			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-			</router-link>
-		</div>
-	</div>
 </div>
 </template>
 
@@ -95,44 +95,57 @@ export default Vue.extend({
 
 	> .notification
 		padding 16px
+		font-size 12px
 		overflow-wrap break-word
 
+		@media (min-width 350px)
+			font-size 14px
+
+		@media (min-width 500px)
+			font-size 16px
+
+		@media (min-width 600px)
+			padding 32px
+
 		&:after
 			content ""
 			display block
 			clear both
 
-		> .mk-time
-			display inline
-			position absolute
-			top 16px
-			right 12px
-			vertical-align top
-			color rgba(0, 0, 0, 0.6)
-			font-size 0.9em
-
 		> .avatar-anchor
 			display block
 			float left
 
 			img
-				min-width 36px
+				width 36px
-				min-height 36px
+				height 36px
-				max-width 36px
-				max-height 36px
 				border-radius 6px
 
-		> .text
+				@media (min-width 500px)
+					width 42px
+					height 42px
+
+		> div
 			float right
 			width calc(100% - 36px)
 			padding-left 8px
 
-			p
+			@media (min-width 500px)
-				margin 0
+				width calc(100% - 42px)
+
+			> header
+				display flex
+				align-items center
+				white-space nowrap
 
 				i, .mk-reaction-icon
 					margin-right 4px
 
+				> .mk-time
+					margin-left auto
+					color rgba(0, 0, 0, 0.3)
+					font-size 0.9em
+
 			> .note-preview
 				color rgba(0, 0, 0, 0.7)
 
@@ -147,11 +160,11 @@ export default Vue.extend({
 					margin-right 3px
 
 		&.renote
-			.text p i
+			> div > header i
 				color #77B255
 
 		&.follow
-			.text p i
+			> div > header i
 				color #53c7ce
 
 </style>

src/client/app/mobile/views/components/notifications.vue

@@ -1,18 +1,20 @@
 <template>
 <div class="mk-notifications">
-	<div class="notifications" v-if="notifications.length != 0">
+	<transition-group name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<mk-notification :notification="notification" :key="notification.id"/>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
+			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
 				<span>%fa:angle-up%{{ notification._datetext }}</span>
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
+	</transition-group>
+
 	<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
 		{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
 	</button>
+
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 </div>
@@ -102,23 +104,26 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notifications
-	margin 8px auto
+	margin 0 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)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
 	@media (min-width 500px)
-		margin 16px auto
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
-		width calc(100% - 32px)
+
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
 
 	> .notifications
 
 		> .mk-notification
-			margin 0 auto
-			max-width 500px
 			border-bottom solid 1px rgba(0, 0, 0, 0.05)
 
 			&:last-child

src/client/app/mobile/views/components/post-form.vue

@@ -175,11 +175,15 @@ export default Vue.extend({
 	margin 8px auto
 	background #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
 	@media (min-width 500px)
 		margin 16px auto
 		width calc(100% - 32px)
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+
+	@media (min-width 600px)
+		margin 32px auto
 
 	> header
 		z-index 1

src/client/app/mobile/views/components/ui.header.vue

@@ -143,14 +143,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.header
+root(isDark)
 	$height = 48px
 
 	position fixed
 	top 0
 	z-index 1024
 	width 100%
-	box-shadow 0 1px 0 rgba(#000, 0.075)
+	//box-shadow 0 1px 0 rgba(#000, 0.075)
 
 	&, *
 		user-select none
@@ -167,7 +167,7 @@ export default Vue.extend({
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
 			//background-color rgba(#1b2023, 0.75)
-			background-color #1b2023
+			background-color isDark ? #313543 : #595f6f
 
 		> p
 			display none
@@ -244,4 +244,10 @@ export default Vue.extend({
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
+.header[data-darkmode]
+	root(true)
+
+.header:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/components/user-timeline.vue

@@ -65,9 +65,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-.mk-user-timeline
-	max-width 600px
-	margin 0 auto
-</style>

src/client/app/mobile/views/pages/dashboard.vue

@@ -102,7 +102,6 @@ export default Vue.extend({
 
 	mounted() {
 		document.title = 'Misskey';
-		document.documentElement.style.background = '#313a42';
 	},
 
 	methods: {

src/client/app/mobile/views/pages/followers.vue

@@ -40,9 +40,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();

src/client/app/mobile/views/pages/following.vue

@@ -39,9 +39,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();

src/client/app/mobile/views/pages/home.vue

@@ -77,7 +77,6 @@ export default Vue.extend({
 
 	mounted() {
 		document.title = 'Misskey';
-		document.documentElement.style.background = '#313a42';
 
 		Progress.start();
 	},
@@ -163,11 +162,14 @@ main
 						background #eee
 
 	> .tl
-		max-width 600px
+		max-width 680px
 		margin 0 auto
 		padding 8px
 
 		@media (min-width 500px)
 			padding 16px
 
+		@media (min-width 600px)
+			padding 32px
+
 </style>

src/client/app/mobile/views/pages/note.vue

@@ -30,7 +30,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		fetch() {

src/client/app/mobile/views/pages/notifications.vue

@@ -2,7 +2,10 @@
 <mk-ui>
 	<span slot="header">%fa:R bell%%i18n:@notifications%</span>
 	<template slot="func"><button @click="fn">%fa:check%</button></template>
-	<mk-notifications @fetched="onFetched"/>
+
+	<main>
+		<mk-notifications @fetched="onFetched"/>
+	</main>
 </mk-ui>
 </template>
 
@@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading';
 export default Vue.extend({
 	mounted() {
 		document.title = 'Misskey | %i18n:@notifications%';
-		document.documentElement.style.background = '#313a42';
 
 		Progress.start();
 	},
@@ -30,3 +32,20 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+</style>

src/client/app/mobile/views/pages/profile-setting.vue

@@ -59,7 +59,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey | %i18n:@title%';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		setAvatar() {

src/client/app/mobile/views/pages/search.vue

@@ -39,7 +39,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = `%i18n:@search%: ${this.q} | Misskey`;
-		document.documentElement.style.background = '#313a42';
 
 		this.fetch();
 	},

src/client/app/mobile/views/pages/settings.vue

@@ -34,7 +34,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey | %i18n:@settings%';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		signout() {

src/client/app/mobile/views/pages/user.vue

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template>
-	<main v-if="!fetching">
+	<main v-if="!fetching" :data-darkmode="_darkmode_">
 		<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 		<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 		<header>
@@ -45,9 +45,9 @@
 		</header>
 		<nav>
 			<div class="nav-container">
-				<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
+				<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
-				<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
+				<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
-				<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
+				<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
 			</div>
 		</nav>
 		<div class="body">
@@ -88,9 +88,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();
@@ -110,7 +107,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-main
+root(isDark)
 	> .is-suspended
 	> .is-remote
 		&.is-suspended
@@ -138,7 +135,7 @@ main
 
 		> .banner
 			padding-bottom 33.3%
-			background-color #1b1b1b
+			background-color isDark ? #0e0e0e : #cacaca
 			background-size cover
 			background-position center
 
@@ -165,13 +162,13 @@ main
 						left -2px
 						bottom -2px
 						width 100%
-						border 3px solid #313a42
+						border 3px solid isDark ? #191b22 : #ececed
 						border-radius 6px
 
 						@media (min-width 500px)
 							left -4px
 							bottom -4px
-							border 4px solid #313a42
+							border 4px solid isDark ? #191b22 : #ececed
 							border-radius 12px
 
 				> .mk-follow-button
@@ -185,14 +182,14 @@ main
 					margin 0
 					line-height 22px
 					font-size 20px
-					color #fff
+					color isDark ? #fff : #757c82
 
 				> .username
 					display inline-block
 					line-height 20px
 					font-size 16px
 					font-weight bold
-					color #657786
+					color isDark ? #657786 : #969ea5
 
 				> .followed
 					margin-left 8px
@@ -204,7 +201,7 @@ main
 
 			> .description
 				margin 8px 0
-				color #fff
+				color isDark ? #fff : #757c82
 
 			> .info
 				margin 8px 0
@@ -212,14 +209,14 @@ main
 				> p
 					display inline
 					margin 0 16px 0 0
-					color #a9b9c1
+					color isDark ? #a9b9c1 : #90989c
 
 					> i
 						margin-right 4px
 
 			> .status
 				> a
-					color #657786
+					color isDark ? #657786 : #818a92
 
 					&:not(:last-child)
 						margin-right 16px
@@ -227,7 +224,7 @@ main
 					> b
 						margin-right 4px
 						font-size 16px
-						color #fff
+						color isDark ? #fff : #787e86
 
 					> i
 						font-size 14px
@@ -235,9 +232,9 @@ main
 	> nav
 		position -webkit-sticky
 		position sticky
-		top 48px
+		top 47px
-		box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
+		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
-		background-color #313a42
+		background-color isDark ? #191b22 : #ececed
 		z-index 1
 
 		> .nav-container
@@ -253,7 +250,7 @@ main
 				line-height 52px
 				font-size 14px
 				text-decoration none
-				color #657786
+				color isDark ? #657786 : #9ca1a5
 				border-bottom solid 2px transparent
 
 				&[data-active]
@@ -262,9 +259,20 @@ main
 					border-color $theme-color
 
 	> .body
+		max-width 680px
+		margin 0 auto
 		padding 8px
 
 		@media (min-width 500px)
 			padding 16px
 
+		@media (min-width 600px)
+			padding 32px
+
+main[data-darkmode]
+	root(true)
+
+main:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/pages/user/home.vue

@@ -64,11 +64,14 @@ export default Vue.extend({
 	> section
 		background #eee
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 4px 16px rgba(#000, 0.1)
 
 		&:not(:last-child)
 			margin-bottom 8px
 
+			@media (min-width 500px)
+				margin-bottom 16px
+
 		> h2
 			margin 0
 			padding 8px 10px