corona-risikoabschaetzungs-app/covidassist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improved results page, improved styling

Browse source
This commit is contained in:
thilo 2020-03-21 23:12:37 +01:00
parent a7a44a847e
commit f57d083549
3 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -63,6 +63,7 @@
font-family: Zilla Slab; font-family: Zilla Slab;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 30px; line-height: 1.35em;
font-size: 24px;
} }
</style> </style>

4
src/views/HelpPage.vue
View file

@ -17,5 +17,7 @@
</script> </script>
<style scoped> <style scoped>
.help {
padding: 1em;
}
</style> </style>

38
src/views/Results.vue
View file

@ -1,6 +1,21 @@
<template> <template>
<div> <div class="results">
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p> <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
<p>Auf Folgendes sollten Sie achten:</p>
<div class="card-advice alert">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
</div>
<p>Hier können Sie sich noch verbessern:</p>
<div class="card-advice warning">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
</div>
<p>Das machen Sie schon gut:</p>
<div class="card-advice success">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
</div>
</div> </div>
</template> </template>
@ -20,5 +35,24 @@
</script> </script>
<style scoped> <style scoped>
.results {
padding: 1em;
}
.card-advice {
padding: 0.8em;
border-radius: 0.8em;
}
.card-advice .card-advice-title {
font-weight: bolder;
margin-bottom: 0.5em;
}
.card-advice.success {
background: rgba(98, 225, 96, 0.25);
}
.card-advice.warning {
background: rgba(255, 233, 36, 0.25);
}
.card-advice.alert {
background: rgba(233, 74, 71, 0.25);
}
</style> </style>