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>
|
||||
<q-layout>
|
||||
|
||||
<!-- 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">
|
||||
Quasar Framework v{{$q.version}}
|
||||
Vee-Shopping
|
||||
</q-toolbar-title>
|
||||
</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) {
|
||||
/* Reference: http://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation#answer-30195572 */
|
||||
const sign = accelZ > 0 ? 1 : -1
|
||||
const miu = 0.001
|
||||
<!-- Left-side Drawer -->
|
||||
<q-drawer ref="leftDrawer">
|
||||
<div class="toolbar">
|
||||
<q-toolbar-title>
|
||||
Menu
|
||||
</q-toolbar-title>
|
||||
</div>
|
||||
|
||||
return {
|
||||
roll: Math.atan2(accelY, sign * Math.sqrt(Math.pow(accelZ, 2) + miu * Math.pow(accelX, 2))) * RAD_TO_DEG,
|
||||
pitch: -Math.atan2(accelX, Math.sqrt(Math.pow(accelY, 2) + Math.pow(accelZ, 2))) * RAD_TO_DEG
|
||||
}
|
||||
}
|
||||
<div class="list no-border platform-delimiter">
|
||||
<q-drawer-link to="/">
|
||||
Start
|
||||
</q-drawer-link>
|
||||
<q-drawer-link to="/foo">
|
||||
Foo
|
||||
</q-drawer-link>
|
||||
</div>
|
||||
|
||||
export default {
|
||||
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
|
||||
</q-drawer>
|
||||
|
||||
this.moveX = (left - halfW) / halfW * -moveForce
|
||||
this.moveY = (top - halfH) / halfH * -moveForce
|
||||
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
|
||||
<!-- Main View inside -->
|
||||
<router-view class="layout-view"></router-view>
|
||||
|
||||
const rotation = getRotationFromAccel(accelX, accelY, accelZ)
|
||||
this.rotateX = rotation.roll * 0.7
|
||||
this.rotateY = rotation.pitch * -0.7
|
||||
}
|
||||
},
|
||||
orient (evt) {
|
||||
if (evt.beta === null || evt.gamma === null) {
|
||||
window.removeEventListener('deviceorientation', this.orient, false)
|
||||
this.orienting = false
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
window.addEventListener('devicemotion', this.rotate, false)
|
||||
}
|
||||
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">
|
||||
.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>
|
||||
|
||||
@ -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