10.38.3

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "10.38.2",
-	"clientVersion": "1.0.11486",
+	"version": "10.38.3",
+	"clientVersion": "1.0.11490",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,

src/client/app/admin/views/announcements.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
 	<ui-card>
 		<div slot="title">%fa:broadcast-tower% %i18n:@announcements%</div>
 		<section v-for="(announcement, i) in announcements" class="fit-top">
@@ -9,10 +9,10 @@
 			<ui-textarea v-model="announcement.text">
 				<span>%i18n:@text%</span>
 			</ui-textarea>
-			<ui-button-group>
-				<ui-button inline @click="save">%fa:save R% %i18n:@save%</ui-button>
-				<ui-button inline @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button>
-			</ui-button-group>
+			<ui-horizon-group>
+				<ui-button @click="save">%fa:save R% %i18n:@save%</ui-button>
+				<ui-button @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button>
+			</ui-horizon-group>
 		</section>
 		<section>
 			<ui-button @click="add">%fa:plus% %i18n:@add%</ui-button>
@@ -62,3 +62,10 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.cdeuzmsthagexbkpofbmatmugjuvogfb
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/cpu-memory.vue

@@ -168,4 +168,13 @@ export default Vue.extend({
 		> div
 			margin-bottom -10px
 
+	@media (max-width 1000px)
+		display block
+		margin-bottom 26px
+
+		> div
+			&:first-child
+				margin-right 0
+				margin-bottom 26px
+
 </style>

src/client/app/admin/views/dashboard.vue

@@ -124,6 +124,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .obdskegsannmntldydackcpzezagxqfy
+	padding 16px
+
+	@media (min-width 500px)
+		padding 32px
+
 	> header
 		display flex
 		margin-bottom 16px
@@ -132,6 +137,9 @@ export default Vue.extend({
 		color var(--adminDashboardHeaderFg)
 		font-size 14px
 
+		@media (max-width 1000px)
+			display none
+
 		> p
 			display inline
 			margin 0 32px 0 0
@@ -152,7 +160,6 @@ export default Vue.extend({
 
 		> div
 			flex 1
-			max-width 300px
 			margin-right 16px
 			color var(--adminDashboardCardFg)
 			box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
@@ -202,6 +209,21 @@ export default Vue.extend({
 						margin-left auto
 						cursor pointer
 
+		@media (max-width 900px)
+			display grid
+			grid-template-columns 1fr 1fr
+			grid-template-rows 1fr 1fr
+			gap 16px
+
+			> div
+				margin-right 0
+
+		@media (max-width 500px)
+			display block
+
+			> div:not(:last-child)
+				margin-bottom 16px
+
 	> .charts
 		margin-bottom 16px
 

src/client/app/admin/views/emoji.vue

@@ -1,8 +1,9 @@
 <template>
-<div>
+<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
 	<ui-card>
 		<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
 		<section class="fit-top">
+			<ui-horizon-group inputs>
 				<ui-input v-model="name">
 					<span>%i18n:@add-emoji.name%</span>
 					<span slot="text">%i18n:@add-emoji.name-desc%</span>
@@ -11,6 +12,7 @@
 					<span>%i18n:@add-emoji.aliases%</span>
 					<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
 				</ui-input>
+			</ui-horizon-group>
 			<ui-input v-model="url">
 				<span>%i18n:@add-emoji.url%</span>
 			</ui-input>
@@ -22,6 +24,7 @@
 		<div slot="title">%fa:grin R% %i18n:@emojis.title%</div>
 		<section v-for="emoji in emojis">
 			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
+			<ui-horizon-group inputs>
 				<ui-input v-model="emoji.name">
 					<span>%i18n:@add-emoji.name%</span>
 					<span slot="text">%i18n:@add-emoji.name-desc%</span>
@@ -30,13 +33,14 @@
 					<span>%i18n:@add-emoji.aliases%</span>
 					<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
 				</ui-input>
+			</ui-horizon-group>
 			<ui-input v-model="emoji.url">
 				<span>%i18n:@add-emoji.url%</span>
 			</ui-input>
-			<ui-button-group>
-				<ui-button inline @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
-				<ui-button inline @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
-			</ui-button-group>
+			<ui-horizon-group>
+				<ui-button @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
+				<ui-button @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
+			</ui-horizon-group>
 		</section>
 	</ui-card>
 </div>
@@ -106,3 +110,10 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.tumhkfkmgtvzljezfvmgkeurkfncshbe
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/index.vue

@@ -1,6 +1,15 @@
 <template>
-<div class="mk-admin">
-	<nav>
+<div class="mk-admin" :class="{ isMobile }">
+	<header v-show="isMobile">
+		<button class="nav" @click="navOpend = true">%fa:bars%</button>
+		<span>MisskeyMyAdmin</span>
+	</header>
+	<div class="nav-backdrop"
+		v-if="navOpend && isMobile"
+		@click="navOpend = false"
+		@touchstart="navOpend = false"
+	></div>
+	<nav v-show="navOpend">
 		<div class="mi">
 			<img svg-inline src="../assets/header-icon.svg"/>
 		</div>
@@ -49,6 +58,10 @@ import XAnnouncements from "./announcements.vue";
 import XHashtags from "./hashtags.vue";
 import XUsers from "./users.vue";
 
+// Detect the user agent
+const ua = navigator.userAgent.toLowerCase();
+const isMobile = /mobile|iphone|ipad|android/.test(ua);
+
 export default Vue.extend({
 	components: {
 		XDashboard,
@@ -58,10 +71,15 @@ export default Vue.extend({
 		XHashtags,
 		XUsers
 	},
+	provide: {
+		isMobile
+	},
 	data() {
 		return {
 			page: 'dashboard',
-			version
+			version,
+			isMobile,
+			navOpend: !isMobile
 		};
 	},
 	methods: {
@@ -74,12 +92,46 @@ export default Vue.extend({
 
 <style lang="stylus">
 .mk-admin
+	$headerHeight = 48px
+
 	display flex
 	height 100%
 
+	> header
+		position fixed
+		top 0
+		z-index 10000
+		width 100%
+		color var(--mobileHeaderFg)
+		background-color var(--mobileHeaderBg)
+		box-shadow 0 1px 0 rgba(#000, 0.075)
+
+		&, *
+			user-select none
+
+		> span
+			display block
+			line-height $headerHeight
+			text-align center
+
+		> .nav
+			display block
+			position absolute
+			top 0
+			left 0
+			z-index 10001
+			padding 0
+			width $headerHeight
+			font-size 1.4em
+			line-height $headerHeight
+			border-right solid 1px rgba(#000, 0.1)
+
+			> [data-fa]
+				transition all 0.2s ease
+
 	> nav
 		position fixed
-		z-index 10000
+		z-index 20001
 		top 0
 		left 0
 		width 250px
@@ -187,9 +239,22 @@ export default Vue.extend({
 						border-bottom solid 16px transparent
 						border-left solid 16px transparent
 
+	> .nav-backdrop
+		position fixed
+		top 0
+		left 0
+		z-index 20000
+		width 100%
+		height 100%
+		background var(--mobileNavBackdrop)
+
 	> main
 		width 100%
-		padding 32px 32px 32px calc(32px + 250px)
+		padding 0 0 0 250px
 		max-width 1300px
 
+	&.isMobile
+		> main
+			padding $headerHeight 0 0 0
+
 </style>

src/client/app/admin/views/instance.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="axbwjelsbymowqjyywpirzhdlszoncqs">
 	<ui-card>
 		<div slot="title">%i18n:@banner-url%</div>
 		<section class="fit-top">
@@ -60,3 +60,10 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.axbwjelsbymowqjyywpirzhdlszoncqs
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/users.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="ucnffhbtogqgscfmqcymwmmupoknpfsw">
 	<ui-card>
 		<div slot="title">%i18n:@verify-user%</div>
 		<section class="fit-top">
@@ -127,3 +127,10 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.ucnffhbtogqgscfmqcymwmmupoknpfsw
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/common/views/components/index.ts

@@ -42,7 +42,7 @@ import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
-import uiButtonGroup from './ui/button-group.vue';
+import uiHorizonGroup from './ui/horizon-group.vue';
 import uiCard from './ui/card.vue';
 import uiForm from './ui/form.vue';
 import uiTextarea from './ui/textarea.vue';
@@ -95,7 +95,7 @@ Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
-Vue.component('ui-button-group', uiButtonGroup);
+Vue.component('ui-horizon-group', uiHorizonGroup);
 Vue.component('ui-card', uiCard);
 Vue.component('ui-form', uiForm);
 Vue.component('ui-textarea', uiTextarea);

src/client/app/common/views/components/ui/button-group.vue

@@ -1,21 +0,0 @@
-<template>
-<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze">
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({});
-</script>
-
-<style lang="stylus" scoped>
-.pfzekjfwkwvadvlujpdnnxfggqgqjoze
-	display flex
-
-	> *
-		flex 1
-
-		&:not(:last-child)
-			margin-right 16px
-</style>

src/client/app/common/views/components/ui/button.vue

@@ -1,5 +1,10 @@
 <template>
-<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :is="link ? 'a' : 'button'" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
+	:is="link ? 'a' : 'button'"
+	:class="[styl, { inline, primary }]"
+	:type="type"
+	@click="$emit('click')"
+>
 	<slot></slot>
 </component>
 </template>
@@ -7,6 +12,7 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	inject: ['horizonGrouped'],
 	props: {
 		type: {
 			type: String,
@@ -20,7 +26,9 @@ export default Vue.extend({
 		inline: {
 			type: Boolean,
 			required: false,
-			default: false
+			default(): boolean {
+				return this.horizonGrouped;
+			}
 		},
 		link: {
 			type: Boolean,

src/client/app/common/views/components/ui/horizon-group.vue

@@ -0,0 +1,35 @@
+<template>
+<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze" :class="{ inputs }">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	provide: {
+		horizonGrouped: true
+	},
+	props: {
+		inputs: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.pfzekjfwkwvadvlujpdnnxfggqgqjoze
+	display flex
+
+	&.inputs
+		margin 32px 0
+
+	> *
+		flex 1
+
+		&:not(:last-child)
+			margin-right 16px
+</style>

src/client/app/common/views/components/ui/input.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ui-input" :class="[{ focused, filled }, styl]">
+<div class="ui-input" :class="[{ focused, filled, inline }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
@@ -41,6 +41,7 @@ import Vue from 'vue';
 const getPasswordStrength = require('syuilo-password-strength');
 
 export default Vue.extend({
+	inject: ['horizonGrouped'],
 	props: {
 		value: {
 			required: false
@@ -72,6 +73,13 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default(): boolean {
+				return this.horizonGrouped;
+			}
+		},
 		styl: {
 			type: String,
 			required: false,
@@ -337,4 +345,8 @@ root(fill)
 	&:not(.fill)
 		root(false)
 
+	&.inline
+		display inline-block
+		margin 0
+
 </style>

src/remote/activitypub/misc/get-note-html.ts

@@ -4,7 +4,7 @@ import parse from '../../../mfm/parse';
 
 export default function(note: INote) {
 	let html = toHtml(parse(note.text), note.mentionedRemoteUsers);
-	if (html == null) html = '';
+	if (html == null) html = '<p>.</p>';
 
 	return html;
 }