feat: Modification du design
continuous-integration/drone/push Build is passing Details
continuous-integration/drone Build is passing Details

This commit is contained in:
Simon 2023-04-24 23:15:13 +02:00
parent 879eb1c51a
commit 58a6da1d94
7 changed files with 343 additions and 128 deletions

View File

@ -2,6 +2,10 @@
Vous trouverez ici le code source de l'application de Scores de [Ceiba Conseil](https://www.ceiba-conseil.com/). Vous trouverez ici le code source de l'application de Scores de [Ceiba Conseil](https://www.ceiba-conseil.com/).
## Information
- Les emojis ont été pris depuis le site https://twemoji-cheatsheet.vercel.app/
## Recommended IDE Setup ## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin). [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).

View File

@ -47,12 +47,27 @@ async function fetchData() {
const url = `/items/scores?${fields const url = `/items/scores?${fields
.map((item) => `fields[]=${item}`) .map((item) => `fields[]=${item}`)
.join("&")}`; .join("&")}`;
const data = (await fetchJSONApi(url)).data; const scores = (await fetchJSONApi(url)).data;
await fs.writeFile("./src/data.json", JSON.stringify(data), "utf8"); await fs.writeFile("./src/data.json", JSON.stringify(scores), "utf8");
const folder = "public/answers"; const folder = "public/answers";
if (!existsSync(folder)) mkdirSync(folder); if (!existsSync(folder)) mkdirSync(folder);
for (const score of data) { for (const score of scores) {
const uuid_score = score.image;
if (uuid_score) {
console.log(`Score image : ${folder}/${uuid_score}`);
const response = await fetchAsset(uuid_score);
try {
const thumbnail = sharp().resize({ height: 200 }).webp();
await streamPipeline(
response.body,
thumbnail,
createWriteStream(`${folder}/${uuid_score}.webp`)
);
} catch (err) {
console.log(err);
}
}
for (const question of score.questions) { for (const question of score.questions) {
for (const answer of question.questions_id.answers) { for (const answer of question.questions_id.answers) {
const uuid = answer.answers_id.image; const uuid = answer.answers_id.image;

View File

@ -12,21 +12,35 @@
/* semantic color variables for this project */ /* semantic color variables for this project */
:root, body.theme-light { :root, body.theme-light {
--color-header-background: var(--color-green);
--color-header-text: var(--color-white);
--color-background: var(--color-white); --color-background: var(--color-white);
--color-text: var(--color-black); --color-text: var(--color-black);
--color-highlight: var(--color-green); --color-highlight-background: var(--color-green);
--header-size: var(--header-size-small); --color-highlight-text: var(--color-white);
--color-highlight-text-invert: var(--color-black);
--header-size: var(--header-size-small)
} }
body.theme-dark { body.theme-dark {
--color-header-background: var(--color-green);
--color-header-text: var(--color-black);
--color-background: var(--color-black); --color-background: var(--color-black);
--color-text: var(--color-white); --color-text: var(--color-white);
--color-highlight-background: var(--color-green);
--color-highlight-text: var(--color-black);
--color-highlight-text-invert: var(--color-white);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-header-background: var(--color-green);
--color-header-text: var(--color-black);
--color-background: var(--color-black); --color-background: var(--color-black);
--color-text: var(--color-white); --color-text: var(--color-white);
--color-highlight-background: var(--color-green);
--color-highlight-text: var(--color-black);
--color-highlight-text-invert: var(--color-white);
} }
} }
@ -51,6 +65,10 @@ html, body, #app {
padding: 0; padding: 0;
} }
#app {
min-width: 320px;
}
body { body {
color: var(--color-text); color: var(--color-text);
background: var(--color-background); background: var(--color-background);

View File

@ -30,54 +30,120 @@ function slideMove(splide, newIndex) {
<template> <template>
<div class="main"> <div class="main">
<div class="top"> <div class="center">
<legend>{{ question.title }}</legend> <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"> <template v-if="question.answers">
<div class="choice" v-for="answer in question.answers" :key="answer.id"> <ul class="choices">
<label> <li
class="choice"
v-for="answer in question.answers"
:key="answer.id"
>
<input <input
type="radio" type="radio"
:data-answerId="answer.id" :data-answerId="answer.id"
:name="`question_${question.id}`" :name="`question_${question.id}`"
:id="`question_${question.id}_answer_${answer.id}`"
:value="answer.weight" :value="answer.weight"
v-model="answerWeight" v-model="answerWeight"
@change="selectAnswer(answer)" @change="selectAnswer(answer)"
@click="nextQuestion" @click="nextQuestion"
/> />
{{ answer.title }} <label :for="`question_${question.id}_answer_${answer.id}`">
</label> {{ answer.title }}
</div> </label>
</template> </li>
</div> </ul>
<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>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
<style lang="sass"> <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 .splide__pagination
bottom: -1.5em bottom: -1.5em
.splide__pagination__page
width: .7rem
height: .7rem
background: var(--color-green)
&.is-active
background: var(--color-green)
</style> </style>
<style lang="sass" scoped> <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 .main
height: 100% height: 100%
@ -87,11 +153,19 @@ input[type=radio]
justify-content: space-around justify-content: space-around
align-items: center align-items: center
.bottom .center
width: 100%
text-align: center
.images
margin: 3rem auto
width: 400px width: 400px
max-width: 100% max-width: 100%
min-width: 280px min-width: 280px
h2
font-size: 2rem
.answers .answers
text-align: center text-align: center
@ -99,6 +173,6 @@ input[type=radio]
.main .main
flex-direction: row flex-direction: row
.bottom .images
max-width: 50% max-width: 50%
</style> </style>

View File

@ -105,7 +105,10 @@ function answerSelected(question, answerWeight) {
} }
function nextQuestion() { function nextQuestion() {
setTimeout(() => slides.value.go(">"), 100); setTimeout(() => {
slides.value.go(">");
console.log(slides);
}, 100);
} }
</script> </script>
@ -132,23 +135,34 @@ function nextQuestion() {
@nextQuestion="nextQuestion" @nextQuestion="nextQuestion"
/> />
</SplideSlide> </SplideSlide>
<SplideSlide class="latest"> <SplideSlide class="latest" id="details">
<template v-if="displayScoreResult && result"> <template v-if="displayScoreResult && result">
<ul> <div>
<li>score : {{ scoreSum }}</li> <h2 class="center">Probabilité d'échec</h2>
<li>pde : {{ result.pde }}</li> <h2 class="center">{{ result.pde_qtra }}</h2>
<li>pde_qtra : {{ result.pde_qtra }}</li> <div class="gradient">
<li>effets : {{ result.effets }}</li> <div
<li>facteur : {{ result.facteur }}</li> v-for="(item, index) in [...Array(7).keys()]"
</ul> :class="{ active: result && result.pde_qtra === index + 1 }"
<div class="gradient"> :key="item"
<div >
v-for="(item, index) in [...Array(7).keys()]" {{ index + 1 }}
:class="{ active: result && result.pde_qtra === index + 1 }" </div>
: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> </div>
</template> </template>
<template v-else> <template v-else>
@ -181,6 +195,8 @@ function nextQuestion() {
</template> </template>
<style lang="sass" scoped> <style lang="sass" scoped>
.center
text-align: center
.noscore .noscore
display: flex display: flex
justify-content: center justify-content: center
@ -205,7 +221,6 @@ function nextQuestion() {
.splide__slide .splide__slide
background: transparent
position: relative position: relative
padding: 1rem padding: 1rem
@ -222,42 +237,77 @@ label
padding: .3rem padding: .3rem
.latest .latest
background-color: var(--color-green) background-color: var(--color-highlight-background)
color: var(--color-black) color: var(--color-highlight-text)
text-align: center
display: flex
align-items: center
justify-content: 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
.details
text-align: left
font-size: 1.1rem
border: 1px solid var(--color-highlight-text)
background: var(--color-text)
margin: 1rem
padding: 1rem
.gradient .gradient
width: calc(100% - 2rem)
padding: 0 1rem padding: 0 1rem
height: 3rem height: 3rem
background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green) background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
display: flex display: flex
margin: 2.5rem 0 margin: 2.5rem auto
align-items: center align-items: center
border-radius: 3px border-radius: 3px
position: absolute max-width: 30rem
bottom: 0 text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert)
color: var(--color-highlight-text)
div div
width: calc(100%/7) width: calc(100%/7)
text-align: center text-align: center
align-self: center align-self: center
font-weight: bold
.active .active
border: 1px solid black
border-radius: 3px
height: 200%
font-weight: bold
display: flex
align-items: center
justify-content: center
position: relative position: relative
&::before &:before
content: "PdE\AQTRA" content: ""
border: 1px solid var(--color-highlight-text)
border-radius: 3px
top: -2.8rem
bottom: -1.5rem
position: absolute position: absolute
font-size: .5rem width: 100%
top: 0 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 line-height: .7rem
text-shadow: none
.splide__arrows .splide__arrows
position: inherit position: inherit

View File

@ -20,11 +20,12 @@ defineProps({
header { header {
height: var(--header-size); height: var(--header-size);
position: fixed; position: fixed;
background: var(--color-green); background: var(--color-header-background);
color: var(--color-header-text);
width: 100%; width: 100%;
z-index: 1; z-index: 1;
top: 0; top: 0;
border-bottom: 1px solid var(--color-text); border-bottom: 1px solid var(--color-header-text);
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -39,14 +40,14 @@ a {
align-items: center; align-items: center;
text-align: center; text-align: center;
align-content: center; align-content: center;
border-right: 1px solid var(--color-text); border-right: 1px solid var(--color-header-text);
text-decoration: none; text-decoration: none;
} }
p { p {
margin: 0 auto; margin: 0 auto;
font-size: 2rem; font-size: 2rem;
color: var(--color-text); color: var(--color-header-text);
} }
h1 { h1 {

View File

@ -27,37 +27,117 @@ function getTranslation(translations, key) {
@click="store.switchTheme" @click="store.switchTheme"
title="Thème de votre système" 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>
<li <li
v-if="store.theme == 'dark'" v-if="store.theme == 'dark'"
@click="store.switchTheme" @click="store.switchTheme"
title="Thème sombre" 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>
<li <li
v-if="store.theme == 'light'" v-if="store.theme == 'light'"
@click="store.switchTheme" @click="store.switchTheme"
title="Thème clair" 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> </li>
</ul> </ul>
<h1>Scores Ceiba</h1> <h1>Scores Ceiba</h1>
<ul> <ul>
<li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li> <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">
<li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li> <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> </ul>
</header> </header>
<main> <main>
<div class="container" v-if="scores"> <div class="container" v-if="scores">
<ul> <ul>
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`"> <template v-for="(score, index) in scores" :key="score.id">
<router-link :to="{ name: 'score', params: { id: score.id } }">{{ <li v-if="index % 2 === 0">
getTranslation(score.translations, "languages_id").title <img height="200" :src="`/answers/${score.image}.webp`" />
}}</router-link> </li>
</li> <li>
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
getTranslation(score.translations, "languages_id").title
}}</router-link>
</li>
<li v-if="index % 2 !== 0">
<img height="200" :src="`/answers/${score.image}.webp`" />
</li>
</template>
</ul> </ul>
</div> </div>
</main> </main>
@ -70,8 +150,9 @@ header
display: flex display: flex
justify-content: space-around justify-content: space-around
align-items: center align-items: center
border-bottom: 2px solid var(--color-text) border-bottom: 2px solid var(--color-header-text)
background: var(--color-green) color: var(--color-header-text)
background: var(--color-header-background)
h1 h1
text-align: center text-align: center
@ -83,6 +164,8 @@ header
list-style: none list-style: none
text-align: center text-align: center
font-size: 1.5rem font-size: 1.5rem
width: 1.5rem
height: 2rem
a a
text-decoration: none text-decoration: none
@ -99,62 +182,31 @@ main
justify-content: center justify-content: center
align-items: center align-items: center
overflow: hidden overflow: hidden
background-color: var(--color-highlight) background-color: var(--color-background)
.container .container
position: relative
width: 100%
max-width: 440px
max-height: 100%
padding-top: calc(100% / (724 / 1136))
@media only screen and (min-width: 472px)
padding-top: 0
width: 440px
height: calc(440px * 1136 / 724)
ul ul
margin: 0 margin: 0
padding: 0 padding: 0
list-style: none list-style: none
display: flex
position: absolute flex-wrap: wrap
top: 0 justify-content: center
left: 0 max-width: 404px
bottom: 0
right: 0
background-image: url(/arbre.webp)
background-position: center
background-repeat: no-repeat
background-size: contain
border-radius: 10px
li li
display: none height: 202px
width: 202px
max-width: 50%
border: 1px solid var(--color-green)
background: rgba(0, 0, 0, .5) img
border-radius: 10px border: 2px solid var(--color-background)
position: absolute max-width: 100%
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 a
color: var(--color-text) font-size: 2rem
color: var(--color-green)
display: block display: block
width: 100% width: 100%
height: 100% height: 100%
@ -162,4 +214,5 @@ main
align-items: center align-items: center
justify-content: center justify-content: center
text-align: center text-align: center
padding: 1rem
</style> </style>