diff --git a/src/client/app/admin/views/announcements.vue b/src/client/app/admin/views/announcements.vue index 8822b5c336..4eea9dd948 100644 --- a/src/client/app/admin/views/announcements.vue +++ b/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> diff --git a/src/client/app/admin/views/cpu-memory.vue b/src/client/app/admin/views/cpu-memory.vue index f76f3de305..eb0fc0b426 100644 --- a/src/client/app/admin/views/cpu-memory.vue +++ b/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> diff --git a/src/client/app/admin/views/dashboard.vue b/src/client/app/admin/views/dashboard.vue index 4b271b398c..93804004af 100644 --- a/src/client/app/admin/views/dashboard.vue +++ b/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 diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue index ae955e06a1..18a41451ce 100644 --- a/src/client/app/admin/views/emoji.vue +++ b/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> diff --git a/src/client/app/admin/views/index.vue b/src/client/app/admin/views/index.vue index dd6f7898e9..56b825e6fa 100644 --- a/src/client/app/admin/views/index.vue +++ b/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> diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue index 542a0d54ad..a6e89f8ab2 100644 --- a/src/client/app/admin/views/instance.vue +++ b/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> diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue index 3c59943688..7b2091f19f 100644 --- a/src/client/app/admin/views/users.vue +++ b/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>