From d70aad28425b651dfdfec608797bc1147defa6be Mon Sep 17 00:00:00 2001
From: Sean McArdle <sean.mcardle0@gmail.com>
Date: Sun, 16 Feb 2020 15:04:04 -0800
Subject: [PATCH] Mobile refinements

---
 index.html                 |  2 +-
 src/App.vue                |  2 +-
 src/components/Counter.vue | 33 ++++++++++++++++++++-------------
 3 files changed, 22 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 3c68196..3604528 100644
--- a/index.html
+++ b/index.html
@@ -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">
diff --git a/src/App.vue b/src/App.vue
index f6145dd..9633b6e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <header>
-      <span>Counter PWA</span>
+      <span>Counter</span>
     </header>
     <main>
       <router-view></router-view>
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 33434f7..3eb95b4 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -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 {
