ceiba-scores/src/components/ScoresList.vue

166 lines
3.3 KiB
Vue
Raw Normal View History

2022-03-29 23:30:23 +02:00
<script setup>
import data from "@/data.json";
import { useStore } from "@/stores";
const store = useStore();
const translationKey = "languages_id";
const scores = data.filter((score) => {
return (
!!score.translations.find(
(translation) => translation[translationKey] == store.language
2022-03-29 23:30:23 +02:00
) &&
score.results.length &&
score.questions.length
);
});
function getTranslation(translations, key) {
return translations.find((translation) => translation[key] == store.language);
}
2022-03-29 23:30:23 +02:00
</script>
<template>
2022-04-04 16:44:10 +02:00
<header>
<ul>
<li
v-if="store.theme == ''"
@click="store.switchTheme"
title="Thème de votre système"
>
🌓
</li>
<li
v-if="store.theme == 'dark'"
@click="store.switchTheme"
title="Thème sombre"
>
🌑
</li>
<li
v-if="store.theme == 'light'"
@click="store.switchTheme"
title="Thème clair"
>
🌞
</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>
</ul>
2022-04-04 16:44:10 +02:00
</header>
<main>
<div class="container" v-if="scores">
2022-04-04 16:44:10 +02:00
<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
2022-04-04 16:44:10 +02:00
}}</router-link>
</li>
</ul>
</div>
2022-04-04 16:44:10 +02:00
</main>
2022-03-29 23:30:23 +02:00
</template>
<style lang="sass" scoped>
2022-04-04 16:44:10 +02:00
header
height: var(--header-size)
overflow: hidden
display: flex
justify-content: space-around
2022-04-04 16:44:10 +02:00
align-items: center
2023-01-17 12:48:20 +01:00
border-bottom: 2px solid var(--color-text)
2022-04-04 16:44:10 +02:00
background: var(--color-green)
h1
text-align: center
text-transform: uppercase
2022-04-04 16:44:10 +02:00
ul
margin: 0
padding: 0
list-style: none
text-align: center
font-size: 1.5rem
a
text-decoration: none
.hidden
display: none
2022-04-04 16:44:10 +02:00
main
width: 100%
height: calc(100% - var(--header-size))
padding: 1rem
display: flex
justify-content: center
align-items: center
overflow: hidden
background-color: var(--color-highlight)
.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
2022-04-04 16:44:10 +02:00
position: absolute
top: 0
left: 0
bottom: 0
right: 0
2022-04-04 16:44:10 +02:00
background-image: url(/arbre.webp)
background-position: center
background-repeat: no-repeat
background-size: contain
2022-04-04 16:44:10 +02:00
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%
2022-04-04 16:44:10 +02:00
display: flex
align-items: center
justify-content: center
text-align: center
2022-03-29 23:30:23 +02:00
</style>