From b35961aceaeabcb85f0febf422c4ef261771c084 Mon Sep 17 00:00:00 2001
From: Tim Ktitarev <tim.ktitarev@online.de>
Date: Sun, 22 Mar 2020 13:06:42 +0100
Subject: [PATCH 1/2] Created a button-wrapper div to center buttons

---
 src/App.vue                 | 10 ++++++---
 src/components/Question.vue | 16 ++++++++------
 src/views/HelpPage.vue      | 42 +++++++++++++++++++++++--------------
 src/views/Home.vue          |  6 +++++-
 src/views/Warning.vue       |  6 +++++-
 5 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4576eeb..3ea3f01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,10 +61,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;
@@ -76,6 +74,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;
diff --git a/src/components/Question.vue b/src/components/Question.vue
index ed5d988..5ca5fcd 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -4,9 +4,7 @@
     }
 
     button {
-      display: block; 
       width: 80%;
-      margin: 0 auto;
       margin-bottom: 5%;
     }    
     
@@ -24,11 +22,17 @@
             <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
         </div>
         <div v-if="type === 'choice'" class="question-options">
-            <button v-bind:key="answer.text"
-                    v-for="answer in answers"
-                    v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
+            <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>
-        <router-link to="/questionnaire/help" 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>
 </template>
diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue
index c842949..e352687 100644
--- a/src/views/HelpPage.vue
+++ b/src/views/HelpPage.vue
@@ -1,23 +1,33 @@
+<style scoped>
+  .help {
+    padding: 1em;
+  }
+
+  button {
+      width: 80%;
+      margin-bottom: 5%;
+  }
+</style>
+
 <template>
-    <div class="help">
-        <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
-        <router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
-        <br><br>
-        <router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
+  <div class="help">
+    <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
+    <div class="button-wrapper">
+      <router-link to="/questionnaire">
+        <button>Zurück zur Frage</button>
+      </router-link>
+      <router-link to="/questionnaire">
+        <button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button>
+      </router-link>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "HelpPage",
-        props: {
-            text: String
-        }
+  export default {
+    name: "HelpPage",
+    props: {
+      text: String
     }
+  }
 </script>
-
-<style scoped>
-.help {
-    padding: 1em;
-}
-</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f7a2056..d423bc2 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/Warning.vue b/src/views/Warning.vue
index bdc9c4a..84d867c 100644
--- a/src/views/Warning.vue
+++ b/src/views/Warning.vue
@@ -24,6 +24,10 @@
         Bereitschaftsdienst unter 116117 an.
       </p>
     </div>
-    <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
+    <div class="button-wrapper">
+      <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire">
+        <button>Ich möchte weiter zum Test</button>
+      </router-link>
+    </div>
   </div>
 </template>

From f00165962e9a4efba6b8688e03231a31285ca2c0 Mon Sep 17 00:00:00 2001
From: Tim Ktitarev <tim.ktitarev@online.de>
Date: Sun, 22 Mar 2020 13:17:09 +0100
Subject: [PATCH 2/2] Fixed circles in the status bar Removed rectangle
 feedback box when tapping something on a mobile device

---
 src/App.vue                 | 6 ++++++
 src/views/Questionnaire.vue | 5 -----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3ea3f01..6ca0cc6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,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;
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index 03e4628..29b76b6 100644
--- a/src/views/Questionnaire.vue
+++ b/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;