diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-09-05 13:47:26 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-09-05 13:47:26 +0900 |
| commit | 6fea2f52f10f4cb9f6cfb9210917c615a9423307 (patch) | |
| tree | 6a795b17eed3b45d1bc8947fba7e6dccc38beb2e /src/client/app/mobile/views/components/notify.vue | |
| parent | Improve usability (diff) | |
| download | misskey-6fea2f52f10f4cb9f6cfb9210917c615a9423307.tar.gz misskey-6fea2f52f10f4cb9f6cfb9210917c615a9423307.tar.bz2 misskey-6fea2f52f10f4cb9f6cfb9210917c615a9423307.zip | |
nanka iroiro
Diffstat (limited to 'src/client/app/mobile/views/components/notify.vue')
| -rw-r--r-- | src/client/app/mobile/views/components/notify.vue | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue index 4d9b7c0f6b..7a2f7bfedc 100644 --- a/src/client/app/mobile/views/components/notify.vue +++ b/src/client/app/mobile/views/components/notify.vue @@ -1,5 +1,5 @@ <template> -<div class="mk-notify"> +<div class="mk-notify" :class="pos"> <div> <mk-notification-preview :notification="notification"/> </div> @@ -12,11 +12,16 @@ import * as anime from 'animejs'; export default Vue.extend({ props: ['notification'], + computed: { + pos() { + return this.$store.state.device.mobileNotificationPosition; + } + }, mounted() { this.$nextTick(() => { anime({ targets: this.$el, - bottom: '0px', + [this.pos]: '0px', duration: 500, easing: 'easeOutQuad' }); @@ -24,7 +29,7 @@ export default Vue.extend({ setTimeout(() => { anime({ targets: this.$el, - bottom: `-${this.$el.offsetHeight}px`, + [this.pos]: `-${this.$el.offsetHeight}px`, duration: 500, easing: 'easeOutQuad', complete: () => this.$destroy() @@ -41,7 +46,6 @@ export default Vue.extend({ position fixed z-index 1024 - bottom -($height) left 0 right 0 width 100% @@ -52,6 +56,12 @@ export default Vue.extend({ pointer-events none font-size 80% + &.bottom + bottom -($height) + + &.top + top -($height) + > div height 100% -webkit-backdrop-filter blur(2px) |