100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<section :style="cssVars" class="axe-details">
|
||
|
|
<h2 class="title">
|
||
|
|
<span><span class="upper">{{ axe.identifier }}</span><span>{{ axe.shortTitle }}</span></span>
|
||
|
|
<span class="upper">{{ score.scoreAvg | formatRate }} / 10</span>
|
||
|
|
</h2>
|
||
|
|
<div v-for="response in responses" :key="response._links.self.href">
|
||
|
|
<p class="question">
|
||
|
|
<span>
|
||
|
|
{{ response.question }}
|
||
|
|
</span>
|
||
|
|
<span class="note">{{ response.score }} / 10</span>
|
||
|
|
</p>
|
||
|
|
<p v-if="response.comment" class="comment">{{ response.comment }}</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import {Component, Prop, Vue} from "nuxt-property-decorator";
|
||
|
|
import {Axe} from "~/repositories/models/axe.model";
|
||
|
|
import {ResponseWithQuestion, Score} from "~/repositories/models/quiz.model";
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class QuizAxeDetails extends Vue {
|
||
|
|
|
||
|
|
@Prop({
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
public axe!: Axe;
|
||
|
|
|
||
|
|
@Prop({
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
})
|
||
|
|
public score!: Score;
|
||
|
|
|
||
|
|
@Prop({
|
||
|
|
type: Array
|
||
|
|
})
|
||
|
|
public responses!: ResponseWithQuestion[];
|
||
|
|
|
||
|
|
get cssVars() {
|
||
|
|
return {
|
||
|
|
'--color': this.axe ? this.axe.color : "#ffffff"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "assets/css/font";
|
||
|
|
@import "assets/css/color";
|
||
|
|
@import "assets/css/spacing";
|
||
|
|
|
||
|
|
.axe-details {
|
||
|
|
margin-top: $x_small;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: $tertiary-font-size;
|
||
|
|
font-weight: 700;
|
||
|
|
color: black;
|
||
|
|
border-bottom: 3px solid var(--color);
|
||
|
|
margin: $xx_small 0;
|
||
|
|
line-height: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title .upper {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title .upper:first-child {
|
||
|
|
margin-right: $xxx_small;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: black;
|
||
|
|
margin: $xx_small 0 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question .note {
|
||
|
|
color: var(--color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment {
|
||
|
|
font-size: $small-font-size;
|
||
|
|
margin: $xxx_small 0 1rem 0;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|