feat: Modification du design
This commit is contained in:
parent
879eb1c51a
commit
58a6da1d94
|
|
@ -2,6 +2,10 @@
|
|||
|
||||
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
|
||||
|
||||
[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).
|
||||
|
|
|
|||
|
|
@ -47,12 +47,27 @@ async function fetchData() {
|
|||
const url = `/items/scores?${fields
|
||||
.map((item) => `fields[]=${item}`)
|
||||
.join("&")}`;
|
||||
const data = (await fetchJSONApi(url)).data;
|
||||
await fs.writeFile("./src/data.json", JSON.stringify(data), "utf8");
|
||||
const scores = (await fetchJSONApi(url)).data;
|
||||
await fs.writeFile("./src/data.json", JSON.stringify(scores), "utf8");
|
||||
|
||||
const folder = "public/answers";
|
||||
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 answer of question.questions_id.answers) {
|
||||
const uuid = answer.answers_id.image;
|
||||
|
|
|
|||
|
|
@ -12,21 +12,35 @@
|
|||
|
||||
/* semantic color variables for this project */
|
||||
:root, body.theme-light {
|
||||
--color-header-background: var(--color-green);
|
||||
--color-header-text: var(--color-white);
|
||||
--color-background: var(--color-white);
|
||||
--color-text: var(--color-black);
|
||||
--color-highlight: var(--color-green);
|
||||
--header-size: var(--header-size-small);
|
||||
--color-highlight-background: var(--color-green);
|
||||
--color-highlight-text: var(--color-white);
|
||||
--color-highlight-text-invert: var(--color-black);
|
||||
--header-size: var(--header-size-small)
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
--color-header-background: var(--color-green);
|
||||
--color-header-text: var(--color-black);
|
||||
--color-background: var(--color-black);
|
||||
--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) {
|
||||
:root {
|
||||
--color-header-background: var(--color-green);
|
||||
--color-header-text: var(--color-black);
|
||||
--color-background: var(--color-black);
|
||||
--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;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
|
|
|
|||
|
|
@ -30,54 +30,120 @@ 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 +153,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 +173,6 @@ input[type=radio]
|
|||
.main
|
||||
flex-direction: row
|
||||
|
||||
.bottom
|
||||
.images
|
||||
max-width: 50%
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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,34 @@ 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 +195,8 @@ function nextQuestion() {
|
|||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.center
|
||||
text-align: center
|
||||
.noscore
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
|
@ -205,7 +221,6 @@ function nextQuestion() {
|
|||
|
||||
|
||||
.splide__slide
|
||||
background: transparent
|
||||
position: relative
|
||||
padding: 1rem
|
||||
|
||||
|
|
@ -222,42 +237,77 @@ label
|
|||
padding: .3rem
|
||||
|
||||
.latest
|
||||
background-color: var(--color-green)
|
||||
color: var(--color-black)
|
||||
background-color: var(--color-highlight-background)
|
||||
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
|
||||
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
|
||||
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
|
||||
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 var(--color-highlight-text)
|
||||
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
|
||||
text-shadow: none
|
||||
|
||||
.splide__arrows
|
||||
position: inherit
|
||||
|
|
|
|||
|
|
@ -20,11 +20,12 @@ defineProps({
|
|||
header {
|
||||
height: var(--header-size);
|
||||
position: fixed;
|
||||
background: var(--color-green);
|
||||
background: var(--color-header-background);
|
||||
color: var(--color-header-text);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-bottom: 1px solid var(--color-text);
|
||||
border-bottom: 1px solid var(--color-header-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
|
@ -39,14 +40,14 @@ a {
|
|||
align-items: center;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-right: 1px solid var(--color-text);
|
||||
border-right: 1px solid var(--color-header-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
color: var(--color-text);
|
||||
color: var(--color-header-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -27,37 +27,117 @@ 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>
|
||||
<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").title
|
||||
}}</router-link>
|
||||
</li>
|
||||
<template v-for="(score, index) in scores" :key="score.id">
|
||||
<li v-if="index % 2 === 0">
|
||||
<img height="200" :src="`/answers/${score.image}.webp`" />
|
||||
</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>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -70,8 +150,9 @@ header
|
|||
display: flex
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
border-bottom: 2px solid var(--color-text)
|
||||
background: var(--color-green)
|
||||
border-bottom: 2px solid var(--color-header-text)
|
||||
color: var(--color-header-text)
|
||||
background: var(--color-header-background)
|
||||
|
||||
h1
|
||||
text-align: center
|
||||
|
|
@ -83,6 +164,8 @@ header
|
|||
list-style: none
|
||||
text-align: center
|
||||
font-size: 1.5rem
|
||||
width: 1.5rem
|
||||
height: 2rem
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
|
@ -99,62 +182,31 @@ main
|
|||
justify-content: center
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
background-color: var(--color-highlight)
|
||||
background-color: var(--color-background)
|
||||
|
||||
.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
|
||||
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
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
max-width: 404px
|
||||
|
||||
li
|
||||
display: none
|
||||
height: 202px
|
||||
width: 202px
|
||||
max-width: 50%
|
||||
border: 1px solid var(--color-green)
|
||||
|
||||
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%
|
||||
img
|
||||
border: 2px solid var(--color-background)
|
||||
max-width: 100%
|
||||
|
||||
a
|
||||
color: var(--color-text)
|
||||
font-size: 2rem
|
||||
color: var(--color-green)
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -162,4 +214,5 @@ main
|
|||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
padding: 1rem
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue