From ee62f6e3563a70c5d9bdde17eb7ad2bc594a593f Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 27 Apr 2018 21:06:28 +0900 Subject: [PATCH] wip --- src/client/app/mobile/style.styl | 4 + .../app/mobile/views/components/note.sub.vue | 3 + .../app/mobile/views/components/note.vue | 7 +- .../app/mobile/views/components/notes.vue | 23 +++- .../mobile/views/components/notification.vue | 123 ++++++++++-------- .../mobile/views/components/notifications.vue | 29 +++-- .../app/mobile/views/components/ui.header.vue | 12 +- .../mobile/views/components/user-timeline.vue | 6 - .../app/mobile/views/pages/dashboard.vue | 1 - .../app/mobile/views/pages/followers.vue | 3 - .../app/mobile/views/pages/following.vue | 3 - src/client/app/mobile/views/pages/home.vue | 6 +- src/client/app/mobile/views/pages/note.vue | 1 - .../app/mobile/views/pages/notifications.vue | 23 +++- .../mobile/views/pages/profile-setting.vue | 1 - src/client/app/mobile/views/pages/search.vue | 1 - .../app/mobile/views/pages/settings.vue | 1 - src/client/app/mobile/views/pages/user.vue | 40 +++--- 18 files changed, 172 insertions(+), 115 deletions(-) diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl index 81912a248..847ae8eec 100644 --- a/src/client/app/mobile/style.styl +++ b/src/client/app/mobile/style.styl @@ -8,6 +8,10 @@ html height 100% + background #ececed + + &[data-darkmode] + background #191B22 body display flex diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue index 58e561c2c..759de4746 100644 --- a/src/client/app/mobile/views/components/note.sub.vue +++ b/src/client/app/mobile/views/components/note.sub.vue @@ -31,6 +31,9 @@ export default Vue.extend({ font-size 0.9em padding 16px + @media (min-width 600px) + padding 24px 32px + &:after content "" display block diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index ea4f9cb64..5f48d0fe2 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -238,7 +238,7 @@ export default Vue.extend({ root(isDark) font-size 12px - border-bottom solid 1px #eaeaea + border-bottom solid 1px isDark ? #1c2023 : #eaeaea &:first-child border-radius 8px 8px 0 0 @@ -308,7 +308,10 @@ root(isDark) background transparent > article - padding 14px 16px 9px 16px + padding 16px 16px 9px + + @media (min-width 600px) + padding 32px 32px 22px &:after content "" diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue index 703b51d67..ecd9c8cf2 100644 --- a/src/client/app/mobile/views/components/notes.vue +++ b/src/client/app/mobile/views/components/notes.vue @@ -199,10 +199,13 @@ export default Vue.extend({ diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue index 4f7c8968b..793f34fe8 100644 --- a/src/client/app/mobile/views/components/notification.vue +++ b/src/client/app/mobile/views/components/notification.vue @@ -1,15 +1,15 @@ @@ -95,44 +95,57 @@ export default Vue.extend({ > .notification padding 16px + font-size 12px overflow-wrap break-word + @media (min-width 350px) + font-size 14px + + @media (min-width 500px) + font-size 16px + + @media (min-width 600px) + padding 32px + &:after content "" display block clear both - > .mk-time - display inline - position absolute - top 16px - right 12px - vertical-align top - color rgba(0, 0, 0, 0.6) - font-size 0.9em - > .avatar-anchor display block float left img - min-width 36px - min-height 36px - max-width 36px - max-height 36px + width 36px + height 36px border-radius 6px - > .text + @media (min-width 500px) + width 42px + height 42px + + > div float right width calc(100% - 36px) padding-left 8px - p - margin 0 + @media (min-width 500px) + width calc(100% - 42px) + + > header + display flex + align-items center + white-space nowrap i, .mk-reaction-icon margin-right 4px + > .mk-time + margin-left auto + color rgba(0, 0, 0, 0.3) + font-size 0.9em + > .note-preview color rgba(0, 0, 0, 0.7) @@ -147,11 +160,11 @@ export default Vue.extend({ margin-right 3px &.renote - .text p i + > div > header i color #77B255 &.follow - .text p i + > div > header i color #53c7ce diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue index ad43a27b9..7a878740c 100644 --- a/src/client/app/mobile/views/components/notifications.vue +++ b/src/client/app/mobile/views/components/notifications.vue @@ -1,18 +1,20 @@ @@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading'; export default Vue.extend({ mounted() { document.title = 'Misskey | %i18n:@notifications%'; - document.documentElement.style.background = '#313a42'; Progress.start(); }, @@ -30,3 +32,20 @@ export default Vue.extend({ } }); + + diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue index 59da71c67..d0b9095ce 100644 --- a/src/client/app/mobile/views/pages/profile-setting.vue +++ b/src/client/app/mobile/views/pages/profile-setting.vue @@ -59,7 +59,6 @@ export default Vue.extend({ }, mounted() { document.title = 'Misskey | %i18n:@title%'; - document.documentElement.style.background = '#313a42'; }, methods: { setAvatar() { diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue index 31035f666..6c80de3aa 100644 --- a/src/client/app/mobile/views/pages/search.vue +++ b/src/client/app/mobile/views/pages/search.vue @@ -39,7 +39,6 @@ export default Vue.extend({ }, mounted() { document.title = `%i18n:@search%: ${this.q} | Misskey`; - document.documentElement.style.background = '#313a42'; this.fetch(); }, diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 8ae087749..ebf14f68f 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -34,7 +34,6 @@ export default Vue.extend({ }, mounted() { document.title = 'Misskey | %i18n:@settings%'; - document.documentElement.style.background = '#313a42'; }, methods: { signout() { diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 73b8e2431..aae070afd 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -1,7 +1,7 @@