Minor improvements.

fezu54 · Jun 14, 2019 · 2c51ac8 · 2c51ac8
1 parent 2db2efd
commit 2c51ac8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 33 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,32 +1,29 @@
 <template>
     <div id="app">
-        <div style="width: 1000px;">
-            <CircularCountDownTimer
-                    ref="countDown"
-                    :initial-value="360550"
-                    :stroke-width="5"
-                    :seconds-stroke-color="'#f00'"
-                    :minutes-stroke-color="'#0ff'"
-                    :hours-stroke-color="'#0f0'"
-                    :underneath-stroke-color="'lightgrey'"
-                    :seconds-fill-color="'#00ffff66'"
-                    :seconds-fill-opacity="1"
-                    :minutes-fill-color="'#00ff0066'"
-                    :hours-fill-color="'#ff000066'"
-                    :size="200"
-                    :padding="14"
-                    :hour-label="'hours'"
-                    :minute-label="'minutes'"
-                    :second-label="'seconds'"
-                    :show-second="true"
-                    :show-minute="true"
-                    :show-hour="true"
-                    :show-negatives="true"
-                    :paused="some_variable"
-                    :notify-every="'minute'"
-                    @update="updated"
-            ></CircularCountDownTimer>
-        </div>
+        <CircularCountDownTimer
+            ref="countDown"
+            :initial-value="360550"
+            :stroke-width="5"
+            :seconds-stroke-color="'#f00'"
+            :minutes-stroke-color="'#0ff'"
+            :hours-stroke-color="'#0f0'"
+            :underneath-stroke-color="'lightgrey'"
+            :seconds-fill-color="'#00ffff66'"
+            :minutes-fill-color="'#00ff0066'"
+            :hours-fill-color="'#ff000066'"
+            :size="200"
+            :padding="14"
+            :hour-label="'hours'"
+            :minute-label="'minutes'"
+            :second-label="'seconds'"
+            :show-second="true"
+            :show-minute="true"
+            :show-hour="true"
+            :show-negatives="true"
+            :paused="some_variable"
+            :notify-every="'minute'"
+            @update="updated"
+        ></CircularCountDownTimer>
         <button @click="updateTime">Update</button>
         <!--<CircularCountDownTimer
                 :initial-value="200"
@@ -49,18 +46,17 @@
         },
         data(){
             return {
-                pause: false,
                 some_variable: false
             }
         },
         mounted(){
             setTimeout(function(){
-                this.pause = true;
+                this.some_variable = true;
             }.bind(this), 30000);
         },
         methods: {
             updateTime(){
-                this.$refs.countDown.updateTime(10)
+                this.$refs.countDown.updateTime(-10)
             },
             finished: () => {
                 console.log('finished')
@@ -74,7 +70,8 @@
 
 <style>
     #app {
-        height: 200px;
+        width: 100%;
+        height: 300px;
         font-family: 'Avenir', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;

diff --git a/src/components/CircularCountDownTimer.vue b/src/components/CircularCountDownTimer.vue
@@ -325,7 +325,7 @@
             },
             updateTime(seconds){
                 if(this.value)
-                    this.value+=seconds
+                    this.value+=seconds;
                 if(this.value<0){
                     this.$emit('finish')
                 }
@@ -356,7 +356,7 @@
                         if(this.paused){
                             return;
                         }
-                        const delta = 1
+                        const delta = 1;
                         this.value -= delta;
                         if(this.value === 0){
                             this.$emit('finish');