From ee62f6e3563a70c5d9bdde17eb7ad2bc594a593f Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 27 Apr 2018 21:06:28 +0900 Subject: [PATCH 1/2] 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 81912a2483..847ae8eec5 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 58e561c2c4..759de4746b 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 ea4f9cb648..5f48d0fe24 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 703b51d678..ecd9c8cf2b 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({ <style lang="stylus" scoped> @import '~const.styl' -.mk-notes - background #fff +root(isDark) + 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(0, 0, 0, 0.1) + + @media (min-width 500px) + box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) .transition .mk-notes-enter @@ -260,8 +263,8 @@ export default Vue.extend({ > footer text-align center border-top solid 1px #eaeaea - border-bottom-left-radius 4px - border-bottom-right-radius 4px + border-bottom-left-radius 8px + border-bottom-right-radius 8px &:empty display none @@ -270,10 +273,18 @@ export default Vue.extend({ margin 0 padding 16px width 100% - color $theme-color border-radius 0 0 8px 8px + @media (min-width 500px) + padding 20px + &:disabled opacity 0.7 +.mk-notes[data-darkmode] + root(true) + +.mk-notes:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue index 4f7c8968b2..793f34fe85 100644 --- a/src/client/app/mobile/views/components/notification.vue +++ b/src/client/app/mobile/views/components/notification.vue @@ -1,15 +1,15 @@ <template> <div class="mk-notification"> <div class="notification reaction" v-if="notification.type == 'reaction'"> - <mk-time :time="notification.createdAt"/> <router-link class="avatar-anchor" :to="notification.user | userPage"> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> </router-link> - <div class="text"> - <p> + <div> + <header> <mk-reaction-icon :reaction="notification.reaction"/> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> - </p> + <mk-time :time="notification.createdAt"/> + </header> <router-link class="note-ref" :to="notification.note | notePage"> %fa:quote-left%{{ getNoteSummary(notification.note) }} %fa:quote-right% @@ -18,38 +18,54 @@ </div> <div class="notification renote" v-if="notification.type == 'renote'"> - <mk-time :time="notification.createdAt"/> <router-link class="avatar-anchor" :to="notification.user | userPage"> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> </router-link> - <div class="text"> - <p> + <div> + <header> %fa:retweet% <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> - </p> + <mk-time :time="notification.createdAt"/> + </header> <router-link class="note-ref" :to="notification.note | notePage"> %fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right% </router-link> </div> </div> + <div class="notification follow" v-if="notification.type == 'follow'"> + <router-link class="avatar-anchor" :to="notification.user | userPage"> + <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + </router-link> + <div> + <header> + %fa:user-plus% + <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> + <mk-time :time="notification.createdAt"/> + </header> + </div> + </div> + + <div class="notification poll_vote" v-if="notification.type == 'poll_vote'"> + <router-link class="avatar-anchor" :to="notification.user | userPage"> + <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> + </router-link> + <div> + <header> + %fa:chart-pie% + <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> + <mk-time :time="notification.createdAt"/> + </header> + <router-link class="note-ref" :to="notification.note | notePage"> + %fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right% + </router-link> + </div> + </div> + <template v-if="notification.type == 'quote'"> <mk-note :note="notification.note"/> </template> - <div class="notification follow" v-if="notification.type == 'follow'"> - <mk-time :time="notification.createdAt"/> - <router-link class="avatar-anchor" :to="notification.user | userPage"> - <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> - </router-link> - <div class="text"> - <p> - %fa:user-plus% - <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> - </p> - </div> - </div> - <template v-if="notification.type == 'reply'"> <mk-note :note="notification.note"/> </template> @@ -57,22 +73,6 @@ <template v-if="notification.type == 'mention'"> <mk-note :note="notification.note"/> </template> - - <div class="notification poll_vote" v-if="notification.type == 'poll_vote'"> - <mk-time :time="notification.createdAt"/> - <router-link class="avatar-anchor" :to="notification.user | userPage"> - <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> - </router-link> - <div class="text"> - <p> - %fa:chart-pie% - <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> - </p> - <router-link class="note-ref" :to="notification.note | notePage"> - %fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right% - </router-link> - </div> - </div> </div> </template> @@ -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 </style> diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue index ad43a27b98..7a878740cc 100644 --- a/src/client/app/mobile/views/components/notifications.vue +++ b/src/client/app/mobile/views/components/notifications.vue @@ -1,18 +1,20 @@ <template> <div class="mk-notifications"> - <div class="notifications" v-if="notifications.length != 0"> + <transition-group name="mk-notifications" class="transition notifications"> <template v-for="(notification, i) in _notifications"> <mk-notification :notification="notification" :key="notification.id"/> - <p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date"> + <p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date"> <span>%fa:angle-up%{{ notification._datetext }}</span> <span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span> </p> </template> - </div> + </transition-group> + <button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications"> <template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template> {{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }} </button> + <p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> </div> @@ -102,23 +104,26 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-notifications - margin 8px auto - padding 0 - max-width 500px - width calc(100% - 16px) + margin 0 auto background #fff border-radius 8px - box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) + box-shadow 0 0 2px rgba(0, 0, 0, 0.1) @media (min-width 500px) - margin 16px auto - width calc(100% - 32px) + box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) + + .transition + .mk-notifications-enter + .mk-notifications-leave-to + opacity 0 + transform translateY(-30px) + + > * + transition transform .3s ease, opacity .3s ease > .notifications > .mk-notification - margin 0 auto - max-width 500px border-bottom solid 1px rgba(0, 0, 0, 0.05) &:last-child diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue index adb2535aad..89edcf5a9e 100644 --- a/src/client/app/mobile/views/components/ui.header.vue +++ b/src/client/app/mobile/views/components/ui.header.vue @@ -143,14 +143,14 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.header +root(isDark) $height = 48px position fixed 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 @@ -167,7 +167,7 @@ export default Vue.extend({ -webkit-backdrop-filter blur(12px) backdrop-filter blur(12px) //background-color rgba(#1b2023, 0.75) - background-color #1b2023 + background-color isDark ? #313543 : #595f6f > p display none @@ -244,4 +244,10 @@ export default Vue.extend({ line-height $height border-left solid 1px rgba(#000, 0.1) +.header[data-darkmode] + root(true) + +.header:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue index 89ac4d2c66..5069c5a1ef 100644 --- a/src/client/app/mobile/views/components/user-timeline.vue +++ b/src/client/app/mobile/views/components/user-timeline.vue @@ -65,9 +65,3 @@ export default Vue.extend({ } }); </script> - -<style lang="stylus" scoped> -.mk-user-timeline - max-width 600px - margin 0 auto -</style> diff --git a/src/client/app/mobile/views/pages/dashboard.vue b/src/client/app/mobile/views/pages/dashboard.vue index 14779da650..53fe33ee8f 100644 --- a/src/client/app/mobile/views/pages/dashboard.vue +++ b/src/client/app/mobile/views/pages/dashboard.vue @@ -102,7 +102,6 @@ export default Vue.extend({ mounted() { document.title = 'Misskey'; - document.documentElement.style.background = '#313a42'; }, methods: { diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue index f3c75f71e9..33ade94e35 100644 --- a/src/client/app/mobile/views/pages/followers.vue +++ b/src/client/app/mobile/views/pages/followers.vue @@ -40,9 +40,6 @@ export default Vue.extend({ created() { this.fetch(); }, - mounted() { - document.documentElement.style.background = '#313a42'; - }, methods: { fetch() { Progress.start(); diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue index 88368ff778..c6d6d44281 100644 --- a/src/client/app/mobile/views/pages/following.vue +++ b/src/client/app/mobile/views/pages/following.vue @@ -39,9 +39,6 @@ export default Vue.extend({ created() { this.fetch(); }, - mounted() { - document.documentElement.style.background = '#313a42'; - }, methods: { fetch() { Progress.start(); diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue index 72b30d5440..6999108b97 100644 --- a/src/client/app/mobile/views/pages/home.vue +++ b/src/client/app/mobile/views/pages/home.vue @@ -77,7 +77,6 @@ export default Vue.extend({ mounted() { document.title = 'Misskey'; - document.documentElement.style.background = '#313a42'; Progress.start(); }, @@ -163,11 +162,14 @@ main background #eee > .tl - max-width 600px + max-width 680px margin 0 auto padding 8px @media (min-width 500px) padding 16px + @media (min-width 600px) + padding 32px + </style> diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue index c866be8a14..7bcc5e71f5 100644 --- a/src/client/app/mobile/views/pages/note.vue +++ b/src/client/app/mobile/views/pages/note.vue @@ -30,7 +30,6 @@ export default Vue.extend({ }, mounted() { document.title = 'Misskey'; - document.documentElement.style.background = '#313a42'; }, methods: { fetch() { diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue index cd2b633676..d0c0fe9535 100644 --- a/src/client/app/mobile/views/pages/notifications.vue +++ b/src/client/app/mobile/views/pages/notifications.vue @@ -2,7 +2,10 @@ <mk-ui> <span slot="header">%fa:R bell%%i18n:@notifications%</span> <template slot="func"><button @click="fn">%fa:check%</button></template> - <mk-notifications @fetched="onFetched"/> + + <main> + <mk-notifications @fetched="onFetched"/> + </main> </mk-ui> </template> @@ -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({ } }); </script> + +<style lang="stylus" scoped> +@import '~const.styl' + +main + width 100% + max-width 680px + margin 0 auto + padding 8px + + @media (min-width 500px) + padding 16px + + @media (min-width 600px) + padding 32px + +</style> diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue index 59da71c67d..d0b9095cef 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 31035f666a..6c80de3aa0 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 8ae087749f..ebf14f68f5 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 73b8e24315..aae070afdf 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -1,7 +1,7 @@ <template> <mk-ui> <template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template> - <main v-if="!fetching"> + <main v-if="!fetching" :data-darkmode="_darkmode_"> <div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div> <div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div> <header> @@ -88,9 +88,6 @@ export default Vue.extend({ created() { this.fetch(); }, - mounted() { - document.documentElement.style.background = '#313a42'; - }, methods: { fetch() { Progress.start(); @@ -110,7 +107,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -main +root(isDark) > .is-suspended > .is-remote &.is-suspended @@ -138,7 +135,7 @@ main > .banner padding-bottom 33.3% - background-color #1b1b1b + background-color isDark ? #0e0e0e : #cacaca background-size cover background-position center @@ -165,13 +162,13 @@ main left -2px bottom -2px width 100% - border 3px solid #313a42 + border 3px solid isDark ? #191b22 : #ececed border-radius 6px @media (min-width 500px) left -4px bottom -4px - border 4px solid #313a42 + border 4px solid isDark ? #191b22 : #ececed border-radius 12px > .mk-follow-button @@ -185,14 +182,14 @@ main margin 0 line-height 22px font-size 20px - color #fff + color isDark ? #fff : #757c82 > .username display inline-block line-height 20px font-size 16px font-weight bold - color #657786 + color isDark ? #657786 : #969ea5 > .followed margin-left 8px @@ -219,7 +216,7 @@ main > .status > a - color #657786 + color isDark ? #657786 : #818a92 &:not(:last-child) margin-right 16px @@ -227,7 +224,7 @@ main > b margin-right 4px font-size 16px - color #fff + color isDark ? #fff : #787e86 > i font-size 14px @@ -235,9 +232,9 @@ main > nav position -webkit-sticky position sticky - top 48px - box-shadow 0 4px 4px rgba(0, 0, 0, 0.3) - background-color #313a42 + top 47px + box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07) + background-color isDark ? #191b22 : #ececed z-index 1 > .nav-container @@ -253,7 +250,7 @@ main line-height 52px font-size 14px text-decoration none - color #657786 + color isDark ? #657786 : #9ca1a5 border-bottom solid 2px transparent &[data-active] @@ -262,9 +259,20 @@ main border-color $theme-color > .body + max-width 680px + margin 0 auto padding 8px @media (min-width 500px) padding 16px + @media (min-width 600px) + padding 32px + +main[data-darkmode] + root(true) + +main:not([data-darkmode]) + root(false) + </style> From 319f52519969a6f496a38f24f275b95885730437 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 27 Apr 2018 21:33:18 +0900 Subject: [PATCH 2/2] wip --- src/client/app/mobile/views/components/note.vue | 3 +++ src/client/app/mobile/views/components/post-form.vue | 6 +++++- src/client/app/mobile/views/pages/user.vue | 10 +++++----- src/client/app/mobile/views/pages/user/home.vue | 5 ++++- 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index 5f48d0fe24..5772fb2b7e 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -266,6 +266,9 @@ root(isDark) @media (min-width 500px) padding 16px + @media (min-width 600px) + padding 16px 32px + .avatar-anchor display inline-block diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index 957af3487b..7b8a52f06e 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -175,11 +175,15 @@ export default Vue.extend({ margin 8px auto background #fff border-radius 8px - box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) + box-shadow 0 0 2px rgba(0, 0, 0, 0.1) @media (min-width 500px) margin 16px auto width calc(100% - 32px) + box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) + + @media (min-width 600px) + margin 32px auto > header z-index 1 diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index aae070afdf..abd4b5bd85 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -45,9 +45,9 @@ </header> <nav> <div class="nav-container"> - <a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a> - <a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a> - <a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a> + <a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a> + <a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a> + <a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a> </div> </nav> <div class="body"> @@ -201,7 +201,7 @@ root(isDark) > .description margin 8px 0 - color #fff + color isDark ? #fff : #757c82 > .info margin 8px 0 @@ -209,7 +209,7 @@ root(isDark) > p display inline margin 0 16px 0 0 - color #a9b9c1 + color isDark ? #a9b9c1 : #90989c > i margin-right 4px diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue index 4ba2ffd1df..f4191edbbf 100644 --- a/src/client/app/mobile/views/pages/user/home.vue +++ b/src/client/app/mobile/views/pages/user/home.vue @@ -64,11 +64,14 @@ export default Vue.extend({ > section background #eee border-radius 8px - box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) + box-shadow 0 4px 16px rgba(#000, 0.1) &:not(:last-child) margin-bottom 8px + @media (min-width 500px) + margin-bottom 16px + > h2 margin 0 padding 8px 10px