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

Updated CSS to work on phones

Browse source 
Homescreen adjusted
Warning adjusted
Question component (not Questionnaire) adjusted
Fixed questionmaire typo
This commit is contained in:
Tim Ktitarev 2020-03-21 21:48:37 +01:00
parent de12ea3f4b
commit fecbba5b0b
8 changed files with 108 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/App.vue
View file

@ -9,9 +9,13 @@
</template>
<style>
/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
h1 {
font-size: 1.2em;
line-height: 1em;
color: #23286B;
}
img {
@ -27,17 +31,25 @@
color: #2779E1;
}
p {
color: #333333;
}
button {
background: #23286B;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color: #FFFFFF;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
border-radius: 15px;
padding: 0.4em 1.4em;
margin-left: 5%;
margin-right: 5%;
border: none;
font-family: Open Sans,sans-serif;
font-style: normal;
font-weight: normal;
font-size: 1em;
padding: 0.7em 1em;
color: #FFFFFF;
font-size: 0.9em;
}
button.alert {

BIN
src/assets/welcome.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 46 KiB

21
src/components/Question.vue
View file

@ -1,8 +1,24 @@
<style scoped>
.question {
padding: 0.5em;
}
button {
display: block;
width: 80%;
margin: 0 auto;
margin-bottom: 5%;
}
</style>
<template>
<div class="question">
<p>{{ question }}</p>
<button v-bind:key="answer" v-for="answer in answers">{{ answer }}</button>
<router-link to="/questionmaire"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<router-link style="text-decoration:none" to="/questionnaire">
<button class="alert">Ich brauche Hilfe zu dieser Frage</button>
</router-link>
</div>
</template>
@ -16,6 +32,3 @@
}
</script>
<style scoped>
</style>

6
src/router/index.js
View file

@ -1,8 +1,8 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Warning from '../views/Warning'
import Questionnaire from "@/views/Questionnaire";
import Warning from '../views/Warning.vue'
import Questionnaire from "@/views/Questionnaire.vue";
Vue.use(VueRouter)
@ -18,7 +18,7 @@ const routes = [
component: Warning
},
{
path: '/questionmaire',
path: '/questionnaire',
name: 'Fragebogen',
component: Questionnaire
}

2
src/store/index.js
View file

@ -8,7 +8,7 @@ export default new Vuex.Store({
currentQuestion: 0,
answers: [],
questions: [{
question: "Test",
question: "Mit wie vielen Menschen haben Sie täglich Kontakt?",
answers: ["Answer 1", "Answer 2", "Answer 3"]
}]
},

58
src/views/Home.vue
View file

@ -1,12 +1,47 @@
<style scoped>
.home {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0.5em;
}
#welcome-image {
margin-left: auto;
margin-right: auto;
width: 85%;
}
p {
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
}
#information {
display: block;
margin: 0 auto;
padding: 5%;
font-size: 0.8em;
}
#title {
font-size: 1.2em;
color: #23286B;
}
</style>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/welcome.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<h1>COVIDassist</h1>
<p>Die COVID-19 Verhaltensdiagnose, die Ihre Daten respektiert.</p>
<router-link to="/warning"><button>Selbsttest starten</button></router-link>
<a href="/">Informationen zu COVID-19</a>
<small><a href="/">Imprint</a></small>
<img id="welcome-image" alt="Welcome" src="../assets/welcome.png">
<div>
<p id="title"><b>COVID</b>assist</p>
<p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
<router-link style="text-decoration:none" to="/warning"><button>Infektionsrisiko ermitteln</button></router-link>
</div>
<a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>
</div>
</template>
@ -21,12 +56,3 @@ export default {
}
}
</script>
<style>
.home {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0.5em;
}
</style>

2
src/views/Questionnaire.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="questionmaire">
<div class="questionnaire">
<Question v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
</div>

39
src/views/Warning.vue
View file

@ -1,16 +1,29 @@
<template>
<div class="about">
<h1>Warnhinweis</h1>
<p>Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps, wie Sie eine Infektion vermeiden können. Wenn Sie vermuten, dass Sie bereits infiziert sind, rufen Sie den ärztlichen Bereitschaftsdienst an:</p>
<p class="number">116117</p>
<router-link to="/questionmaire"><button>Fortfahren</button></router-link>
</div>
</template>
<style scoped>
.warning {
display: flex;
flex-flow: column;
justify-content: center;
padding: 1em;
}
<style>
.number {
font-family: sans-serif;
color: #E94A47;
font-size: 1.6em;
h1, p {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<template>
<div class="warning">
<div>
<h1>Hinweis</h1>
<p>
Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps,
wie Sie eine Infektion vermeiden können. Wenn Sie vermuten,
dass Sie bereits infiziert sind, rufen Sie den ärztlichen
Bereitschaftsdienst unter 116117 an.
</p>
</div>
<router-link style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
</div>
</template>