nanka iroiro

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)