Weko
/
ceiba-scores
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Hauteur des images et l'aspect de la page d'accueil

This commit is contained in:
Simon 2022-04-06 12:22:53 +02:00
parent ac319cb39a
commit 5fc23225d0
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Question.vue
View File

@ -59,7 +59,6 @@ function slideMove(splide, newIndex) {
@click="$emit('answerSelected', question, answerWeight)" @click="$emit('answerSelected', question, answerWeight)"
> >
<img <img
width="200"
height="200" height="200"
:src="`/answers/${answer.image}.png`" :src="`/answers/${answer.image}.png`"
/> />

31
src/components/ScoresList.vue
View File

@ -25,7 +25,7 @@ function getTranslation(translations, key) {
<h1>Ceiba Scores App</h1> <h1>Ceiba Scores App</h1>
</header> </header>
<main> <main>
<template v-if="scores"> <div class="container" v-if="scores">
<ul> <ul>
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`"> <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
<router-link :to="{ name: 'score', params: { id: score.id } }">{{ <router-link :to="{ name: 'score', params: { id: score.id } }">{{
@ -33,7 +33,7 @@ function getTranslation(translations, key) {
}}</router-link> }}</router-link>
</li> </li>
</ul> </ul>
</template> </div>
</main> </main>
</template> </template>
@ -60,30 +60,37 @@ main
overflow: hidden overflow: hidden
background-color: var(--color-highlight) 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 ul
margin: 0 margin: 0
padding: 0 padding: 0
list-style: none list-style: none
width: 100% position: absolute
max-width: 100% top: 0
max-height: 100% left: 0
bottom: 0
right: 0
aspect-ratio: 181 / 284
background-image: url(/arbre.png) background-image: url(/arbre.png)
background-size: 724px 1136px
background-position: center background-position: center
background-repeat: no-repeat background-repeat: no-repeat
background-size: contain background-size: contain
position: relative
// border: 2px solid var(--color-white) // border: 2px solid var(--color-white)
border-radius: 10px border-radius: 10px
@media only screen and (min-width: 472px)
max-width: 440px
li li
display: none display: none