[Client] スマホ/タブレットからでも管理者ページを使えるように

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">
@@ -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,5 +1,5 @@
 <template>
-<div>
+<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
 	<ui-card>
 		<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
 		<section class="fit-top">
@@ -110,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">
+<div class="mk-admin" :class="{ isMobile }">
-	<nav>
+	<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>