From 35d53aaf4a769eb73086553d860637d242e3a2e3 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Mon, 24 Apr 2023 23:15:13 +0200
Subject: [PATCH] feat: Modification du design

---
 src/assets/base.css           |   4 ++
 src/components/Question.vue   | 126 ++++++++++++++++++++++++++--------
 src/components/Score.vue      | 110 ++++++++++++++++++++---------
 src/components/ScoresList.vue |  16 +++--
 4 files changed, 190 insertions(+), 66 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 5bd4f85..1ed575c 100644
--- a/src/assets/base.css
+++ b/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);
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 658c470..1e9a051 100644
--- a/src/components/Question.vue
+++ b/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>
diff --git a/src/components/Score.vue b/src/components/Score.vue
index c79eea6..809276e 100644
--- a/src/components/Score.vue
+++ b/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>
 
@@ -132,23 +135,29 @@ function nextQuestion() {
         @nextQuestion="nextQuestion"
       />
     </SplideSlide>
-    <SplideSlide class="latest">
+    <SplideSlide class="latest" id="details">
       <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>
-        <div class="gradient">
-          <div
-            v-for="(item, index) in [...Array(7).keys()]"
-            :class="{ active: result && result.pde_qtra === index + 1 }"
-            :key="item"
-          >
-            {{ index + 1 }}
+        <div>
+          <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()]"
+              :class="{ active: result && result.pde_qtra === index + 1 }"
+              :key="item"
+            >
+              {{ 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>
+          <button>Partager</button>
         </div>
       </template>
       <template v-else>
@@ -181,6 +190,8 @@ function nextQuestion() {
 </template>
 
 <style lang="sass" scoped>
+.center
+  text-align: center
 .noscore
   display: flex
   justify-content: center
@@ -205,7 +216,8 @@ function nextQuestion() {
 
 
 .splide__slide
-  background: transparent
+  background: white
+  color: black
   position: relative
   padding: 1rem
 
@@ -223,40 +235,72 @@ label
 
 .latest
   background-color: var(--color-green)
-  color: var(--color-black)
+  color: var(--color-white)
+  text-align: center
+  display: flex
+  align-items: center
+
+  h2
+    font-size: 2rem
+    font-weight: bold
+    & + h2
+      line-height: 2rem
+      font-size: 2.6rem
+
+  ul
+    text-align: left
+    padding-left: 1.5rem
+    list-style-type: disc
+
+  p, li
+    color: black
+
+  .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
diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue
index 5906a66..5ccac5a 100644
--- a/src/components/ScoresList.vue
+++ b/src/components/ScoresList.vue
@@ -27,27 +27,31 @@ function getTranslation(translations, key) {
         @click="store.switchTheme"
         title="Thème de votre système"
       >
-        🌓
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFD983" d="M18 0v36c9.941 0 18-8.059 18-18S27.941 0 18 0z"/><path fill="#66757F" d="M0 18c0 9.941 8.059 18 18 18V0C8.059 0 0 8.059 0 18z"/><circle fill="#FFCC4D" cx="25.5" cy="8.5" r="3.5"/><circle fill="#5B6876" cx="12" cy="16" r="3"/><circle fill="#5B6876" cx="13.5" cy="27.5" r="3.5"/><circle fill="#5B6876" cx="15" cy="6" r="2"/><circle fill="#FFCC4D" cx="33" cy="18" r="1"/><circle fill="#5B6876" cx="6" cy="9" r="1"/><circle fill="#FFCC4D" cx="21" cy="31" r="1"/><circle fill="#5B6876" cx="4" cy="19" r="2"/><circle fill="#FFCC4D" cx="26" cy="23" r="2"/></svg>
       </li>
       <li
         v-if="store.theme == 'dark'"
         @click="store.switchTheme"
         title="Thème sombre"
       >
-        🌑
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle fill="#66757F" cx="18" cy="18" r="18"/><g fill="#5B6876"><circle cx="10.5" cy="8.5" r="3.5"/><circle cx="20" cy="16" r="3"/><circle cx="21.5" cy="27.5" r="3.5"/><circle cx="21" cy="6" r="2"/><circle cx="3" cy="18" r="1"/><circle cx="30" cy="9" r="1"/><circle cx="15" cy="31" r="1"/><circle cx="32" cy="19" r="2"/><circle cx="10" cy="23" r="2"/></g></svg>
       </li>
       <li
         v-if="store.theme == 'light'"
         @click="store.switchTheme"
         title="Thème clair"
       >
-        🌞
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle fill="#FFD983" cx="18" cy="18" r="18"/><g fill="#FFCC4D"><circle cx="10.5" cy="8.5" r="3.5"/><circle cx="20" cy="17" r="3"/><circle cx="24.5" cy="28.5" r="3.5"/><circle cx="22" cy="5" r="2"/><circle cx="3" cy="18" r="1"/><circle cx="30" cy="9" r="1"/><circle cx="15" cy="31" r="1"/><circle cx="32" cy="19" r="2"/><circle cx="10" cy="23" r="2"/></g></svg>
       </li>
     </ul>
     <h1>Scores Ceiba</h1>
     <ul>
-      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li>
-      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
+      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#ED2939" d="M36 27c0 2.209-1.791 4-4 4h-8V5h8c2.209 0 4 1.791 4 4v18z"/><path fill="#002495" d="M4 5C1.791 5 0 6.791 0 9v18c0 2.209 1.791 4 4 4h8V5H4z"/><path fill="#EEE" d="M12 5h12v26H12z"/></svg>
+      </li>
+      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#B22334" d="M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z"/><path fill="#EEE" d="M.068 27.679c.017.093.036.186.059.277.026.101.058.198.092.296.089.259.197.509.333.743L.555 29h34.89l.002-.004c.135-.233.243-.483.332-.741.034-.099.067-.198.093-.301.023-.09.042-.182.059-.275.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9c0-.233.03-.457.068-.679C.028 8.542 0 8.767 0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297-.034.098-.066.196-.092.297zM18 9h18c0-.233-.028-.459-.069-.68-.017-.092-.035-.184-.059-.274-.027-.103-.059-.203-.094-.302-.089-.258-.197-.507-.332-.74.001-.001 0-.003-.001-.004H18v2z"/><path fill="#3C3B6E" d="M18 5H4C1.791 5 0 6.791 0 9v10h18V5z"/><path fill="#FFF" d="M2.001 7.726l.618.449-.236.725L3 8.452l.618.448-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449-.236.725.617-.448.618.448-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L5 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449-.236.725L7 8.452l.618.448-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448-.236-.725.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 11l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448-.236-.725.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 15l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 15l-.235.726z"/></svg>
+      </li>
     </ul>
   </header>
   <main>
@@ -83,6 +87,8 @@ header
     list-style: none
     text-align: center
     font-size: 1.5rem
+    width: 2rem
+    height: 2rem
 
     a
       text-decoration: none