Added desktop-friendly view

This commit is contained in:
Tim Ktitarev 2020-03-22 19:01:06 +01:00
parent 19e0936a6b
commit 0877b4e30a
5 changed files with 47 additions and 2 deletions

View file

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

View file

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

View file

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

View file

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

View file

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