feat: Ajout de la traduction par défaut
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
5b990d98cc
commit
107425427b
|
|
@ -32,12 +32,11 @@ function formatAnswers(answers) {
|
|||
);
|
||||
return {
|
||||
id: answer.id,
|
||||
title: translation.length > 0 ? translation[0].title : "",
|
||||
title: translation.length > 0 ? translation[0].title : answer.title,
|
||||
weight: answer.weight,
|
||||
image: answer.image,
|
||||
};
|
||||
})
|
||||
.filter((answer) => answer.title);
|
||||
}
|
||||
|
||||
function formatScore(score) {
|
||||
|
|
@ -51,12 +50,11 @@ function formatScore(score) {
|
|||
return {
|
||||
id: question.id,
|
||||
weight: answers[0].weight,
|
||||
title: translation.length > 0 ? translation[0].title : "",
|
||||
title: translation.length > 0 ? translation[0].title : question.title,
|
||||
answers: answers,
|
||||
splide: ref(),
|
||||
};
|
||||
})
|
||||
.filter((question) => question.title);
|
||||
}
|
||||
|
||||
const title = score ? score.title : "";
|
||||
|
|
|
|||
|
|
@ -3,33 +3,39 @@ import data from "@/data.json";
|
|||
import { useStore } from "@/stores";
|
||||
|
||||
const store = useStore();
|
||||
const language = store.language;
|
||||
|
||||
const translationKey = "languages_id";
|
||||
const scores = data.filter((score) => {
|
||||
return (
|
||||
!!score.translations.find(
|
||||
(translation) => translation[translationKey] == language
|
||||
(translation) => translation[translationKey] == store.language
|
||||
) &&
|
||||
score.results.length &&
|
||||
score.questions.length
|
||||
);
|
||||
});
|
||||
function getTranslation(translations, key) {
|
||||
return translations.find((translation) => translation[key] == language);
|
||||
return translations.find((translation) => translation[key] == store.language);
|
||||
}
|
||||
function changeLanguage() {
|
||||
store.changeLanguage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
<ul>
|
||||
<li v-if="store.language == 'en-US'" @click="changeLanguage">🇫🇷</li>
|
||||
<li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container" v-if="scores">
|
||||
<ul>
|
||||
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
|
||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||
getTranslation(score.translations, "languages_id").title1
|
||||
getTranslation(score.translations, "languages_id").title
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -42,7 +48,7 @@ header
|
|||
height: var(--header-size)
|
||||
overflow: hidden
|
||||
display: flex
|
||||
justify-content: center
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
border-bottom: 2px solid var(--color-text)
|
||||
background: var(--color-green)
|
||||
|
|
@ -50,6 +56,20 @@ header
|
|||
h1
|
||||
text-align: center
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
text-align: center
|
||||
font-size: 1.5rem
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
.hidden
|
||||
display: none
|
||||
|
||||
|
||||
main
|
||||
width: 100%
|
||||
height: calc(100% - var(--header-size))
|
||||
|
|
@ -72,53 +92,53 @@ main
|
|||
width: 440px
|
||||
height: calc(440px * 1136 / 724)
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
bottom: 0
|
||||
right: 0
|
||||
|
||||
background-image: url(/arbre.webp)
|
||||
background-position: center
|
||||
background-repeat: no-repeat
|
||||
background-size: contain
|
||||
|
||||
border-radius: 10px
|
||||
|
||||
li
|
||||
display: none
|
||||
|
||||
background: rgba(0, 0, 0, .5)
|
||||
border-radius: 10px
|
||||
position: absolute
|
||||
border: 2px solid var(--color-text)
|
||||
top: 0
|
||||
left: 0
|
||||
bottom: 0
|
||||
right: 0
|
||||
|
||||
&#score_1
|
||||
background-image: url(/arbre.webp)
|
||||
background-position: center
|
||||
background-repeat: no-repeat
|
||||
background-size: contain
|
||||
|
||||
border-radius: 10px
|
||||
|
||||
li
|
||||
display: none
|
||||
|
||||
background: rgba(0, 0, 0, .5)
|
||||
border-radius: 10px
|
||||
position: absolute
|
||||
border: 2px solid var(--color-text)
|
||||
|
||||
&#score_1
|
||||
display: flex
|
||||
top: 40%
|
||||
bottom: 35%
|
||||
left: 20%
|
||||
right: 20%
|
||||
|
||||
&#score_6
|
||||
display: flex
|
||||
top: 72%
|
||||
bottom: 5%
|
||||
left: 6%
|
||||
right: 6%
|
||||
|
||||
a
|
||||
color: var(--color-text)
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
display: flex
|
||||
top: 40%
|
||||
bottom: 35%
|
||||
left: 20%
|
||||
right: 20%
|
||||
|
||||
&#score_6
|
||||
display: flex
|
||||
top: 72%
|
||||
bottom: 5%
|
||||
left: 6%
|
||||
right: 6%
|
||||
|
||||
a
|
||||
color: var(--color-text)
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,4 +8,9 @@ export const useStore = defineStore({
|
|||
persist: {
|
||||
enabled: true,
|
||||
},
|
||||
actions: {
|
||||
changeLanguage() {
|
||||
this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue