Adjusted size of status bar and text for small devices (for example an iPhone 5)

This commit is contained in:
Tim Ktitarev 2020-03-22 20:10:25 +01:00
parent b3b8a10d92
commit cfab901f09
5 changed files with 68 additions and 32 deletions

View file

@ -87,6 +87,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;
@ -101,13 +123,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>

View file

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

View file

@ -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>

View file

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

View file

@ -38,18 +38,50 @@
</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 +94,6 @@
}
.progress {
margin-top: 0.7em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -71,8 +102,6 @@
.point {
margin: 0.2em;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: transparent;
border: 2px solid #23286b;