From 1edfce8f731bc913c6b810c6b9f2d9e3b79cef7b Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 4 Nov 2018 15:16:05 +0900 Subject: [PATCH] =?UTF-8?q?[Client]=20=E3=82=B9=E3=83=9E=E3=83=9B/?= =?UTF-8?q?=E3=82=BF=E3=83=96=E3=83=AC=E3=83=83=E3=83=88=E3=81=8B=E3=82=89?= =?UTF-8?q?=E3=81=A7=E3=82=82=E7=AE=A1=E7=90=86=E8=80=85=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=82=92=E4=BD=BF=E3=81=88=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/admin/views/announcements.vue | 9 ++- src/client/app/admin/views/cpu-memory.vue | 9 +++ src/client/app/admin/views/dashboard.vue | 24 ++++++- src/client/app/admin/views/emoji.vue | 9 ++- src/client/app/admin/views/index.vue | 75 ++++++++++++++++++-- src/client/app/admin/views/instance.vue | 9 ++- src/client/app/admin/views/users.vue | 9 ++- 7 files changed, 134 insertions(+), 10 deletions(-) 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>