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

added conditional rendering of text blocks in Results

Browse source 
fixed button alignment in questions
This commit is contained in:
thilo 2020-03-22 13:43:57 +01:00
parent ece528b441
commit f065fa5852
2 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/Question.vue
View file

@ -15,21 +15,23 @@
<template> <template>
<div class="question"> <div class="question">
<p>{{ question }}</p> <p>{{ question }}</p>
<div v-if="type === 'yesno'" class="question-choice"> <div class="buttons">
<button v-on:click="$store.commit('nextQuestion')">Ja</button> <div v-if="type === 'yesno'" class="question-choice">
<button v-on:click="$store.commit('nextQuestion')">Nein</button> <button v-on:click="$store.commit('nextQuestion')">Ja</button>
<button v-on:click="$store.commit('nextQuestion')">Nein</button>
</div>
<div v-if="type === 'slider'" class="question-slider">
<p>{{ selection }}</p>
<input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
</div>
<div v-if="type === 'choice'" class="question-options">
<button v-bind:key="answer.text"
v-for="answer in answers"
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div>
<router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
</div> </div>
<div v-if="type === 'slider'" class="question-slider">
<p>{{ selection }}</p>
<input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
</div>
<div v-if="type === 'choice'" class="question-options">
<button v-bind:key="answer.text"
v-for="answer in answers"
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div>
<router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
</div> </div>
</template> </template>
@ -97,4 +99,9 @@
cursor: pointer; cursor: pointer;
} }
.buttons {
position: absolute;
bottom: 0;
padding: 1em;
}
</style> </style>

6
src/views/Results.vue
View file

@ -4,17 +4,17 @@
<p class="risk-chance alert" v-if="risk >= 66">hoch</p> <p class="risk-chance alert" v-if="risk >= 66">hoch</p>
<p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p> <p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p>
<p class="risk-chance success" v-if="risk < 33">niedrig</p> <p class="risk-chance success" v-if="risk < 33">niedrig</p>
<p>Auf Folgendes sollten Sie achten:</p> <p v-if="bad.length > 0">Auf Folgendes sollten Sie achten:</p>
<div v-for="card in bad" v-bind:key="card.description" class="card-advice alert"> <div v-for="card in bad" v-bind:key="card.description" class="card-advice alert">
<div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">{{ card.description }}</div> <div class="card-advice-description">{{ card.description }}</div>
</div> </div>
<p>Hier können Sie sich noch verbessern:</p> <p v-if="warning.length > 0">Hier können Sie sich noch verbessern:</p>
<div v-for="card in warning" v-bind:key="card.description" class="card-advice warning"> <div v-for="card in warning" v-bind:key="card.description" class="card-advice warning">
<div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">{{ card.description }}</div> <div class="card-advice-description">{{ card.description }}</div>
</div> </div>
<p>Das machen Sie schon gut:</p> <p v-if="good.length > 0">Das machen Sie schon gut:</p>
<div v-for="card in good" v-bind:key="card.description" class="card-advice success"> <div v-for="card in good" v-bind:key="card.description" class="card-advice success">
<div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">{{ card.description }}</div> <div class="card-advice-description">{{ card.description }}</div>