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; padding: 1em;
} }
@media screen and (min-width : 906px) {
.help {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
button { button {
width: 80%; width: 80%;
margin-bottom: 5%; margin-bottom: 5%;

View file

@ -5,6 +5,14 @@
justify-content: center; justify-content: center;
padding: 0.5em; padding: 0.5em;
} }
@media screen and (min-width : 906px) {
.home {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
#welcome-image { #welcome-image {
margin-left: auto; margin-left: auto;
@ -45,7 +53,7 @@
</div> </div>
</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> </div>
</template> </template>

View file

@ -1,5 +1,5 @@
<template> <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"> <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 id="status-bar-wrapper">
<div class="progress"> <div class="progress">
@ -38,6 +38,15 @@
</script> </script>
<style scoped> <style scoped>
@media screen and (min-width : 906px) {
.questionnaire {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
#back-button { #back-button {
position: absolute; position: absolute;
margin-left: 2%; margin-left: 2%;

View file

@ -72,6 +72,16 @@
.results { .results {
padding: 1em; padding: 1em;
} }
@media screen and (min-width : 906px) {
.results {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
.card-advice { .card-advice {
padding: 0.8em; padding: 0.8em;
border-radius: 0.8em; border-radius: 0.8em;

View file

@ -6,6 +6,16 @@
padding: 1em; padding: 1em;
} }
@media screen and (min-width : 906px) {
.warning {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
h1, p { h1, p {
display: block; display: block;
margin-left: auto; margin-left: auto;