From 6ca8c1bdcf2630edb06903cbaafb66abcd87ebb5 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Wed, 21 Feb 2024 16:26:25 +0100
Subject: [PATCH] feat: Ajout du drapeau anglais

---
 src/components/Score.vue      |  2 +-
 src/components/ScoresList.vue | 75 ++++++++++++++++++++++-------------
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/components/Score.vue b/src/components/Score.vue
index 0f9daf9..d1ed63a 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -203,7 +203,7 @@ async function share() {
           </div>
           <div class="details">
             <p>{{ trad.result_params }} :</p>
-            <br>
+            <br />
             <ul>
               <li v-for="question in questions" :key="question.id">
                 {{ question.title }} :
diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue
index 04ddee6..ee3c75f 100644
--- a/src/components/ScoresList.vue
+++ b/src/components/ScoresList.vue
@@ -91,33 +91,33 @@ function getTranslation(translations, key) {
     <h1>Scores Ceiba</h1>
     <ul>
       <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
+          xmlns="http://www.w3.org/2000/svg"
+          id="flag-icons-fr"
+          viewBox="0 0 640 480"
+        >
+          <path fill="#fff" d="M0 0h640v480H0z" />
+          <path fill="#000091" d="M0 0h213.3v480H0z" />
+          <path fill="#e1000f" d="M426.7 0H640v480H426.7z" />
         </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" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          id="flag-icons-gb"
+          viewBox="0 0 640 480"
+        >
+          <path fill="#012169" d="M0 0h640v480H0z" />
           <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"
+            d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"
           />
+          <path
+            fill="#C8102E"
+            d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"
+          />
+          <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z" />
+          <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z" />
         </svg>
       </li>
     </ul>
@@ -127,17 +127,21 @@ function getTranslation(translations, key) {
     <div class="container" v-if="scores">
       <ul>
         <template v-for="(score, index) in scores" :key="score.id">
-          <li v-if="index % 2 === 0">
+          <li class="white" v-if="index % 2 === 0">
             <router-link :to="{ name: 'score', params: { id: score.id } }">
               <img height="200" :src="`/answers/${score.image}.webp`" />
             </router-link>
           </li>
           <li>
-            <router-link :to="{ name: 'score', params: { id: score.id } }" class="link">{{
-              getTranslation(score.translations, "languages_id").title
-            }}</router-link>
+            <router-link
+              :to="{ name: 'score', params: { id: score.id } }"
+              class="link"
+              >{{
+                getTranslation(score.translations, "languages_id").title
+              }}</router-link
+            >
           </li>
-          <li v-if="index % 2 !== 0">
+          <li class="white" v-if="index % 2 !== 0">
             <router-link :to="{ name: 'score', params: { id: score.id } }">
               <img height="200" :src="`/answers/${score.image}.webp`" />
             </router-link>
@@ -145,10 +149,25 @@ function getTranslation(translations, key) {
         </template>
       </ul>
     </div>
+    <footer>
+      <p v-if="store.language == 'fr-FR'">
+        Scores & Appli par <a href="ceiba-conseil.com">Ceiba</a>
+      </p>
+      <p v-if="store.language == 'en-US'">
+        Scores & App by <a href="ceiba-conseil.com">Ceiba</a>
+      </p>
+    </footer>
   </main>
 </template>
 
 <style lang="sass" scoped>
+footer
+  background: var(--color-header-background)
+  text-align: center
+  padding: 1rem
+  color: var(--color-header-text)
+  a
+    color: var(--color-header-text)
 header
   height: var(--header-size)
   overflow: hidden
@@ -218,10 +237,12 @@ main
       border: 1px solid var(--color-green)
 
     img
-      border: 2px solid var(--color-background)
       max-width: 100%
       object-fit: contain
 
+    .white
+      background: white
+
     a.link
       font-size: 2rem
       line-height: 2rem