モバイル版でもデッキを使えるように (#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/common/views/components/menu.vue

@@ -64,6 +64,10 @@ export default Vue.extend({
 				this.hukidasi = false;
 			}
 
+			if (top < 0) {
+				top = 0;
+			}
+
 			popover.style.left = left + 'px';
 			popover.style.top = top + 'px';
 

src/client/app/common/views/components/renote.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="puqkfets" :class="{ mini }">
+<div class="puqkfets" :class="{ mini: narrow }">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<fa icon="retweet"/>
 	<i18n path="@.renoted-by" tag="span">
@@ -30,13 +30,13 @@ export default Vue.extend({
 		note: {
 			type: Object,
 			required: true
-		},
-		mini: {
-			type: Boolean,
-			required: false,
+		}
+	},
+	inject: {
+		narrow: {
 			default: false
 		}
-	}
+	},
 });
 </script>
 
@@ -44,25 +44,20 @@ export default Vue.extend({
 .puqkfets
 	display flex
 	align-items center
-	padding 16px 32px 8px 32px
+	padding 8px 16px
 	line-height 28px
 	white-space pre
 	color var(--renoteText)
 	background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
-	&.mini
+	&:not(.mini)
 		padding 8px 16px
 
 		@media (min-width 500px)
-			padding 16px
+			padding 8px 16px
 
 		@media (min-width 600px)
-			padding 16px 32px
-
-		> .avatar
-			@media (min-width 500px)
-				width 28px
-				height 28px
+			padding 16px 32px 8px 32px
 
 	> .avatar
 		flex-shrink 0

src/client/app/common/views/components/url-preview.vue

@@ -8,7 +8,7 @@
 	</blockquote>
 </div>
 <div v-else class="mk-url-preview">
-	<a :class="{ mini, compact }" :href="url" target="_blank" :title="url" v-if="!fetching">
+	<a :class="{ mini: narrow, compact }" :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`"></div>
 		<article>
 			<header>
@@ -125,10 +125,10 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+	},
 
-		mini: {
-			type: Boolean,
-			required: false,
+	inject: {
+		narrow: {
 			default: false
 		}
 	},
@@ -350,7 +350,7 @@ export default Vue.extend({
 
 			&.compact
 				> .thumbnail
-					position: absolute
+					position absolute
 					width 56px
 					height 100%
 
@@ -368,7 +368,7 @@ export default Vue.extend({
 		&.compact
 			> article
 				> header h1, p, footer
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
 </style>

src/client/app/common/views/components/user-menu.vue

@@ -66,10 +66,11 @@ export default Vue.extend({
 		},
 
 		async pushList() {
+			const t = this.$t('select-list'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
 			const lists = await this.$root.api('users/lists/list');
 			const { canceled, result: listId } = await this.$root.dialog({
 				type: null,
-				title: this.$t('select-list'),
+				title: t,
 				select: {
 					items: lists.map(list => ({
 						value: list.id, text: list.title