feat: add frontend

frontend/components/QuizAxeDetails.vue

@@ -0,0 +1,99 @@
+<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>