boussole-pluss/frontend/components/QuizAxeDetails.vue

<script lang="ts" setup>
import type {PropType} from "vue";
import type {QuizResponse} from "~/store/quiz";
import type {Axe} from "~/store/axe";

const props = defineProps({
  axe: {
    type: Object as PropType<Axe>,
    required: true
  },
  average: Number,
  responses: {
    type: Object as PropType<QuizResponse[]>,
    required: true
  }
});

const cssVars = computed(() => {
  return {
    '--color': props.axe ? props.axe.color : "#ffffff"
  }
});
</script>

<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">{{ Number((average).toFixed(1)) }} / 10</span>
    </h2>
    <div v-for="response in responses">
      <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>


<style lang="scss" scoped>
@import "assets/css/font";
@import "assets/css/color";
@import "assets/css/spacing";

.axe-details {
  margin-top: $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);
  white-space: nowrap;
}

.comment {
  font-size: $small-font-size;
  margin: $xxx_small 0 1rem 0;
  font-style: italic;
}

</style>