SWREI/switched
0
0
Fork 0
Code

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

Browse Source
This commit is contained in:
syuilo 2018-11-04 15:16:05 +09:00
parent 675e573a8c
commit 1edfce8f73
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
7 changed files with 134 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/client/app/admin/views/announcements.vue
View File

@ -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>

9
src/client/app/admin/views/cpu-memory.vue
View File

@ -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>

24
src/client/app/admin/views/dashboard.vue
View File

@ -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

9
src/client/app/admin/views/emoji.vue
View File

@ -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>

75
src/client/app/admin/views/index.vue
View File

@ -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>

9
src/client/app/admin/views/instance.vue
View File

@ -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>

9
src/client/app/admin/views/users.vue
View File

@ -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>