mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-24 11:38:28 +09:00
Code

モバイル版のダークモード

Browse Source 
など
This commit is contained in:
syuilo 2018-04-28 02:29:17 +09:00
parent 93fa28991e
commit 8984e3131d
17 changed files with 227 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/common/views/components/reaction-picker.vue
View File

@ -120,7 +120,7 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.1) background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
opacity 0 opacity 0
> .popover > .popover

29
src/client/app/desktop/views/components/note-detail.sub.vue
View File

@ -16,7 +16,9 @@
</div> </div>
</header> </header>
<div class="body"> <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"> <div class="media" v-if="note.mediaIds.length > 0">
<mk-media-list :media-list="note.media"/> <mk-media-list :media-list="note.media"/>
</div> </div>
@ -40,10 +42,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.sub root(isDark)
margin 0 margin 0
padding 20px 32px padding 20px 32px
background #fdfdfd background isDark ? #21242d : #fdfdfd
&:after &:after
content "" content ""
@ -87,7 +89,7 @@ export default Vue.extend({
display inline display inline
margin 0 margin 0
padding 0 padding 0
color #777 color isDark ? #fff : #777
font-size 1em font-size 1em
font-weight 700 font-weight 700
text-align left text-align left
@ -99,24 +101,29 @@ export default Vue.extend({
> .username > .username
text-align left text-align left
margin 0 0 0 8px margin 0 0 0 8px
color #ccc color isDark ? #606984 : #ccc
> .right > .right
float right float right
> .time > .time
font-size 0.9em font-size 0.9em
color #c0c0c0 color isDark ? #606984 : #c0c0c0
</style> > .body
> .text
<style lang="stylus" module>
.text
cursor default cursor default
display block display block
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
font-size 1em font-size 1em
color #717171 color isDark ? #959ba7 : #717171
.sub[data-darkmode]
root(true)
.sub:not([data-darkmode])
root(false)
</style> </style>

50
src/client/app/desktop/views/components/note-detail.vue
View File

@ -38,7 +38,9 @@
</router-link> </router-link>
</header> </header>
<div class="body"> <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"> <div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media"/> <mk-media-list :media-list="p.media"/>
</div> </div>
@ -214,12 +216,12 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-note-detail root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow hidden overflow hidden
text-align left text-align left
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.1) border solid 1px rgba(0, 0, 0, 0.1)
border-radius 8px border-radius 8px
@ -232,10 +234,10 @@ export default Vue.extend({
text-align center text-align center
color #999 color #999
cursor pointer cursor pointer
background #fafafa background isDark ? #21242d : #fafafa
outline none outline none
border none border none
border-bottom solid 1px #eef0f2 border-bottom solid 1px isDark ? #1c2023 : #eef0f2
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
&:hover &:hover
@ -249,11 +251,11 @@ export default Vue.extend({
> .context > .context
> * > *
border-bottom 1px solid #eef0f2 border-bottom 1px solid isDark ? #1c2023 : #eef0f2
> .renote > .renote
color #9dbb00 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 > p
margin 0 margin 0
@ -281,7 +283,7 @@ export default Vue.extend({
padding-top 8px padding-top 8px
> .reply-to > .reply-to
border-bottom 1px solid #eef0f2 border-bottom 1px solid isDark ? #1c2023 : #eef0f2
> article > article
padding 28px 32px 18px 32px padding 28px 32px 18px 32px
@ -318,7 +320,7 @@ export default Vue.extend({
display inline-block display inline-block
margin 0 margin 0
line-height 24px line-height 24px
color #777 color isDark ? #fff : #627079
font-size 18px font-size 18px
font-weight 700 font-weight 700
text-align left text-align left
@ -331,7 +333,7 @@ export default Vue.extend({
display block display block
text-align left text-align left
margin 0 margin 0
color #ccc color isDark ? #606984 : #ccc
> .time > .time
position absolute position absolute
@ -343,6 +345,15 @@ export default Vue.extend({
> .body > .body
padding 8px 0 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 > .renote
margin 8px 0 margin 8px 0
@ -420,17 +431,12 @@ export default Vue.extend({
> .replies > .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>
<style lang="stylus" module>
.text
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1.5em
color #717171
</style>

8
src/client/app/mobile/script.ts
View File

@ -55,15 +55,15 @@ init((launch) => {
{ path: '/signup', name: 'signup', component: MkSignup }, { path: '/signup', name: 'signup', component: MkSignup },
{ path: '/i/settings', component: MkSettings }, { path: '/i/settings', component: MkSettings },
{ path: '/i/settings/profile', component: MkProfileSetting }, { path: '/i/settings/profile', component: MkProfileSetting },
{ path: '/i/notifications', component: MkNotifications }, { path: '/i/notifications', name: 'notifications', component: MkNotifications },
{ path: '/i/messaging', component: MkMessaging }, { path: '/i/messaging', name: 'messaging', component: MkMessaging },
{ path: '/i/messaging/:user', component: MkMessagingRoom }, { 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/folder/:folder', component: MkDrive },
{ path: '/i/drive/file/:file', component: MkDrive }, { path: '/i/drive/file/:file', component: MkDrive },
{ path: '/selectdrive', component: MkSelectDrive }, { path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch }, { path: '/search', component: MkSearch },
{ path: '/othello', component: MkOthello }, { path: '/othello', name: 'othello', component: MkOthello },
{ path: '/othello/:game', component: MkOthello }, { path: '/othello/:game', component: MkOthello },
{ path: '/@:user', component: MkUser }, { path: '/@:user', component: MkUser },
{ path: '/@:user/followers', component: MkFollowers }, { path: '/@:user/followers', component: MkFollowers },

26
src/client/app/mobile/views/components/note-detail.sub.vue
View File

@ -27,23 +27,22 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.root.sub root(isDark)
padding 8px padding 8px
font-size 0.9em font-size 0.9em
background #fdfdfd background isDark ? #21242d : #fdfdfd
@media (min-width 500px) @media (min-width 500px)
padding 12px padding 12px
@media (min-width 600px)
padding 24px 32px
&:after &:after
content "" content ""
display block display block
clear both clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor > .avatar-anchor
display block display block
float left float left
@ -71,7 +70,7 @@ export default Vue.extend({
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color #607073 color isDark ? #fff : #607073
font-size 1em font-size 1em
font-weight 700 font-weight 700
text-align left text-align left
@ -84,11 +83,11 @@ export default Vue.extend({
> .username > .username
text-align left text-align left
margin 0 .5em 0 0 margin 0 .5em 0 0
color #d1d8da color isDark ? #606984 : #d1d8da
> .time > .time
margin-left auto margin-left auto
color #b2b8bb color isDark ? #606984 : #b2b8bb
> .body > .body
@ -97,7 +96,12 @@ export default Vue.extend({
margin 0 margin 0
padding 0 padding 0
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #959ba7 : #717171
.root.sub[data-darkmode]
root(true)
.root.sub:not([data-darkmode])
root(false)
</style> </style>

73
src/client/app/mobile/views/components/note-detail.vue
View File

@ -34,7 +34,9 @@
</div> </div>
</header> </header>
<div class="body"> <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"> <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> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div> </div>
@ -209,15 +211,18 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-note-detail root(isDark)
overflow hidden overflow hidden
margin 0 auto margin 0 auto
padding 0 padding 0
width 100% width 100%
text-align left text-align left
background #fff background isDark ? #282C37 : #fff
border-radius 8px 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 > .fetching
padding 64px 0 padding 64px 0
@ -231,29 +236,26 @@ export default Vue.extend({
text-align center text-align center
color #999 color #999
cursor pointer cursor pointer
background #fafafa background isDark ? #21242d : #fafafa
outline none outline none
border none border none
border-bottom solid 1px #eef0f2 border-bottom solid 1px isDark ? #1c2023 : #eef0f2
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
box-shadow none box-shadow none
&:hover &:hover
background #f6f6f6 background isDark ? #16181d : #f6f6f6
&:active
background #f0f0f0
&:disabled &:disabled
color #ccc color #ccc
> .context > .context
> * > *
border-bottom 1px solid #eef0f2 border-bottom 1px solid isDark ? #1c2023 : #eef0f2
> .renote > .renote
color #9dbb00 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 > p
margin 0 margin 0
@ -281,7 +283,7 @@ export default Vue.extend({
padding-top 8px padding-top 8px
> .reply-to > .reply-to
border-bottom 1px solid #eef0f2 border-bottom 1px solid isDark ? #1c2023 : #eef0f2
> article > article
padding 14px 16px 9px 16px padding 14px 16px 9px 16px
@ -294,17 +296,13 @@ export default Vue.extend({
display block display block
clear both clear both
&:hover
> .main > footer > button
color #888
> header > header
display flex display flex
line-height 1.1 line-height 1.1em
> .avatar-anchor > .avatar-anchor
display block display block
padding 0 .5em 0 0 padding 0 12px 0 0
> .avatar > .avatar
display block display block
@ -323,7 +321,7 @@ export default Vue.extend({
> .name > .name
display inline-block display inline-block
margin .4em 0 margin .4em 0
color #777 color isDark ? #fff : #627079
font-size 16px font-size 16px
font-weight bold font-weight bold
text-align left text-align left
@ -336,11 +334,22 @@ export default Vue.extend({
display block display block
text-align left text-align left
margin 0 margin 0
color #ccc color isDark ? #606984 : #ccc
> .body > .body
padding 8px 0 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 > .renote
margin 8px 0 margin 8px 0
@ -427,20 +436,12 @@ export default Vue.extend({
> .replies > .replies
> * > *
border-top 1px solid #eef0f2 border-top 1px solid isDark ? #1c2023 : #eef0f2
</style> .mk-note-detail[data-darkmode]
root(true)
<style lang="stylus" module>
.text .mk-note-detail:not([data-darkmode])
display block root(false)
margin 0
padding 0
overflow-wrap break-word
font-size 16px
color #717171
@media (min-width 500px)
font-size 24px
</style> </style>

17
src/client/app/mobile/views/components/note.sub.vue
View File

@ -27,7 +27,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.sub root(isDark)
font-size 0.9em font-size 0.9em
padding 16px padding 16px
@ -76,7 +76,7 @@ export default Vue.extend({
margin 0 0.5em 0 0 margin 0 0.5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color #607073 color isDark ? #fff : #607073
font-size 1em font-size 1em
font-weight 700 font-weight 700
text-align left text-align left
@ -89,11 +89,11 @@ export default Vue.extend({
> .username > .username
text-align left text-align left
margin 0 margin 0
color #d1d8da color isDark ? #606984 : #d1d8da
> .created-at > .created-at
margin-left auto margin-left auto
color #b2b8bb color isDark ? #606984 : #b2b8bb
> .body > .body
max-height 128px max-height 128px
@ -104,11 +104,16 @@ export default Vue.extend({
margin 0 margin 0
padding 0 padding 0
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #959ba7 : #717171
pre pre
max-height 120px max-height 120px
font-size 80% font-size 80%
</style> .sub[data-darkmode]
root(true)
.sub:not([data-darkmode])
root(false)
</style>

36
src/client/app/mobile/views/components/note.vue
View File

@ -261,7 +261,7 @@ root(isDark)
padding 8px 16px padding 8px 16px
line-height 28px line-height 28px
color #9dbb00 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) @media (min-width 500px)
padding 16px padding 16px
@ -325,9 +325,9 @@ root(isDark)
display block display block
float left float left
margin 0 10px 8px 0 margin 0 10px 8px 0
position -webkit-sticky //position -webkit-sticky
position sticky //position sticky
top 62px //top 62px
@media (min-width 500px) @media (min-width 500px)
margin-right 16px margin-right 16px
@ -365,7 +365,7 @@ root(isDark)
margin 0 0.5em 0 0 margin 0 0.5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color #627079 color isDark ? #fff : #627079
font-size 1em font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
@ -378,15 +378,15 @@ root(isDark)
margin 0 0.5em 0 0 margin 0 0.5em 0 0
padding 1px 6px padding 1px 6px
font-size 12px font-size 12px
color #aaa color isDark ? #758188 : #aaa
border solid 1px #ddd border solid 1px isDark ? #57616f : #ddd
border-radius 3px border-radius 3px
> .username > .username
margin 0 0.5em 0 0 margin 0 0.5em 0 0
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
color #ccc color isDark ? #606984 : #ccc
> .info > .info
margin-left auto margin-left auto
@ -394,10 +394,10 @@ root(isDark)
> .mobile > .mobile
margin-right 6px margin-right 6px
color #c0c0c0 color isDark ? #606984 : #c0c0c0
> .created-at > .created-at
color #c0c0c0 color isDark ? #606984 : #c0c0c0
> .body > .body
@ -434,7 +434,7 @@ root(isDark)
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #fff : #717171
>>> .title >>> .title
display block display block
@ -442,7 +442,7 @@ root(isDark)
padding 4px padding 4px
font-size 90% font-size 90%
text-align center text-align center
background #eef1f3 background isDark ? #2f3944 : #eef1f3
border-radius 4px border-radius 4px
>>> .code >>> .code
@ -451,12 +451,12 @@ root(isDark)
>>> .quote >>> .quote
margin 8px margin 8px
padding 6px 12px padding 6px 12px
color #aaa color isDark ? #6f808e : #aaa
border-left solid 3px #eee border-left solid 3px isDark ? #637182 : #eee
> .reply > .reply
margin-right 8px margin-right 8px
color #717171 color isDark ? #99abbf : #717171
> .rp > .rp
margin-left 4px margin-left 4px
@ -528,7 +528,7 @@ root(isDark)
> .mk-note-preview > .mk-note-preview
padding 16px padding 16px
border dashed 1px #c0dac6 border dashed 1px isDark ? #4e945e : #c0dac6
border-radius 8px border-radius 8px
> .app > .app
@ -543,14 +543,14 @@ root(isDark)
border none border none
box-shadow none box-shadow none
font-size 1em font-size 1em
color #ddd color isDark ? #606984 : #ddd
cursor pointer cursor pointer
&:not(:last-child) &:not(:last-child)
margin-right 28px margin-right 28px
&:hover &:hover
color #666 color isDark ? #9198af : #666
> .count > .count
display inline display inline

10
src/client/app/mobile/views/components/notes.vue
View File

@ -202,10 +202,10 @@ export default Vue.extend({
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border-radius 8px 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) @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 .transition
.mk-notes-enter .mk-notes-enter
@ -222,9 +222,9 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.9em font-size 0.9em
color #aaa color isDark ? #666b79 : #aaa
background #fdfdfd background isDark ? #242731 : #fdfdfd
border-bottom solid 1px #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span span
margin 0 16px margin 0 16px

18
src/client/app/mobile/views/components/notification.vue
View File

@ -91,8 +91,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notification root(isDark)
> .notification > .notification
padding 16px padding 16px
font-size 12px font-size 12px
@ -105,7 +104,7 @@ export default Vue.extend({
font-size 16px font-size 16px
@media (min-width 600px) @media (min-width 600px)
padding 32px padding 24px 32px
&:after &:after
content "" content ""
@ -143,14 +142,14 @@ export default Vue.extend({
> .mk-time > .mk-time
margin-left auto margin-left auto
color rgba(0, 0, 0, 0.3) color isDark ? #606984 : #c0c0c0
font-size 0.9em font-size 0.9em
> .note-preview > .note-preview
color rgba(0, 0, 0, 0.7) color isDark ? #fff : #717171
> .note-ref > .note-ref
color rgba(0, 0, 0, 0.7) color isDark ? #fff : #717171
[data-fa] [data-fa]
font-size 1em font-size 1em
@ -167,5 +166,10 @@ export default Vue.extend({
> div > header i > div > header i
color #53c7ce color #53c7ce
</style> .mk-notification[data-darkmode]
root(true)
.mk-notification:not([data-darkmode])
root(false)
</style>

23
src/client/app/mobile/views/components/notifications.vue
View File

@ -103,9 +103,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notifications root(isDark)
margin 0 auto margin 0 auto
background #fff background isDark ? #282C37 :#fff
border-radius 8px border-radius 8px
box-shadow 0 0 2px rgba(0, 0, 0, 0.1) box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@ -123,11 +123,8 @@ export default Vue.extend({
> .notifications > .notifications
> .mk-notification > .mk-notification:not(:last-child)
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:last-child
border-bottom none
> .date > .date
display block display block
@ -135,9 +132,9 @@ export default Vue.extend({
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color #aaa color isDark ? #666b79 : #aaa
background #fdfdfd background isDark ? #242731 : #fdfdfd
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span span
margin 0 16px margin 0 16px
@ -170,4 +167,10 @@ export default Vue.extend({
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/mobile/views/components/ui.header.vue
View File

@ -150,7 +150,7 @@ root(isDark)
top 0 top 0
z-index 1024 z-index 1024
width 100% width 100%
//box-shadow 0 1px 0 rgba(#000, 0.075) box-shadow 0 1px 0 rgba(#000, 0.075)
&, * &, *
user-select none user-select none

49
src/client/app/mobile/views/components/ui.nav.vue
View File

@ -15,19 +15,20 @@
</router-link> </router-link>
<div class="links"> <div class="links">
<ul> <ul>
<li><router-link to="/">%fa:home%%i18n:@home%%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">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%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">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%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">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%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>
<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>
<ul> <ul>
<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li> <li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
</ul> </ul>
<ul> <ul>
<li><router-link to="/i/settings">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li> <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> </ul>
</div> </div>
<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a> <a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
@ -113,6 +114,9 @@ export default Vue.extend({
}, },
onOthelloNoInvites() { onOthelloNoInvites() {
this.hasGameInvitations = false; this.hasGameInvitations = false;
},
dark() {
(this as any)._updateDarkmode_(!(this as any)._darkmode_);
} }
} }
}); });
@ -121,7 +125,9 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.nav root(isDark)
$color = isDark ? #c9d2e0 : #777
.backdrop .backdrop
position fixed position fixed
top 0 top 0
@ -129,7 +135,7 @@ export default Vue.extend({
z-index 1025 z-index 1025
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.2) background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
.body .body
position fixed position fixed
@ -140,8 +146,7 @@ export default Vue.extend({
height 100% height 100%
overflow auto overflow auto
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
color #777 background isDark ? #16191f : #fff
background #fff
.me .me
display block display block
@ -162,7 +167,7 @@ export default Vue.extend({
left 80px left 80px
padding 0 padding 0
width calc(100% - 112px) width calc(100% - 112px)
color #777 color $color
line-height 96px line-height 96px
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
@ -182,14 +187,22 @@ export default Vue.extend({
font-size 1em font-size 1em
line-height 1em line-height 1em
a a, p
display block display block
margin 0
padding 0 20px padding 0 20px
line-height 3rem line-height 3rem
line-height calc(1rem + 30px) line-height calc(1rem + 30px)
color #777 color $color
text-decoration none text-decoration none
&[data-active]
color $theme-color-foreground
background $theme-color
> [data-fa]:last-child
color $theme-color-foreground
> [data-fa]:first-child > [data-fa]:first-child
margin-right 0.5em margin-right 0.5em
@ -205,18 +218,16 @@ export default Vue.extend({
padding 0 20px padding 0 20px
font-size 1.2em font-size 1.2em
line-height calc(1rem + 30px) line-height calc(1rem + 30px)
color #ccc color $color
.about .about
margin 0 margin 0
padding 1em 0 padding 1em 0
text-align center text-align center
font-size 0.8em font-size 0.8em
color $color
opacity 0.5 opacity 0.5
a
color #777
.nav-enter-active, .nav-enter-active,
.nav-leave-active { .nav-leave-active {
opacity: 1; opacity: 1;
@ -239,4 +250,10 @@ export default Vue.extend({
opacity: 0; opacity: 0;
} }
.nav[data-darkmode]
root(true)
.nav:not([data-darkmode])
root(false)
</style> </style>

43
src/client/app/mobile/views/pages/note.vue
View File

@ -2,11 +2,13 @@
<mk-ui> <mk-ui>
<span slot="header">%fa:R sticky-note%%i18n:@title%</span> <span slot="header">%fa:R sticky-note%%i18n:@title%</span>
<main v-if="!fetching"> <main v-if="!fetching">
<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a>
<div> <div>
<mk-note-detail :note="note"/> <mk-note-detail :note="note"/>
</div> </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> </main>
</mk-ui> </mk-ui>
</template> </template>
@ -52,33 +54,24 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
main main
text-align center text-align center
padding 8px
> div
margin 8px auto
padding 0
max-width 500px
width calc(100% - 16px)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto padding 16px
width calc(100% - 32px)
@media (min-width 600px)
padding 32px
> div
margin 0 auto
padding 0
max-width 600px
> footer
margin-top 16px
> a > a
display inline-block display inline-block
margin 0 16px
&: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
</style> </style>

7
src/client/app/mobile/views/pages/user.vue
View File

@ -135,7 +135,7 @@ root(isDark)
> .banner > .banner
padding-bottom 33.3% padding-bottom 33.3%
background-color isDark ? #0e0e0e : #cacaca background-color isDark ? #5f7273 : #cacaca
background-size cover background-size cover
background-position center background-position center
@ -162,6 +162,7 @@ root(isDark)
left -2px left -2px
bottom -2px bottom -2px
width 100% width 100%
background isDark ? #191b22 : #ececed
border 3px solid isDark ? #191b22 : #ececed border 3px solid isDark ? #191b22 : #ececed
border-radius 6px border-radius 6px
@ -195,8 +196,8 @@ root(isDark)
margin-left 8px margin-left 8px
padding 2px 4px padding 2px 4px
font-size 12px font-size 12px
color #657786 color isDark ? #657786 : #fff
background #f8f8f8 background isDark ? #f8f8f8 : #a7bec7
border-radius 4px border-radius 4px
> .description > .description

3
src/client/app/mobile/views/pages/user/home.vue
View File

@ -61,6 +61,9 @@ export default Vue.extend({
> .mk-note-detail > .mk-note-detail
margin 0 0 8px 0 margin 0 0 8px 0
@media (min-width 500px)
margin 0 0 16px 0
> section > section
background #eee background #eee
border-radius 8px border-radius 8px