モバイル版でもデッキを使えるように (#4366)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* wip

* Update notifications.vue

* Update user-menu.vue

* deck settings

* indicate

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

@@ -1,23 +1,23 @@
 <template>
 <div
 	class="note"
-	:class="{ mini }"
+	:class="{ mini: narrow }"
 	v-show="(this.$store.state.settings.remainDeletedNote || appearNote.deletedAt == null) && !hideThisNote"
 	:tabindex="appearNote.deletedAt == null ? '-1' : null"
 	v-hotkey="keymap"
 	:title="title"
 >
 	<div class="conversation" v-if="detail && conversation.length > 0">
-		<x-sub v-for="note in conversation" :key="note.id" :note="note" :mini="mini"/>
+		<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
 	</div>
 	<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
-		<x-sub :note="appearNote.reply" :mini="mini"/>
+		<x-sub :note="appearNote.reply"/>
 	</div>
 	<mk-renote class="renote" v-if="isRenote" :note="note"/>
-	<article>
+	<article class="article">
 		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<mk-note-header class="header" :note="appearNote" :mini="mini"/>
+			<mk-note-header class="header" :note="appearNote"/>
 			<div class="body" v-if="appearNote.deletedAt == null">
 				<p v-if="appearNote.cw != null" class="cw">
 					<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
@@ -35,12 +35,12 @@
 					</div>
 					<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
 					<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> 位置情報</a>
-					<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
-					<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini" :compact="compact"/>
+					<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="compact"/>
 				</div>
 			</div>
 			<footer v-if="appearNote.deletedAt == null">
-				<span class="app" v-if="appearNote.app && mini && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
+				<span class="app" v-if="appearNote.app && narrow && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
 				<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
 				<button class="replyButton" @click="reply()" :title="$t('reply')">
 					<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
@@ -70,7 +70,7 @@
 		</div>
 	</article>
 	<div class="replies" v-if="detail && replies.length > 0">
-		<x-sub v-for="note in replies" :key="note.id" :note="note" :mini="mini"/>
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
 </div>
 </template>
@@ -110,9 +110,10 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
-		mini: {
-			type: Boolean,
-			required: false,
+	},
+
+	inject: {
+		narrow: {
 			default: false
 		}
 	},
@@ -152,7 +153,7 @@ export default Vue.extend({
 	border-bottom solid var(--lineWidth) var(--faceDivider)
 
 	&.mini
-		font-size 14px
+		font-size 13px
 
 		> .renote
 			padding 8px 16px 0 16px
@@ -161,7 +162,7 @@ export default Vue.extend({
 				width 20px
 				height 20px
 
-		> article
+		> .article
 			padding 16px 16px 4px
 
 			> .avatar
@@ -189,7 +190,7 @@ export default Vue.extend({
 	> .renote + article
 		padding-top 8px
 
-	> article
+	> .article
 		display flex
 		padding 28px 32px 18px 32px