Created a button-wrapper div to center buttons

This commit is contained in:
Tim Ktitarev 2020-03-22 13:06:42 +01:00
parent e9080ead15
commit b35961acea
5 changed files with 53 additions and 27 deletions

View File

@ -61,10 +61,8 @@
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;
padding: 0.4em 1.4em;
font-family: Open Sans,sans-serif;
font-style: normal;
@ -76,6 +74,12 @@
background-color: #E94A47;
}
/* div element used to center a button or multiple buttons */
.button-wrapper {
text-align: center;
margin: auto;
}
body {
background-color: #FCF7F8;
color: #0B2545;

View File

@ -4,9 +4,7 @@
}
button {
display: block;
width: 80%;
margin: 0 auto;
margin-bottom: 5%;
}
@ -24,11 +22,17 @@
<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 class="button-wrapper">
<button v-bind:key="answer.text"
v-for="answer in answers"
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div>
</div>
<div class="button-wrapper">
<router-link to="/questionnaire/help" style="text-decoration: none">
<button class="alert">Ich brauche Hilfe zu dieser Frage</button>
</router-link>
</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>
</template>

View File

@ -1,23 +1,33 @@
<style scoped>
.help {
padding: 1em;
}
button {
width: 80%;
margin-bottom: 5%;
}
</style>
<template>
<div class="help">
<p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
<router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
<br><br>
<router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
<div class="help">
<p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
<div class="button-wrapper">
<router-link to="/questionnaire">
<button>Zurück zur Frage</button>
</router-link>
<router-link to="/questionnaire">
<button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "HelpPage",
props: {
text: String
}
export default {
name: "HelpPage",
props: {
text: String
}
}
</script>
<style scoped>
.help {
padding: 1em;
}
</style>

View File

@ -38,7 +38,11 @@
<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 class="button-wrapper">
<router-link style="text-decoration:none" to="/warning">
<button>Infektionsrisiko ermitteln</button>
</router-link>
</div>
</div>
<a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>

View File

@ -24,6 +24,10 @@
Bereitschaftsdienst unter 116117 an.
</p>
</div>
<router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
<div class="button-wrapper">
<router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire">
<button>Ich möchte weiter zum Test</button>
</router-link>
</div>
</div>
</template>