sean-m
/
vue-counter
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Mobile refinements

master
Sean McArdle 2020-02-16 15:04:04 -08:00
parent 6f5b25bdf3
commit d70aad2842
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=n">
<title>vue-counter</title>
<link rel="icon" type="image/png" sizes="32x32" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/favicon-16x16.png">

2
src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="app">
<header>
<span>Counter PWA</span>
<span>Counter</span>
</header>
<main>
<router-view></router-view>

33
src/components/Counter.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="counter">
<div class="count-top">
<label class="upper-label" for="limit">Limit</label>
<input class="upper-input" id="limit" type="number" v-model="countBound" placeholder="10"/>
<label class="upper-label" for="limit" @click="reset">Limit</label>
<input class="upper-input" name="limit" type="number" v-model="countBound" placeholder="10"/>
</div>
<div @click="bumpCount" :style="countStyle" class="count-bottom">
<div class="value">{{ countCurrent }}</div>
@ -11,11 +11,12 @@
</template>
<script>
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate
export default {
name: 'counter',
data () {
return {
msg: 'Welcome to Your Counter PWA',
countBound: 15,
countCurrent: 0,
limitReached: false,
@ -38,9 +39,14 @@ export default {
if (this.limitReached) {
this.countStyle.backgroundColor = '#e53232'
window.navigator.vibrate([200, 100, 200])
} else {
this.countStyle.backgroundColor = '#179e63'
}
},
reset () {
this.countCurrent = 0;
this.limitReached = false;
}
}
}
@ -56,23 +62,24 @@ export default {
}
.count-top {
display: table;
width:100%;
min-height:30%;
min-height:20%;
font-size: 3em;
display: flex;
justify-content: flex-start;
vertical-align: bottom;
}
.upper-label {
display: table-cell;
width: 1px;
min-height: 50%;
padding-left: 0.2em;
padding-right: 0.2em;
flex: 0 0 auto;
vertical-align: text-bottom;
align-self: flex-end;
margin-bottom: 0.55em;
}
.upper-input {
display: table-cell;
min-width: 97%;
min-height: 80%;
font-size: 1em;
width: 3em;
flex: 1 1 auto;
margin: 0.2em;
}
.count-bottom {