From 8984e3131df7e7511b7977e3008ea307ee5944c7 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 28 Apr 2018 02:29:17 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=89=88?= =?UTF-8?q?=E3=81=AE=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2=E3=83=BC=E3=83=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit など --- .../views/components/reaction-picker.vue | 2 +- .../views/components/note-detail.sub.vue | 41 ++++++----- .../desktop/views/components/note-detail.vue | 50 +++++++------ .../desktop/views/components/notes.note.vue | 2 +- src/client/app/mobile/script.ts | 8 +- .../views/components/note-detail.sub.vue | 26 ++++--- .../mobile/views/components/note-detail.vue | 73 ++++++++++--------- .../app/mobile/views/components/note.sub.vue | 17 +++-- .../app/mobile/views/components/note.vue | 36 ++++----- .../app/mobile/views/components/notes.vue | 10 +-- .../mobile/views/components/notification.vue | 18 +++-- .../mobile/views/components/notifications.vue | 23 +++--- .../app/mobile/views/components/ui.header.vue | 2 +- .../app/mobile/views/components/ui.nav.vue | 49 +++++++++---- src/client/app/mobile/views/pages/note.vue | 43 +++++------ src/client/app/mobile/views/pages/user.vue | 7 +- .../app/mobile/views/pages/user/home.vue | 3 + 17 files changed, 227 insertions(+), 183 deletions(-) diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index ba87ae3497..e2c8a6ed3f 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -120,7 +120,7 @@ root(isDark) z-index 10000 width 100% height 100% - background rgba(0, 0, 0, 0.1) + background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) opacity 0 > .popover diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue index cbea77ae74..fb33421309 100644 --- a/src/client/app/desktop/views/components/note-detail.sub.vue +++ b/src/client/app/desktop/views/components/note-detail.sub.vue @@ -16,7 +16,9 @@ </div> </header> <div class="body"> - <mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/> + <div class="text"> + <mk-note-html v-if="note.text" :text="note.text" :i="os.i"/> + </div> <div class="media" v-if="note.mediaIds.length > 0"> <mk-media-list :media-list="note.media"/> </div> @@ -40,10 +42,10 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.sub +root(isDark) margin 0 padding 20px 32px - background #fdfdfd + background isDark ? #21242d : #fdfdfd &:after content "" @@ -87,7 +89,7 @@ export default Vue.extend({ display inline margin 0 padding 0 - color #777 + color isDark ? #fff : #777 font-size 1em font-weight 700 text-align left @@ -99,24 +101,29 @@ export default Vue.extend({ > .username text-align left margin 0 0 0 8px - color #ccc + color isDark ? #606984 : #ccc > .right float right > .time font-size 0.9em - color #c0c0c0 + color isDark ? #606984 : #c0c0c0 + + > .body + > .text + cursor default + display block + margin 0 + padding 0 + overflow-wrap break-word + font-size 1em + color isDark ? #959ba7 : #717171 + +.sub[data-darkmode] + root(true) + +.sub:not([data-darkmode]) + root(false) </style> - -<style lang="stylus" module> -.text - cursor default - display block - margin 0 - padding 0 - overflow-wrap break-word - font-size 1em - color #717171 -</style> diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue index f5153bad63..266644cf85 100644 --- a/src/client/app/desktop/views/components/note-detail.vue +++ b/src/client/app/desktop/views/components/note-detail.vue @@ -38,7 +38,9 @@ </router-link> </header> <div class="body"> - <mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/> + <div class="text"> + <mk-note-html v-if="p.text" :text="p.text" :i="os.i"/> + </div> <div class="media" v-if="p.media.length > 0"> <mk-media-list :media-list="p.media"/> </div> @@ -214,12 +216,12 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-note-detail +root(isDark) margin 0 padding 0 overflow hidden text-align left - background #fff + background isDark ? #282C37 : #fff border solid 1px rgba(0, 0, 0, 0.1) border-radius 8px @@ -232,10 +234,10 @@ export default Vue.extend({ text-align center color #999 cursor pointer - background #fafafa + background isDark ? #21242d : #fafafa outline none border none - border-bottom solid 1px #eef0f2 + border-bottom solid 1px isDark ? #1c2023 : #eef0f2 border-radius 6px 6px 0 0 &:hover @@ -249,11 +251,11 @@ export default Vue.extend({ > .context > * - border-bottom 1px solid #eef0f2 + border-bottom 1px solid isDark ? #1c2023 : #eef0f2 > .renote color #9dbb00 - background linear-gradient(to bottom, #edfde2 0%, #fff 100%) + background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) > p margin 0 @@ -281,7 +283,7 @@ export default Vue.extend({ padding-top 8px > .reply-to - border-bottom 1px solid #eef0f2 + border-bottom 1px solid isDark ? #1c2023 : #eef0f2 > article padding 28px 32px 18px 32px @@ -318,7 +320,7 @@ export default Vue.extend({ display inline-block margin 0 line-height 24px - color #777 + color isDark ? #fff : #627079 font-size 18px font-weight 700 text-align left @@ -331,7 +333,7 @@ export default Vue.extend({ display block text-align left margin 0 - color #ccc + color isDark ? #606984 : #ccc > .time position absolute @@ -343,6 +345,15 @@ export default Vue.extend({ > .body padding 8px 0 + > .text + cursor default + display block + margin 0 + padding 0 + overflow-wrap break-word + font-size 1.5em + color isDark ? #fff : #717171 + > .renote margin 8px 0 @@ -420,17 +431,12 @@ export default Vue.extend({ > .replies > * - border-top 1px solid #eef0f2 + border-top 1px solid isDark ? #1c2023 : #eef0f2 + +.mk-note-detail[data-darkmode] + root(true) + +.mk-note-detail:not([data-darkmode]) + root(false) </style> - -<style lang="stylus" module> -.text - cursor default - display block - margin 0 - padding 0 - overflow-wrap break-word - font-size 1.5em - color #717171 -</style> diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index 6d0e0c8f5c..9e7a7a6d29 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -434,7 +434,7 @@ root(isDark) margin 0 .5em 0 0 padding 1px 6px font-size 12px - color isDark ? #758188 :#aaa + color isDark ? #758188 : #aaa border solid 1px isDark ? #57616f : #ddd border-radius 3px diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 1de4891973..2e9805e0d0 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -55,15 +55,15 @@ init((launch) => { { path: '/signup', name: 'signup', component: MkSignup }, { path: '/i/settings', component: MkSettings }, { path: '/i/settings/profile', component: MkProfileSetting }, - { path: '/i/notifications', component: MkNotifications }, - { path: '/i/messaging', component: MkMessaging }, + { path: '/i/notifications', name: 'notifications', component: MkNotifications }, + { path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging/:user', component: MkMessagingRoom }, - { path: '/i/drive', component: MkDrive }, + { path: '/i/drive', name: 'drive', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/i/drive/file/:file', component: MkDrive }, { path: '/selectdrive', component: MkSelectDrive }, { path: '/search', component: MkSearch }, - { path: '/othello', component: MkOthello }, + { path: '/othello', name: 'othello', component: MkOthello }, { path: '/othello/:game', component: MkOthello }, { path: '/@:user', component: MkUser }, { path: '/@:user/followers', component: MkFollowers }, diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue index 06f442d308..683b5ffd1b 100644 --- a/src/client/app/mobile/views/components/note-detail.sub.vue +++ b/src/client/app/mobile/views/components/note-detail.sub.vue @@ -27,23 +27,22 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.root.sub +root(isDark) padding 8px font-size 0.9em - background #fdfdfd + background isDark ? #21242d : #fdfdfd @media (min-width 500px) padding 12px + @media (min-width 600px) + padding 24px 32px + &:after content "" display block clear both - &:hover - > .main > footer > button - color #888 - > .avatar-anchor display block float left @@ -71,7 +70,7 @@ export default Vue.extend({ margin 0 .5em 0 0 padding 0 overflow hidden - color #607073 + color isDark ? #fff : #607073 font-size 1em font-weight 700 text-align left @@ -84,11 +83,11 @@ export default Vue.extend({ > .username text-align left margin 0 .5em 0 0 - color #d1d8da + color isDark ? #606984 : #d1d8da > .time margin-left auto - color #b2b8bb + color isDark ? #606984 : #b2b8bb > .body @@ -97,7 +96,12 @@ export default Vue.extend({ margin 0 padding 0 font-size 1.1em - color #717171 + color isDark ? #959ba7 : #717171 + +.root.sub[data-darkmode] + root(true) + +.root.sub:not([data-darkmode]) + root(false) </style> - diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue index 62dd9184cd..5d593c02d3 100644 --- a/src/client/app/mobile/views/components/note-detail.vue +++ b/src/client/app/mobile/views/components/note-detail.vue @@ -34,7 +34,9 @@ </div> </header> <div class="body"> - <mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/> + <div class="text"> + <mk-note-html v-if="p.text" :text="p.text" :i="os.i"/> + </div> <div class="tags" v-if="p.tags && p.tags.length > 0"> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> </div> @@ -209,15 +211,18 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-note-detail +root(isDark) overflow hidden margin 0 auto padding 0 width 100% text-align left - background #fff + background isDark ? #282C37 : #fff border-radius 8px - box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) + box-shadow 0 0 2px rgba(#000, 0.1) + + @media (min-width 500px) + box-shadow 0 8px 32px rgba(#000, 0.1) > .fetching padding 64px 0 @@ -231,29 +236,26 @@ export default Vue.extend({ text-align center color #999 cursor pointer - background #fafafa + background isDark ? #21242d : #fafafa outline none border none - border-bottom solid 1px #eef0f2 + border-bottom solid 1px isDark ? #1c2023 : #eef0f2 border-radius 6px 6px 0 0 box-shadow none &:hover - background #f6f6f6 - - &:active - background #f0f0f0 + background isDark ? #16181d : #f6f6f6 &:disabled color #ccc > .context > * - border-bottom 1px solid #eef0f2 + border-bottom 1px solid isDark ? #1c2023 : #eef0f2 > .renote color #9dbb00 - background linear-gradient(to bottom, #edfde2 0%, #fff 100%) + background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) > p margin 0 @@ -281,7 +283,7 @@ export default Vue.extend({ padding-top 8px > .reply-to - border-bottom 1px solid #eef0f2 + border-bottom 1px solid isDark ? #1c2023 : #eef0f2 > article padding 14px 16px 9px 16px @@ -294,17 +296,13 @@ export default Vue.extend({ display block clear both - &:hover - > .main > footer > button - color #888 - > header display flex - line-height 1.1 + line-height 1.1em > .avatar-anchor display block - padding 0 .5em 0 0 + padding 0 12px 0 0 > .avatar display block @@ -323,7 +321,7 @@ export default Vue.extend({ > .name display inline-block margin .4em 0 - color #777 + color isDark ? #fff : #627079 font-size 16px font-weight bold text-align left @@ -336,11 +334,22 @@ export default Vue.extend({ display block text-align left margin 0 - color #ccc + color isDark ? #606984 : #ccc > .body padding 8px 0 + > .text + display block + margin 0 + padding 0 + overflow-wrap break-word + font-size 16px + color isDark ? #fff : #717171 + + @media (min-width 500px) + font-size 24px + > .renote margin 8px 0 @@ -427,20 +436,12 @@ export default Vue.extend({ > .replies > * - border-top 1px solid #eef0f2 - -</style> - -<style lang="stylus" module> -.text - display block - margin 0 - padding 0 - overflow-wrap break-word - font-size 16px - color #717171 - - @media (min-width 500px) - font-size 24px + border-top 1px solid isDark ? #1c2023 : #eef0f2 + +.mk-note-detail[data-darkmode] + root(true) + +.mk-note-detail:not([data-darkmode]) + root(false) </style> diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue index 759de4746b..38659143ac 100644 --- a/src/client/app/mobile/views/components/note.sub.vue +++ b/src/client/app/mobile/views/components/note.sub.vue @@ -27,7 +27,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.sub +root(isDark) font-size 0.9em padding 16px @@ -76,7 +76,7 @@ export default Vue.extend({ margin 0 0.5em 0 0 padding 0 overflow hidden - color #607073 + color isDark ? #fff : #607073 font-size 1em font-weight 700 text-align left @@ -89,11 +89,11 @@ export default Vue.extend({ > .username text-align left margin 0 - color #d1d8da + color isDark ? #606984 : #d1d8da > .created-at margin-left auto - color #b2b8bb + color isDark ? #606984 : #b2b8bb > .body max-height 128px @@ -104,11 +104,16 @@ export default Vue.extend({ margin 0 padding 0 font-size 1.1em - color #717171 + color isDark ? #959ba7 : #717171 pre max-height 120px font-size 80% -</style> +.sub[data-darkmode] + root(true) +.sub:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index 5772fb2b7e..e7a43f7985 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -261,7 +261,7 @@ root(isDark) padding 8px 16px line-height 28px color #9dbb00 - background linear-gradient(to bottom, #edfde2 0%, #fff 100%) + background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) @media (min-width 500px) padding 16px @@ -325,9 +325,9 @@ root(isDark) display block float left margin 0 10px 8px 0 - position -webkit-sticky - position sticky - top 62px + //position -webkit-sticky + //position sticky + //top 62px @media (min-width 500px) margin-right 16px @@ -365,7 +365,7 @@ root(isDark) margin 0 0.5em 0 0 padding 0 overflow hidden - color #627079 + color isDark ? #fff : #627079 font-size 1em font-weight bold text-decoration none @@ -378,15 +378,15 @@ root(isDark) margin 0 0.5em 0 0 padding 1px 6px font-size 12px - color #aaa - border solid 1px #ddd + color isDark ? #758188 : #aaa + border solid 1px isDark ? #57616f : #ddd border-radius 3px > .username margin 0 0.5em 0 0 overflow hidden text-overflow ellipsis - color #ccc + color isDark ? #606984 : #ccc > .info margin-left auto @@ -394,10 +394,10 @@ root(isDark) > .mobile margin-right 6px - color #c0c0c0 + color isDark ? #606984 : #c0c0c0 > .created-at - color #c0c0c0 + color isDark ? #606984 : #c0c0c0 > .body @@ -434,7 +434,7 @@ root(isDark) padding 0 overflow-wrap break-word font-size 1.1em - color #717171 + color isDark ? #fff : #717171 >>> .title display block @@ -442,7 +442,7 @@ root(isDark) padding 4px font-size 90% text-align center - background #eef1f3 + background isDark ? #2f3944 : #eef1f3 border-radius 4px >>> .code @@ -451,12 +451,12 @@ root(isDark) >>> .quote margin 8px padding 6px 12px - color #aaa - border-left solid 3px #eee + color isDark ? #6f808e : #aaa + border-left solid 3px isDark ? #637182 : #eee > .reply margin-right 8px - color #717171 + color isDark ? #99abbf : #717171 > .rp margin-left 4px @@ -528,7 +528,7 @@ root(isDark) > .mk-note-preview padding 16px - border dashed 1px #c0dac6 + border dashed 1px isDark ? #4e945e : #c0dac6 border-radius 8px > .app @@ -543,14 +543,14 @@ root(isDark) border none box-shadow none font-size 1em - color #ddd + color isDark ? #606984 : #ddd cursor pointer &:not(:last-child) margin-right 28px &:hover - color #666 + color isDark ? #9198af : #666 > .count display inline diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue index ecd9c8cf2b..58069b06ee 100644 --- a/src/client/app/mobile/views/components/notes.vue +++ b/src/client/app/mobile/views/components/notes.vue @@ -202,10 +202,10 @@ export default Vue.extend({ root(isDark) background isDark ? #282C37 : #fff border-radius 8px - box-shadow 0 0 2px rgba(0, 0, 0, 0.1) + box-shadow 0 0 2px rgba(#000, 0.1) @media (min-width 500px) - box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) + box-shadow 0 8px 32px rgba(#000, 0.1) .transition .mk-notes-enter @@ -222,9 +222,9 @@ root(isDark) line-height 32px text-align center font-size 0.9em - color #aaa - background #fdfdfd - border-bottom solid 1px #eaeaea + color isDark ? #666b79 : #aaa + background isDark ? #242731 : #fdfdfd + border-bottom solid 1px isDark ? #1c2023 : #eaeaea span margin 0 16px diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue index 793f34fe85..a4e6b027ed 100644 --- a/src/client/app/mobile/views/components/notification.vue +++ b/src/client/app/mobile/views/components/notification.vue @@ -91,8 +91,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.mk-notification - +root(isDark) > .notification padding 16px font-size 12px @@ -105,7 +104,7 @@ export default Vue.extend({ font-size 16px @media (min-width 600px) - padding 32px + padding 24px 32px &:after content "" @@ -143,14 +142,14 @@ export default Vue.extend({ > .mk-time margin-left auto - color rgba(0, 0, 0, 0.3) + color isDark ? #606984 : #c0c0c0 font-size 0.9em > .note-preview - color rgba(0, 0, 0, 0.7) + color isDark ? #fff : #717171 > .note-ref - color rgba(0, 0, 0, 0.7) + color isDark ? #fff : #717171 [data-fa] font-size 1em @@ -167,5 +166,10 @@ export default Vue.extend({ > div > header i color #53c7ce -</style> +.mk-notification[data-darkmode] + root(true) +.mk-notification:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue index 7a878740cc..a0d8938646 100644 --- a/src/client/app/mobile/views/components/notifications.vue +++ b/src/client/app/mobile/views/components/notifications.vue @@ -103,9 +103,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.mk-notifications +root(isDark) margin 0 auto - background #fff + background isDark ? #282C37 :#fff border-radius 8px box-shadow 0 0 2px rgba(0, 0, 0, 0.1) @@ -123,11 +123,8 @@ export default Vue.extend({ > .notifications - > .mk-notification - border-bottom solid 1px rgba(0, 0, 0, 0.05) - - &:last-child - border-bottom none + > .mk-notification:not(:last-child) + border-bottom solid 1px isDark ? #1c2023 : #eaeaea > .date display block @@ -135,9 +132,9 @@ export default Vue.extend({ line-height 32px text-align center font-size 0.8em - color #aaa - background #fdfdfd - border-bottom solid 1px rgba(0, 0, 0, 0.05) + color isDark ? #666b79 : #aaa + background isDark ? #242731 : #fdfdfd + border-bottom solid 1px isDark ? #1c2023 : #eaeaea span margin 0 16px @@ -170,4 +167,10 @@ export default Vue.extend({ > [data-fa] margin-right 4px +.mk-notifications[data-darkmode] + root(true) + +.mk-notifications:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue index 89edcf5a9e..1e6c7b0856 100644 --- a/src/client/app/mobile/views/components/ui.header.vue +++ b/src/client/app/mobile/views/components/ui.header.vue @@ -150,7 +150,7 @@ root(isDark) top 0 z-index 1024 width 100% - //box-shadow 0 1px 0 rgba(#000, 0.075) + box-shadow 0 1px 0 rgba(#000, 0.075) &, * user-select none diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 68cdacb3b5..2ea4364fb1 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -15,19 +15,20 @@ </router-link> <div class="links"> <ul> - <li><router-link to="/">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li> - <li><router-link to="/i/notifications">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li> - <li><router-link to="/i/messaging">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li> - <li><router-link to="/othello">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li> + <li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li> + <li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li> + <li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li> + <li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li> </ul> <ul> - <li><router-link to="/i/drive">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li> + <li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li> </ul> <ul> <li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li> </ul> <ul> <li><router-link to="/i/settings">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li> + <li @click="dark"><p><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template><span>ダークモード</span></p></li> </ul> </div> <a :href="aboutUrl"><p class="about">%i18n:@about%</p></a> @@ -113,6 +114,9 @@ export default Vue.extend({ }, onOthelloNoInvites() { this.hasGameInvitations = false; + }, + dark() { + (this as any)._updateDarkmode_(!(this as any)._darkmode_); } } }); @@ -121,7 +125,9 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.nav +root(isDark) + $color = isDark ? #c9d2e0 : #777 + .backdrop position fixed top 0 @@ -129,7 +135,7 @@ export default Vue.extend({ z-index 1025 width 100% height 100% - background rgba(0, 0, 0, 0.2) + background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2) .body position fixed @@ -140,8 +146,7 @@ export default Vue.extend({ height 100% overflow auto -webkit-overflow-scrolling touch - color #777 - background #fff + background isDark ? #16191f : #fff .me display block @@ -162,7 +167,7 @@ export default Vue.extend({ left 80px padding 0 width calc(100% - 112px) - color #777 + color $color line-height 96px overflow hidden text-overflow ellipsis @@ -182,14 +187,22 @@ export default Vue.extend({ font-size 1em line-height 1em - a + a, p display block + margin 0 padding 0 20px line-height 3rem line-height calc(1rem + 30px) - color #777 + color $color text-decoration none + &[data-active] + color $theme-color-foreground + background $theme-color + + > [data-fa]:last-child + color $theme-color-foreground + > [data-fa]:first-child margin-right 0.5em @@ -205,18 +218,16 @@ export default Vue.extend({ padding 0 20px font-size 1.2em line-height calc(1rem + 30px) - color #ccc + color $color .about margin 0 padding 1em 0 text-align center font-size 0.8em + color $color opacity 0.5 - a - color #777 - .nav-enter-active, .nav-leave-active { opacity: 1; @@ -239,4 +250,10 @@ export default Vue.extend({ opacity: 0; } +.nav[data-darkmode] + root(true) + +.nav:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue index 7bcc5e71f5..aff0d5aa52 100644 --- a/src/client/app/mobile/views/pages/note.vue +++ b/src/client/app/mobile/views/pages/note.vue @@ -2,11 +2,13 @@ <mk-ui> <span slot="header">%fa:R sticky-note%%i18n:@title%</span> <main v-if="!fetching"> - <a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a> <div> <mk-note-detail :note="note"/> </div> - <a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:@prev%</a> + <footer> + <a v-if="note.prev" :href="note.prev">%fa:angle-left% %i18n:@prev%</a> + <a v-if="note.next" :href="note.next">%i18n:@next% %fa:angle-right%</a> + </footer> </main> </mk-ui> </template> @@ -52,33 +54,24 @@ export default Vue.extend({ <style lang="stylus" scoped> main text-align center + padding 8px + + @media (min-width 500px) + padding 16px + + @media (min-width 600px) + padding 32px > div - margin 8px auto + margin 0 auto padding 0 - max-width 500px - width calc(100% - 16px) + max-width 600px - @media (min-width 500px) - margin 16px auto - width calc(100% - 32px) + > footer + margin-top 16px - > a - display inline-block - - &:first-child - margin-top 8px - - @media (min-width 500px) - margin-top 16px - - &:last-child - margin-bottom 8px - - @media (min-width 500px) - margin-bottom 16px - - > [data-fa] - margin-right 4px + > a + display inline-block + margin 0 16px </style> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index abd4b5bd85..d2688a0f3d 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -135,7 +135,7 @@ root(isDark) > .banner padding-bottom 33.3% - background-color isDark ? #0e0e0e : #cacaca + background-color isDark ? #5f7273 : #cacaca background-size cover background-position center @@ -162,6 +162,7 @@ root(isDark) left -2px bottom -2px width 100% + background isDark ? #191b22 : #ececed border 3px solid isDark ? #191b22 : #ececed border-radius 6px @@ -195,8 +196,8 @@ root(isDark) margin-left 8px padding 2px 4px font-size 12px - color #657786 - background #f8f8f8 + color isDark ? #657786 : #fff + background isDark ? #f8f8f8 : #a7bec7 border-radius 4px > .description diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue index f4191edbbf..d9bb8041e4 100644 --- a/src/client/app/mobile/views/pages/user/home.vue +++ b/src/client/app/mobile/views/pages/user/home.vue @@ -61,6 +61,9 @@ export default Vue.extend({ > .mk-note-detail margin 0 0 8px 0 + @media (min-width 500px) + margin 0 0 16px 0 + > section background #eee border-radius 8px