feat: Ajout de la page d'accueil

This commit is contained in:
Simon 2022-04-04 16:44:10 +02:00
parent 031410d81d
commit fab13bd9d0
6 changed files with 104 additions and 28 deletions

BIN
public/arbre.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 KiB

View File

@ -1,7 +1,10 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
/* #EDE0D4 */
--color-white: #ffffff;
--color-black: #181818;
/*--color-black: #181818;*/
--color-black: #000000;
--color-green: rgb(118, 148, 67);
--header-size-small: 64px;
--header-size-big: 128px;
@ -9,8 +12,9 @@
/* semantic color variables for this project */
:root {
--color-background: #EDE0D4;
--color-text: var(--color-black);
--color-background: var(--color-black);
--color-text: var(--color-white);
--color-highlight: var(--color-green);
--header-size: var(--header-size-small);
}

View File

@ -130,7 +130,7 @@ const result = computed(() =>
</div>
</template>
</SplideSlide>
<SplideSlide>
<SplideSlide class="latest">
<template v-if="displayScoreResult && result">
<ul>
<li>score : {{ scoreSum }}</li>
@ -182,6 +182,9 @@ label
width: 100%
padding: .3rem
.latest
background-color: var(--color-green)
.gradient
width: calc(100% - 2rem)
padding: 0 1rem

View File

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

View File

@ -21,25 +21,96 @@ function getTranslation(translations, key) {
</script>
<template>
<h1>Ceiba Scores App</h1>
<template v-if="scores">
<ul>
<li v-for="score in scores" :key="score.id">
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
getTranslation(score.translations, "languages_id").title
}}</router-link>
</li>
</ul>
</template>
<header>
<h1>Ceiba Scores App</h1>
</header>
<main>
<template 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
}}</router-link>
</li>
</ul>
</template>
</main>
</template>
<style lang="sass" scoped>
h1
background: var(--color-background)
text-align: center
margin: 1rem
padding: 0
header
height: var(--header-size)
overflow: hidden
display: flex
justify-content: center
align-items: center
border-bottom: 2px solid var(--color-white)
background: var(--color-green)
h1
text-align: center
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)
ul
margin: 1rem
padding: 0 0 0 1rem
margin: 0
padding: 0
list-style: none
width: 100%
max-width: 100%
max-height: 100%
aspect-ratio: 181 / 284
background-image: url(/arbre.png)
background-size: 724px 1136px
background-position: center
background-repeat: no-repeat
background-size: contain
position: relative
// border: 2px solid var(--color-white)
border-radius: 10px
li
display: none
background: rgba(0, 0, 0, .5)
border-radius: 10px
position: absolute
border: 2px solid var(--color-white)
&#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-white)
display: block
width: 100%
height: 100%
display: flex
align-items: center
justify-content: center
text-align: center
</style>

View File

@ -3,7 +3,5 @@ import ScoresList from "@/components/ScoresList.vue";
</script>
<template>
<main>
<ScoresList />
</main>
<ScoresList />
</template>