Merge remote-tracking branch 'origin/master'

This commit is contained in:
thilo 2020-03-22 20:18:21 +01:00
commit 6b03aae434
5 changed files with 68 additions and 32 deletions

View File

@ -100,6 +100,28 @@
background-color: #E94A47; 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 */ /* div element used to center a button or multiple buttons */
.button-wrapper { .button-wrapper {
text-align: center; text-align: center;
@ -114,13 +136,5 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 1.35em; 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> </style>

View File

@ -39,14 +39,6 @@
background: #e94a47; background: #e94a47;
cursor: pointer; cursor: pointer;
} }
/*.bottom-aligned {
position: absolute;
left: 0;
right: 0;
bottom: 0;
border: 1px solid black;
}*/
</style> </style>
<template> <template>

View File

@ -18,14 +18,14 @@
</style> </style>
<template> <template>
<div class="help"> <div class="help">
<p>{{ $store.state.questions[$route.params.id].description }}</p> <p>{{ $store.state.questions[$route.params.id].description }}</p>
<div class="button-wrapper"> <div class="button-wrapper">
<router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link> <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
<br><br> <br><br>
<button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button> <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>

View File

@ -32,6 +32,7 @@
margin: 0 auto; margin: 0 auto;
padding: 5%; padding: 5%;
font-size: 0.8em; font-size: 0.8em;
text-align: center;
} }
#title { #title {

View File

@ -38,18 +38,50 @@
</script> </script>
<style scoped> <style scoped>
@media screen and (min-width : 906px) { /* set the applications app to 600 when viewed on desktop (width more than 906) */
.questionnaire { @media screen and (min-width: 906px) {
width: 600px; .questionnaire {
margin-left: auto; width: 600px;
margin-right: auto; 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 { #back-button {
position: absolute; position: absolute;
margin-left: 2%; margin-left: 2%;
width: 2.5em;
float: left; float: left;
} }
@ -62,7 +94,6 @@
} }
.progress { .progress {
margin-top: 0.7em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -71,8 +102,6 @@
.point { .point {
margin: 0.2em; margin: 0.2em;
width: 0.5em;
height: 0.5em;
border-radius: 50%; border-radius: 50%;
background: transparent; background: transparent;
border: 2px solid #23286b; border: 2px solid #23286b;