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

improved results page, improved styling

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-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 1.35em;
font-size: 24px;
}
</style>

4
src/views/HelpPage.vue
View File

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

38
src/views/Results.vue
View File

@ -1,6 +1,21 @@
<template>
<div>
<div class="results">
<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>
</template>
@ -20,5 +35,24 @@
</script>
<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>