Merge branch 'master' into 'thilo-fixes'

# Conflicts:
#   src/components/Question.vue
#   src/views/HelpPage.vue
#   src/views/Warning.vue

src/App.vue

@@ -34,6 +34,12 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
 
+  /* disables the rectangle feedback box when tapping something on a mobile device */
+  * { 
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
   h1 {
     font-size: 1.2em;
     line-height: 1em;
@@ -63,10 +69,8 @@
     
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
     border-radius: 15px;
-    padding: 0.4em 1.4em;
-    margin-left: 5%;
-    margin-right: 5%;
     border: none;
+    padding: 0.4em 1.4em;
 
     font-family: Open Sans,sans-serif;
     font-style: normal;
@@ -78,6 +82,12 @@
     background-color: #E94A47;
   }
 
+  /* div element used to center a button or multiple buttons */
+  .button-wrapper {
+    text-align: center;
+    margin: auto;
+  }
+
   body {
     background-color: #FCF7F8;
     color: #0B2545;

src/components/Question.vue

@@ -4,9 +4,7 @@
     }
 
     button {
-      display: block; 
       width: 80%;
-      margin: 0 auto;
       margin-bottom: 5%;
     }    
     
@@ -32,6 +30,23 @@
             <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 v-if="type === 'slider'" class="question-slider">
+            <p>{{ selection }}</p>
+            <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
+        </div>
+        <div v-if="type === 'choice'" class="question-options">
+            <div class="button-wrapper">
+              <button v-bind:key="answer.text"
+                      v-for="answer in answers"
+                      v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
+            </div>
+        </div>
+        <div class="button-wrapper">
+          <router-link to="/questionnaire/help" style="text-decoration: none">
+            <button class="alert">Ich brauche Hilfe zu dieser Frage</button>
+          </router-link>
+        </div>
+        <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>
 </template>
 

src/views/HelpPage.vue

@@ -1,10 +1,24 @@
+<style scoped>
+  .help {
+    padding: 1em;
+  }
+
+  button {
+      width: 80%;
+      margin-bottom: 5%;
+  }
+</style>
+
 <template>
     <div class="help">
         <p>{{ $store.state.questions[$route.params.id].description }}</p>
+        <div class="button-wrapper">
         <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
         <br><br>
         <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
         </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -27,10 +41,5 @@
             },
         },
     }
+  }
 </script>
-
-<style scoped>
-.help {
-    padding: 1em;
-}
-</style>

src/views/Home.vue

@@ -38,7 +38,11 @@
     <div>
       <p id="title"><b>COVID</b>assist</p>
       <p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
-      <router-link style="text-decoration:none" to="/warning"><button>Infektionsrisiko ermitteln</button></router-link> 
+      <div class="button-wrapper">
+        <router-link style="text-decoration:none" to="/warning">
+          <button>Infektionsrisiko ermitteln</button>
+        </router-link> 
+      </div>
     </div>
 
     <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>

src/views/Questionnaire.vue

@@ -36,15 +36,10 @@
         justify-content: center;
     }
     .point {
-        font-family: sans-serif;
-        padding: 0.1em 0 0 0;
         margin: 0.2em;
         width: 0.5em;
         height: 0.5em;
         border-radius: 50%;
-        font-size: 0.9em;
-        color: #000000;
-        text-align: center;
         background: transparent;
         border: 2px solid #23286b;
         user-select: none;

src/views/Warning.vue

@@ -24,6 +24,8 @@
         Bereitschaftsdienst unter 116117 an.
       </p>
     </div>
+    <div class="button-wrapper">
     <router-link style="text-decoration:none" to="/questionnaire/0"><button>Ich möchte weiter zum Test</button></router-link>
     </div>
+  </div>
 </template>