feat: Modification du design

src/assets/base.css

@@ -51,6 +51,10 @@ html, body, #app {
   padding: 0;
 }
 
+#app {
+  min-width: 320px;
+}
+
 body {
   color: var(--color-text);
   background: var(--color-background);

src/components/Question.vue

@@ -30,54 +30,116 @@ function slideMove(splide, newIndex) {
 
 <template>
   <div class="main">
-    <div class="top">
+    <div class="center">
       <legend>{{ question.title }}</legend>
+
+      <div class="images">
+        <template v-if="question.answers">
+          <Splide
+            @splide:move="slideMove"
+            class="answers"
+            :id="`question_${question.id}`"
+            ref="slides"
+          >
+            <SplideSlide
+              v-for="answer in question.answers"
+              :key="answer.id"
+              @click="$emit('nextQuestion')"
+            >
+              <img height="200" :src="`/answers/${answer.image}.webp`" />
+            </SplideSlide>
+          </Splide>
+        </template>
+      </div>
+
       <template v-if="question.answers">
-        <div class="choice" v-for="answer in question.answers" :key="answer.id">
-          <label>
+        <ul class="choices">          
+          <li class="choice" v-for="answer in question.answers" :key="answer.id">
             <input
               type="radio"
               :data-answerId="answer.id"
               :name="`question_${question.id}`"
+              :id="`question_${question.id}_answer_${answer.id}`"
               :value="answer.weight"
               v-model="answerWeight"
               @change="selectAnswer(answer)"
               @click="nextQuestion"
             />
-            {{ answer.title }}
-          </label>
-        </div>
-      </template>
-    </div>
-    <div class="bottom">
-      <template v-if="question.answers">
-        <Splide
-          @splide:move="slideMove"
-          class="answers"
-          :id="`question_${question.id}`"
-          ref="slides"
-        >
-          <SplideSlide
-            v-for="answer in question.answers"
-            :key="answer.id"
-            @click="$emit('nextQuestion')"
-          >
-            <img height="200" :src="`/answers/${answer.image}.webp`" />
-          </SplideSlide>
-        </Splide>
+            <label :for="`question_${question.id}_answer_${answer.id}`">
+              {{ answer.title }}
+            </label>
+          </li>
+        </ul>
       </template>
     </div>
   </div>
 </template>
 
 <style lang="sass">
+.splide__arrow
+  background: transparent
+  border: 3px solid var(--color-green)
+  width: 3rem
+  height: 3rem
+  opacity: 1
+
+  svg
+    fill: var(--color-green)
+    height: 1.6rem
+    width: 1.6rem
 .splide__pagination
   bottom: -1.5em
+.splide__pagination__page
+  width: .7rem
+  height: .7rem
+  background: var(--color-green)
+
+  &.is-active
+    background: var(--color-green)
 </style>
 
 <style lang="sass" scoped>
-input[type=radio]
-  margin-right: .5rem
+
+legend
+  text-align: center
+  font-size: 1.4rem
+  line-height: 2rem
+  margin: 1rem
+
+.choices
+  list-style-type: none
+  text-align: left
+  display: inline-block
+  padding-left: 0
+
+  input[type=radio]
+    display: none
+
+    & + label
+      position: relative
+      padding-left: 2rem
+    & + label::before,
+    & + label::after
+      display: block
+      position: absolute
+      box-sizing: border-box
+      content:''
+      border-radius: 1rem
+    & + label::before
+      bottom: 0
+      left: 0
+      background-color: var(--color-green)
+      width: 1rem
+      height: 1rem
+    & + label::after
+      bottom: 3px
+      left: 3px
+      width: calc(1rem - 6px)
+      height: calc(1rem - 6px)
+    &:checked + label::before
+      background-color: white
+    &:checked + label::after
+      background-color: var(--color-green)
 
 .main
   height: 100%
@@ -87,11 +149,19 @@ input[type=radio]
   justify-content: space-around
   align-items: center
 
-  .bottom
+  .center
+    width: 100%
+    text-align: center
+
+  .images
+    margin: 3rem auto
     width: 400px
     max-width: 100%
     min-width: 280px
 
+  h2
+    font-size: 2rem
+
 .answers
   text-align: center
 
@@ -99,6 +169,6 @@ input[type=radio]
   .main
     flex-direction: row
 
-    .bottom
+    .images
       max-width: 50%
 </style>

src/components/Score.vue

@@ -105,7 +105,10 @@ function answerSelected(question, answerWeight) {
 }
 
 function nextQuestion() {
-  setTimeout(() => slides.value.go(">"), 100);
+  setTimeout(() => {
+    slides.value.go(">");
+    console.log(slides)
+  }, 100);
 }
 </script>
 
@@ -134,13 +137,8 @@ function nextQuestion() {
     </SplideSlide>
     <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
-        <ul>
-          <li>score : {{ scoreSum }}</li>
-          <li>pde : {{ result.pde }}</li>
-          <li>pde_qtra : {{ result.pde_qtra }}</li>
-          <li>effets : {{ result.effets }}</li>
-          <li>facteur : {{ result.facteur }}</li>
-        </ul>
+        <h2 class="center">Probabilité d'échec</h2>
+        <h2 class="center">{{ result.pde_qtra }}</h2>
         <div class="gradient">
           <div
             v-for="(item, index) in [...Array(7).keys()]"
@@ -150,6 +148,14 @@ function nextQuestion() {
             {{ index + 1 }}
           </div>
         </div>
+        <div class="details">
+          <p>Rappel des paramètres choisis :</p>
+          <ul>
+            <li v-for="question in questions" :key="question.id">
+              {{ question.title }} : {{ question.answers.find((answer) => answer.weight === question.weight).title }}
+            </li>
+          </ul>
+        </div>
       </template>
       <template v-else>
         <div class="noscore">
@@ -181,6 +187,8 @@ function nextQuestion() {
 </template>
 
 <style lang="sass" scoped>
+.center
+  text-align: center
 .noscore
   display: flex
   justify-content: center
@@ -205,7 +213,8 @@ function nextQuestion() {
 
 
 .splide__slide
-  background: transparent
+  background: white
+  color: black
   position: relative
   padding: 1rem
 
@@ -223,40 +232,64 @@ label
 
 .latest
   background-color: var(--color-green)
-  color: var(--color-black)
+  color: var(--color-white)
+  text-align: center
+
+  h2
+    font-size: 2rem
+    & + h2
+      line-height: 2rem
+      font-size: 2.6rem
+
+  ul
+    text-align: left
+
+  .details
+    text-align: left
+    display: inline-block
+    font-size: 1.1rem
 
 .gradient
-  width: calc(100% - 2rem)
   padding: 0 1rem
   height: 3rem
   background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
   display: flex
-  margin: 2.5rem 0
+  margin: 2.5rem auto
   align-items: center
   border-radius: 3px
-  position: absolute
-  bottom: 0
+  max-width: 30rem
+  color: var(--color-black)
 
   div
     width: calc(100%/7)
     text-align: center
     align-self: center
+    font-weight: bold
 
   .active
-    border: 1px solid black
-    border-radius: 3px
-    height: 200%
-    font-weight: bold
-    display: flex
-    align-items: center
-    justify-content: center
     position: relative
 
-    &::before
-      content: "PdE\AQTRA"
+    &:before
+      content: ""
+      border: 1px solid black
+      border-radius: 3px
+      top: -2.8rem
+      bottom: -1.5rem
       position: absolute
-      font-size: .5rem
-      top: 0
+      width: 100%
+      font-weight: bold
+      display: flex
+      align-items: center
+      justify-content: center
+
+    &::after
+      content: "PdE"
+      position: absolute
+      font-size: 1rem
+      top: -2rem
+      bottom: -1.5rem
+      left: 0
+      right: 0
       line-height: .7rem
 
 .splide__arrows