Updated CSS to work on phones

Homescreen adjusted
Warning adjusted
Question component (not Questionnaire) adjusted
Fixed questionmaire typo

src/App.vue

@@ -9,9 +9,13 @@
 </template>
 
 <style>
+  /* Import Open Sans from Google Fonts */
+  @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+  
   h1 {
     font-size: 1.2em;
     line-height: 1em;
+    color: #23286B;
   }
 
   img {
@@ -27,17 +31,25 @@
     color: #2779E1;
   }
 
+  p {
+    color: #333333;
+  }
+
   button {
     background: #23286B;
-    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
+    color: #FFFFFF;
-    border-radius: 20px;
+    
+    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;
+
     font-family: Open Sans,sans-serif;
     font-style: normal;
     font-weight: normal;
-    font-size: 1em;
+    font-size: 0.9em;
-    padding: 0.7em 1em;
-
-    color: #FFFFFF;
   }
 
   button.alert {

src/components/Question.vue

@@ -1,8 +1,24 @@
+<style scoped>
+    .question {
+      padding: 0.5em;
+    }
+
+    button {
+      display: block; 
+      width: 80%;
+      margin: 0 auto;
+      margin-bottom: 5%;
+    }    
+    
+</style>
+
 <template>
     <div class="question">
         <p>{{ question }}</p>
         <button v-bind:key="answer" v-for="answer in answers">{{ answer }}</button>
-        <router-link to="/questionmaire"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+        <router-link style="text-decoration:none" to="/questionnaire">
+          <button class="alert">Ich brauche Hilfe zu dieser Frage</button>
+        </router-link>
     </div>
 </template>
 
@@ -16,6 +32,3 @@
     }
 </script>
 
-<style scoped>
-
-</style>

src/router/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
-import Warning from '../views/Warning'
+import Warning from '../views/Warning.vue'
-import Questionnaire from "@/views/Questionnaire";
+import Questionnaire from "@/views/Questionnaire.vue";
 
 Vue.use(VueRouter)
 
@@ -18,7 +18,7 @@ const routes = [
     component: Warning
   },
   {
-    path: '/questionmaire',
+    path: '/questionnaire',
     name: 'Fragebogen',
     component: Questionnaire
   }

src/store/index.js

@@ -8,7 +8,7 @@ export default new Vuex.Store({
     currentQuestion: 0,
     answers: [],
     questions: [{
-      question: "Test",
+      question: "Mit wie vielen Menschen haben Sie täglich Kontakt?",
       answers: ["Answer 1", "Answer 2", "Answer 3"]
     }]
   },

src/views/Home.vue

@@ -1,12 +1,47 @@
+<style scoped>
+  .home {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    padding: 0.5em;
+  }
+
+  #welcome-image {
+    margin-left: auto;
+    margin-right: auto;
+    width: 85%;
+  }
+
+  p {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 85%;
+  }
+  
+  #information {
+    display: block;
+    margin: 0 auto;
+    padding: 5%;
+    font-size: 0.8em;
+  }
+
+  #title {
+    font-size: 1.2em;
+    color: #23286B;
+  }
+</style>
+
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/welcome.png">
+    <img id="welcome-image" alt="Welcome" src="../assets/welcome.png">
-    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+    <div>
-    <h1>COVIDassist</h1>
+      <p id="title"><b>COVID</b>assist</p>
-    <p>Die COVID-19 Verhaltensdiagnose, die Ihre Daten respektiert.</p>
+      <p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
-    <router-link to="/warning"><button>Selbsttest starten</button></router-link>
+      <router-link style="text-decoration:none" to="/warning"><button>Infektionsrisiko ermitteln</button></router-link> 
-    <a href="/">Informationen zu COVID-19</a>
+    </div>
-    <small><a href="/">Imprint</a></small>
+
+    <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>
   </div>
 </template>
 
@@ -21,12 +56,3 @@ export default {
   }
 }
 </script>
-
-<style>
-  .home {
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    padding: 0.5em;
-  }
-</style>

src/views/Questionnaire.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="questionmaire">
+    <div class="questionnaire">
         <Question v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
                   v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
     </div>

src/views/Warning.vue

@@ -1,16 +1,29 @@
-<template>
+<style scoped>
-  <div class="about">
+  .warning {
-    <h1>Warnhinweis</h1>
+    display: flex;
-    <p>Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps, wie Sie eine Infektion vermeiden können. Wenn Sie vermuten, dass Sie bereits infiziert sind, rufen Sie den ärztlichen Bereitschaftsdienst an:</p>
+    flex-flow: column;
-    <p class="number">116117</p>
+    justify-content: center;
-    <router-link to="/questionmaire"><button>Fortfahren</button></router-link>
+    padding: 1em;
-  </div>
+  }
-</template>
 
-<style>
+  h1, p {
-  .number {
+    display: block;
-    font-family: sans-serif;
+    margin-left: auto;
-    color: #E94A47;
+    margin-right: auto;
-    font-size: 1.6em;
   }
 </style>
+
+<template>
+  <div class="warning">
+    <div>
+      <h1>Hinweis</h1>
+      <p>
+        Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps, 
+        wie Sie eine Infektion vermeiden können. Wenn Sie vermuten, 
+        dass Sie bereits infiziert sind, rufen Sie den ärztlichen 
+        Bereitschaftsdienst unter 116117 an.
+      </p>
+    </div>
+    <router-link style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
+  </div>
+</template>