From 0877b4e30ac4970858d34d34007f0f93c529dc71 Mon Sep 17 00:00:00 2001
From: Tim Ktitarev <tim.ktitarev@online.de>
Date: Sun, 22 Mar 2020 19:01:06 +0100
Subject: [PATCH] Added desktop-friendly view

---
 src/views/HelpPage.vue      |  8 ++++++++
 src/views/Home.vue          | 10 +++++++++-
 src/views/Questionnaire.vue | 11 ++++++++++-
 src/views/Results.vue       | 10 ++++++++++
 src/views/Warning.vue       | 10 ++++++++++
 5 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue
index 88fb5bc..dac58c5 100644
--- a/src/views/HelpPage.vue
+++ b/src/views/HelpPage.vue
@@ -3,6 +3,14 @@
     padding: 1em;
   }
 
+  @media screen and (min-width : 906px) {
+    .help {
+      width: 30%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  
   button {
       width: 80%;
       margin-bottom: 5%;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d423bc2..3c34b85 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,6 +5,14 @@
     justify-content: center;
     padding: 0.5em;
   }
+  
+  @media screen and (min-width : 906px) {
+    .home {
+      width: 30%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 
   #welcome-image {
     margin-left: auto;
@@ -45,7 +53,7 @@
       </div>
     </div>
 
-    <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>
+    <a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19 vom Robert-Koch-Institut</b></a>
   </div>
 </template>
 
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index ab8cca8..f25c872 100644
--- a/src/views/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="questionmaire">
+    <div class="questionnaire">
         <img id="back-button" v-if="$route.params.id != 0" v-on:click="goBack()" src="../assets/arrow-circle-left-outline.svg">
         <div id="status-bar-wrapper">
           <div class="progress">
@@ -38,6 +38,15 @@
 </script>
 
 <style scoped>
+    @media screen and (min-width : 906px) {
+    .questionnaire {
+        width: 30%;
+        margin-left: auto;
+        margin-right: auto;
+        }
+    }
+
+
     #back-button {
         position: absolute;
         margin-left: 2%;
diff --git a/src/views/Results.vue b/src/views/Results.vue
index a5347aa..58c590c 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -72,6 +72,16 @@
     .results {
         padding: 1em;
     }
+
+    @media screen and (min-width : 906px) {
+        .results {
+            width: 30%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+
     .card-advice {
         padding: 0.8em;
         border-radius: 0.8em;
diff --git a/src/views/Warning.vue b/src/views/Warning.vue
index d4f645e..0c1a328 100644
--- a/src/views/Warning.vue
+++ b/src/views/Warning.vue
@@ -6,6 +6,16 @@
     padding: 1em;
   }
 
+  
+  @media screen and (min-width : 906px) {
+    .warning {
+      width: 30%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+
   h1, p {
     display: block;
     margin-left: auto;