From 1f14255b28f9c82e7f40c85435b889e14d53bc91 Mon Sep 17 00:00:00 2001
From: Tim Ktitarev <tim.ktitarev@online.de>
Date: Sun, 22 Mar 2020 19:58:53 +0100
Subject: [PATCH] Adjusted size of status bar and text for small devices (for
 example an iPhone 5)

---
 src/App.vue                 | 30 ++++++++++++++++-------
 src/components/Question.vue |  8 -------
 src/views/HelpPage.vue      | 14 +++++------
 src/views/Questionnaire.vue | 48 ++++++++++++++++++++++++++++++-------
 4 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7986880..88ee614 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -84,6 +84,28 @@
     background-color: #E94A47;
   }
 
+
+  /* slightly smaller font for very small devices */
+  @media screen and (max-width: 330px) {      
+      body {
+        font-size: 22px;
+      }
+      
+      button {
+        font-size: 0.8em;
+      }
+  }
+
+  /* regular font for devices wider than 330px */
+  @media screen and (min-width: 330px) {
+      body {
+        font-size: 24px;
+      }
+      
+      button {
+        font-size: 0.9em;
+      }
+  }
   /* div element used to center a button or multiple buttons */
   .button-wrapper {
     text-align: center;
@@ -98,13 +120,5 @@
     font-style: normal;
     font-weight: normal;
     line-height: 1.35em;
-    font-size: 24px;
-  }
-
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .5s;
-  }
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-    opacity: 0;
   }
 </style>
diff --git a/src/components/Question.vue b/src/components/Question.vue
index ec32091..eb1d067 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -39,14 +39,6 @@
         background: #e94a47;
         cursor: pointer;
     }
-
-    /*.bottom-aligned {
-        position: absolute;
-        left: 0;
-        right:    0;
-        bottom:   0;
-        border: 1px solid black;
-    }*/
 </style>
 
 <template>
diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue
index 61666bb..8b391ce 100644
--- a/src/views/HelpPage.vue
+++ b/src/views/HelpPage.vue
@@ -18,14 +18,14 @@
 </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 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>
 </template>
 
 <script>
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index b99760d..25ae854 100644
--- a/src/views/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -38,18 +38,51 @@
 </script>
 
 <style scoped>
-    @media screen and (min-width : 906px) {
-    .questionnaire {
-        width: 600px;
-        margin-left: auto;
-        margin-right: auto;
+
+    /* set the applications app to 600 when viewed on desktop (width more than 906) */
+    @media screen and (min-width: 906px) {
+        .questionnaire {
+            width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    /* adjust the status bar for very thin devices (for example iPhone 5) */
+    @media screen and (max-width: 330px) {
+        .progress {
+            margin-top: 0.5em;
+        }
+
+        .point {
+            width: 0.35em;
+            height: 0.35em;
+        }
+        
+        #back-button {
+            width: 2em;
+        }
+    }
+
+    /* regular status bar for devices wider than 330px */
+    @media screen and (min-width: 330px) {
+        .progress {
+            margin-top: 0.7em;
+        }
+
+        .point {
+            width: 0.5em;
+            height: 0.5em;
+        }
+
+        #back-button {
+            width: 2.5em;
         }
     }
 
     #back-button {
         position: absolute;
         margin-left: 2%;
-        width: 2.5em;
         float: left;
 
     }
@@ -62,7 +95,6 @@
     }
 
     .progress {
-        margin-top: 0.7em;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
@@ -71,8 +103,6 @@
 
     .point {
         margin: 0.2em;
-        width: 0.5em;
-        height: 0.5em;
         border-radius: 50%;
         background: transparent;
         border: 2px solid #23286b;