Moved back button to the top of the questionnaire

Set cursor mode to pointer when hovering over buttons
This commit is contained in:
Tim Ktitarev 2020-03-22 15:17:09 +01:00
parent 20982f8454
commit cbb34e28ce
3 changed files with 71 additions and 72 deletions

View file

@ -1,18 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'COVIDassist',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View file

@ -8,12 +8,51 @@
margin-bottom: 5%;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 1em;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2.5em;
height: 2.5em;
background: #e94a47;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 2.5em;
height: 2.5em;
background: #e94a47;
cursor: pointer;
}
/*.bottom-aligned {
position: absolute;
left: 0;
right: 0;
bottom: 0;
border: 1px solid black;
}*/
</style>
<template>
<div class="question">
<p>{{ question }}</p>
<div class="buttons">
<div class="button-wrapper bottom-aligned">
<div v-if="type === 'yesno'" class="question-choice">
<button v-on:click="$store.commit('nextQuestion')">Ja</button>
<button v-on:click="$store.commit('nextQuestion')">Nein</button>
@ -28,7 +67,6 @@
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div>
<router-link v-bind:to="'/questionnaire/help/' + $route.params.id" 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>
@ -62,14 +100,8 @@
else {
router.push('/results')
}
},
goBack() {
if (this.$route.params.id > 0) {
const previousQuestion = parseInt(this.$route.params.id) - 1
this.$router.push("/questionnaire/" + previousQuestion)
}
},
},
mounted () {
document.addEventListener("backbutton", this.goBack, false);
},
@ -78,43 +110,3 @@
}
}
</script>
<style scoped>
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 1em;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2.5em;
height: 2.5em;
background: #e94a47;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 2.5em;
height: 2.5em;
background: #e94a47;
cursor: pointer;
}
.buttons {
position: absolute;
bottom: 0;
padding: 1em;
}
</style>

View file

@ -1,8 +1,12 @@
<template>
<div class="questionmaire">
<img id="back-button" v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" src="../assets/arrow-circle-left-outline.svg">
<div id="status-bar-wrapper">
<div class="progress">
<div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
</div>
</div>
<Question
v-bind:type="$store.state.questions[$route.params.id].type"
v-bind:question="$store.state.questions[$route.params.id].question"
@ -22,19 +26,41 @@
} else {
return "point"
}
},
goBack() {
if (this.$route.params.id > 0) {
const previousQuestion = parseInt(this.$route.params.id) - 1
this.$router.push("/questionnaire/" + previousQuestion)
}
}
},
}
</script>
<style scoped>
#back-button {
position: absolute;
margin-left: 2%;
width: 2.5em;
float: left;
}
#status-bar-wrapper {
display: block;
flex-direction: row;
/* if this transparent border gets removed, the progress bar isn't centered anymore */
border: 1px solid transparent;
}
.progress {
margin-top: 1em;
margin-top: 0.7em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.point {
margin: 0.2em;
width: 0.5em;
@ -43,10 +69,9 @@
background: transparent;
border: 2px solid #23286b;
user-select: none;
cursor: pointer;
}
.point.answered {
background-color: #23286b;
}
</style>