Moved back button to the top of the questionnaire

Set cursor mode to pointer when hovering over buttons

src/components/HelloWorld.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'COVIDassist',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

src/components/Question.vue

@@ -8,12 +8,51 @@
       margin-bottom: 5%;
     }    
     
+    .slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 1em;
+        background: #d3d3d3;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+
+    .slider:hover {
+        opacity: 1;
+    }
+
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
+
+    .slider::-moz-range-thumb {
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
+
+    /*.bottom-aligned {
+        position: absolute;
+        left: 0;
+        right:    0;
+        bottom:   0;
+        border: 1px solid black;
+    }*/
 </style>
 
 <template>
     <div class="question">
         <p>{{ question }}</p>
-        <div class="buttons">
+        <div class="button-wrapper bottom-aligned">
             <div v-if="type === 'yesno'" class="question-choice">
                 <button v-on:click="$store.commit('nextQuestion')">Ja</button>
                 <button v-on:click="$store.commit('nextQuestion')">Nein</button>
@@ -28,7 +67,6 @@
                         v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
             </div>
             <router-link v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
-            <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
         </div>
     </div>
 </template>
@@ -62,13 +100,7 @@
                 else {
                     router.push('/results')
                 }
-            },
+            }
-            goBack() {
-                if (this.$route.params.id > 0) {
-                    const previousQuestion = parseInt(this.$route.params.id) - 1
-                    this.$router.push("/questionnaire/" + previousQuestion)
-                }
-            },
         },
         mounted () {
             document.addEventListener("backbutton", this.goBack, false);
@@ -78,43 +110,3 @@
         }
     }
 </script>
-
-<style scoped>
-    .slider {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 100%;
-        height: 1em;
-        background: #d3d3d3;
-        outline: none;
-        opacity: 0.7;
-        -webkit-transition: .2s;
-        transition: opacity .2s;
-    }
-
-    .slider:hover {
-        opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 2.5em;
-        height: 2.5em;
-        background: #e94a47;
-        cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-        width: 2.5em;
-        height: 2.5em;
-        background: #e94a47;
-        cursor: pointer;
-    }
-
-    .buttons {
-        position: absolute;
-        bottom: 0;
-        padding: 1em;
-    }
-</style>

src/views/Questionnaire.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="questionmaire">
-        <div class="progress">
+        <img id="back-button" v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" src="../assets/arrow-circle-left-outline.svg">
-            <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
+        <div id="status-bar-wrapper">
+          <div class="progress">
+              <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
+          </div>
+
         </div>
         <Question
                 v-bind:type="$store.state.questions[$route.params.id].type"
@@ -22,19 +26,41 @@
                 } else {
                     return "point"
                 }
+            },
+            goBack() {
+                if (this.$route.params.id > 0) {
+                    const previousQuestion = parseInt(this.$route.params.id) - 1
+                    this.$router.push("/questionnaire/" + previousQuestion)
+                }
             }
         },
     }
 </script>
 
 <style scoped>
+    #back-button {
+        position: absolute;
+        margin-left: 2%;
+        width: 2.5em;
+        float: left;
+
+    }
+
+    #status-bar-wrapper {
+        display: block;
+        flex-direction: row;
+        /* if this transparent border gets removed, the progress bar isn't centered anymore */
+        border: 1px solid transparent;
+    }
+
     .progress {
-        margin-top: 1em;
+        margin-top: 0.7em;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: center;
     }
+
     .point {
         margin: 0.2em;
         width: 0.5em;
@@ -43,10 +69,9 @@
         background: transparent;
         border: 2px solid #23286b;
         user-select: none;
-        cursor: pointer;
     }
+    
     .point.answered {
         background-color: #23286b;
     }
-
 </style>