parent
aa1afa63b9
commit
6459e0eafc
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="error-page window-height window-width bg-light column items-center">
|
|
||||||
<div class="error-code bg-primary flex items-center justify-center">
|
|
||||||
404
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="error-card card bg-white column items-center justify-center">
|
|
||||||
<i class="text-grey-5">error_outline</i>
|
|
||||||
<p class="caption text-center">Oops. Nothing here...</p>
|
|
||||||
<p class="text-center group">
|
|
||||||
<button v-if="canGoBack" class="grey push small" @click="goBack">
|
|
||||||
<i class="on-left">keyboard_arrow_left</i>
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
<router-link to="/">
|
|
||||||
<button class="grey push small">
|
|
||||||
Go home
|
|
||||||
<i class="on-right">home</i>
|
|
||||||
</button>
|
|
||||||
</router-link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
canGoBack: window.history.length > 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goBack () {
|
|
||||||
window.history.go(-1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus">
|
|
||||||
.error-page
|
|
||||||
.error-code
|
|
||||||
height 50vh
|
|
||||||
width 100%
|
|
||||||
padding-top 15vh
|
|
||||||
font-size 30vmax
|
|
||||||
color rgba(255, 255, 255, .2)
|
|
||||||
overflow hidden
|
|
||||||
.error-card
|
|
||||||
margin-top -25px
|
|
||||||
width 90vw
|
|
||||||
max-width 600px
|
|
||||||
padding 50px
|
|
||||||
i
|
|
||||||
font-size 5rem
|
|
||||||
</style>
|
|
||||||
@ -1,155 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-layout>
|
<q-layout>
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
<div slot="header" class="toolbar">
|
<div slot="header" class="toolbar">
|
||||||
|
|
||||||
|
<button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
|
||||||
|
<i>menu</i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<q-toolbar-title :padding="0">
|
<q-toolbar-title :padding="0">
|
||||||
Quasar Framework v{{$q.version}}
|
Vee-Shopping
|
||||||
</q-toolbar-title>
|
</q-toolbar-title>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
|
||||||
Replace following "div" with
|
|
||||||
"<router-view class="layout-view">" component
|
|
||||||
if using subRoutes
|
|
||||||
-->
|
|
||||||
<div class="layout-view">
|
|
||||||
<div class="logo-container non-selectable no-pointer-events">
|
|
||||||
<div class="logo" :style="position">
|
|
||||||
<img src="~assets/quasar-logo.png">
|
|
||||||
<p class="caption text-center">
|
|
||||||
<span v-if="orienting || rotating">Tilt your device.</span>
|
|
||||||
<template v-else>
|
|
||||||
<span class="desktop-only">Move your mouse.</span>
|
|
||||||
<span class="touch-only">Touch screen and move.</span>
|
|
||||||
</template>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-layout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const moveForce = 30
|
|
||||||
const rotateForce = 40
|
|
||||||
const RAD_TO_DEG = 180 / Math.PI
|
|
||||||
|
|
||||||
import { Utils, Platform } from 'quasar'
|
|
||||||
|
|
||||||
function getRotationFromAccel (accelX, accelY, accelZ) {
|
<!-- Left-side Drawer -->
|
||||||
/* Reference: http://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation#answer-30195572 */
|
<q-drawer ref="leftDrawer">
|
||||||
const sign = accelZ > 0 ? 1 : -1
|
<div class="toolbar">
|
||||||
const miu = 0.001
|
<q-toolbar-title>
|
||||||
|
Menu
|
||||||
|
</q-toolbar-title>
|
||||||
|
</div>
|
||||||
|
|
||||||
return {
|
<div class="list no-border platform-delimiter">
|
||||||
roll: Math.atan2(accelY, sign * Math.sqrt(Math.pow(accelZ, 2) + miu * Math.pow(accelX, 2))) * RAD_TO_DEG,
|
<q-drawer-link to="/">
|
||||||
pitch: -Math.atan2(accelX, Math.sqrt(Math.pow(accelY, 2) + Math.pow(accelZ, 2))) * RAD_TO_DEG
|
Start
|
||||||
}
|
</q-drawer-link>
|
||||||
}
|
<q-drawer-link to="/foo">
|
||||||
|
Foo
|
||||||
|
</q-drawer-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
export default {
|
</q-drawer>
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
orienting: window.DeviceOrientationEvent && !Platform.is.desktop,
|
|
||||||
rotating: window.DeviceMotionEvent && !Platform.is.desktop,
|
|
||||||
moveX: 0,
|
|
||||||
moveY: 0,
|
|
||||||
rotateY: 0,
|
|
||||||
rotateX: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
position () {
|
|
||||||
const transform = `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
|
|
||||||
return {
|
|
||||||
top: this.moveY + 'px',
|
|
||||||
left: this.moveX + 'px',
|
|
||||||
'-webkit-transform': transform,
|
|
||||||
'-ms-transform': transform,
|
|
||||||
transform
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
move (evt) {
|
|
||||||
const {width, height} = Utils.dom.viewport()
|
|
||||||
const {top, left} = Utils.event.position(evt)
|
|
||||||
const halfH = height / 2
|
|
||||||
const halfW = width / 2
|
|
||||||
|
|
||||||
this.moveX = (left - halfW) / halfW * -moveForce
|
<!-- Main View inside -->
|
||||||
this.moveY = (top - halfH) / halfH * -moveForce
|
<router-view class="layout-view"></router-view>
|
||||||
this.rotateY = (left / width * rotateForce * 2) - rotateForce
|
|
||||||
this.rotateX = -((top / height * rotateForce * 2) - rotateForce)
|
|
||||||
},
|
|
||||||
rotate (evt) {
|
|
||||||
if (evt.rotationRate &&
|
|
||||||
evt.rotationRate.beta !== null &&
|
|
||||||
evt.rotationRate.gamma !== null) {
|
|
||||||
this.rotateX = evt.rotationRate.beta * 0.7
|
|
||||||
this.rotateY = evt.rotationRate.gamma * -0.7
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
/* evt.acceleration may be null in some cases, so we'll fall back
|
|
||||||
to evt.accelerationIncludingGravity */
|
|
||||||
const accelX = evt.acceleration.x || evt.accelerationIncludingGravity.x
|
|
||||||
const accelY = evt.acceleration.y || evt.accelerationIncludingGravity.y
|
|
||||||
const accelZ = evt.acceleration.z || evt.accelerationIncludingGravity.z - 9.81
|
|
||||||
|
|
||||||
const rotation = getRotationFromAccel(accelX, accelY, accelZ)
|
</q-layout>
|
||||||
this.rotateX = rotation.roll * 0.7
|
</template>
|
||||||
this.rotateY = rotation.pitch * -0.7
|
|
||||||
}
|
|
||||||
},
|
|
||||||
orient (evt) {
|
|
||||||
if (evt.beta === null || evt.gamma === null) {
|
|
||||||
window.removeEventListener('deviceorientation', this.orient, false)
|
|
||||||
this.orienting = false
|
|
||||||
|
|
||||||
window.addEventListener('devicemotion', this.rotate, false)
|
<script>
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.rotateX = evt.beta * 0.7
|
|
||||||
this.rotateY = evt.gamma * -0.7
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.orienting) {
|
|
||||||
window.addEventListener('deviceorientation', this.orient, false)
|
|
||||||
}
|
|
||||||
else if (this.rotating) {
|
|
||||||
window.addEventListener('devicemove', this.rotate, false)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.addEventListener('mousemove', this.move)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
|
||||||
if (this.orienting) {
|
|
||||||
window.removeEventListener('deviceorientation', this.orient, false)
|
|
||||||
}
|
|
||||||
else if (this.rotating) {
|
|
||||||
window.removeEventListener('devicemove', this.rotate, false)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.removeEventListener('mousemove', this.move)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
.logo-container
|
|
||||||
width 192px
|
|
||||||
height 268px
|
|
||||||
perspective 800px
|
|
||||||
position absolute
|
|
||||||
top 50%
|
|
||||||
left 50%
|
|
||||||
transform translateX(-50%) translateY(-50%)
|
|
||||||
.logo
|
|
||||||
position absolute
|
|
||||||
transform-style preserve-3d
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
Foo {{ $route.params.id }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
main {{ $route.params.id }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue