feat: Mise à jour du design de l'application
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 626 KiB |
@ -8,6 +8,7 @@
|
||||
|
||||
--header-size-small: 64px;
|
||||
--header-size-big: 128px;
|
||||
--header-size: var(--header-size-small);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
@ -19,7 +20,6 @@
|
||||
--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 {
|
||||
@ -44,7 +44,7 @@ body.theme-dark {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (min-height: 800px) {
|
||||
:root {
|
||||
--header-size: var(--header-size-big);
|
||||
}
|
||||
@ -80,3 +80,17 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
border: none;
|
||||
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
@ -41,11 +41,7 @@ function slideMove(splide, newIndex) {
|
||||
:id="`question_${question.id}`"
|
||||
ref="slides"
|
||||
>
|
||||
<SplideSlide
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
@click="$emit('nextQuestion')"
|
||||
>
|
||||
<SplideSlide v-for="answer in question.answers" :key="answer.id">
|
||||
<img height="200" :src="`/answers/${answer.image}.webp`" />
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
@ -77,9 +73,39 @@ function slideMove(splide, newIndex) {
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn next" @click="$emit('nextQuestion')">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 40 40"
|
||||
width="40"
|
||||
height="40"
|
||||
>
|
||||
<path
|
||||
d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.next
|
||||
background: var(--color-highlight-background)
|
||||
bottom: 1rem
|
||||
right: 1rem
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
opacity: .8
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
svg
|
||||
width: 80%
|
||||
height: 80%
|
||||
transform: rotate(90deg)
|
||||
fill: var(--color-highlight-text)
|
||||
|
||||
.splide__arrow
|
||||
background: transparent
|
||||
border: 3px solid var(--color-green)
|
||||
@ -93,6 +119,7 @@ function slideMove(splide, newIndex) {
|
||||
width: 1.6rem
|
||||
.splide__pagination
|
||||
bottom: -1.5em
|
||||
display: none
|
||||
.splide__pagination__page
|
||||
width: .7rem
|
||||
height: .7rem
|
||||
@ -108,7 +135,7 @@ legend
|
||||
text-align: center
|
||||
font-size: 1.4rem
|
||||
line-height: 2rem
|
||||
margin: 1rem
|
||||
font-weight: bold
|
||||
|
||||
.choices
|
||||
list-style-type: none
|
||||
@ -116,12 +143,15 @@ legend
|
||||
display: inline-block
|
||||
padding-left: 0
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
input[type=radio]
|
||||
display: none
|
||||
|
||||
& + label
|
||||
position: relative
|
||||
padding-left: 2rem
|
||||
padding: .2rem .2rem .2rem 2rem
|
||||
& + label::before,
|
||||
& + label::after
|
||||
display: block
|
||||
@ -130,20 +160,22 @@ legend
|
||||
content:''
|
||||
border-radius: 1rem
|
||||
& + label::before
|
||||
bottom: 0
|
||||
bottom: .3rem
|
||||
left: 0
|
||||
background-color: var(--color-green)
|
||||
width: 1rem
|
||||
height: 1rem
|
||||
& + label::after
|
||||
bottom: 3px
|
||||
bottom: calc(3px + .3rem)
|
||||
left: 3px
|
||||
width: calc(1rem - 6px)
|
||||
height: calc(1rem - 6px)
|
||||
&:checked + label
|
||||
text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
|
||||
&:checked + label::before
|
||||
background-color: white
|
||||
&:checked + label::after
|
||||
background-color: var(--color-green)
|
||||
&:checked + label::after
|
||||
background-color: white
|
||||
|
||||
.main
|
||||
height: 100%
|
||||
@ -163,6 +195,9 @@ legend
|
||||
max-width: 100%
|
||||
min-width: 280px
|
||||
|
||||
@media (max-height: 600px)
|
||||
margin: 1rem auto
|
||||
|
||||
h2
|
||||
font-size: 2rem
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import { Splide, SplideSlide } from "@splidejs/vue-splide";
|
||||
import Question from "./Question.vue";
|
||||
import "@splidejs/splide/dist/css/splide.min.css";
|
||||
import ScoreHeader from "./ScoreHeader.vue";
|
||||
import html2canvas from "html2canvas";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
@ -110,6 +111,16 @@ function nextQuestion() {
|
||||
console.log(slides);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
async function share() {
|
||||
console.log(document.querySelector(".latest"));
|
||||
const canvas = await html2canvas(document.querySelector("html"));
|
||||
let anchor = document.createElement("a");
|
||||
anchor.download = "download.png";
|
||||
anchor.href = canvas.toDataURL("image/png");
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -135,7 +146,7 @@ function nextQuestion() {
|
||||
@nextQuestion="nextQuestion"
|
||||
/>
|
||||
</SplideSlide>
|
||||
<SplideSlide class="latest" id="details">
|
||||
<SplideSlide class="latest">
|
||||
<template v-if="displayScoreResult && result">
|
||||
<div>
|
||||
<h2 class="center">Probabilité d'échec</h2>
|
||||
@ -162,7 +173,7 @@ function nextQuestion() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button>Partager</button>
|
||||
<button @click="() => share()">Partager</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -251,17 +262,23 @@ label
|
||||
line-height: 2rem
|
||||
font-size: 2.6rem
|
||||
|
||||
@media (max-height: 600px)
|
||||
font-size: 1.5rem
|
||||
& + h2
|
||||
font-size: 2rem
|
||||
|
||||
ul
|
||||
text-align: left
|
||||
padding-left: 1.5rem
|
||||
list-style-type: disc
|
||||
|
||||
.details
|
||||
text-align: left
|
||||
font-size: 1.1rem
|
||||
text-align: left !important
|
||||
font-family: serif
|
||||
font-size: .9rem
|
||||
line-height: normal
|
||||
background: var(--color-highlight-background)
|
||||
border: 1px solid var(--color-highlight-text)
|
||||
background: var(--color-text)
|
||||
margin: 1rem
|
||||
padding: 1rem
|
||||
|
||||
.gradient
|
||||
|
||||
@ -10,57 +10,94 @@ defineProps({
|
||||
<template>
|
||||
<header>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<p>⇠</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
|
||||
<path
|
||||
fill="#5C913B"
|
||||
d="M36 33.5c0 .828-.672 1.5-1.5 1.5h-33C.672 35 0 34.328 0 33.5S.672 32 1.5 32h33c.828 0 1.5.672 1.5 1.5z"
|
||||
/>
|
||||
<path
|
||||
fill="#A0041E"
|
||||
d="M12.344 14.702h-2c-.276 0-.5-.224-.5-.5v-7c0-.276.224-.5.5-.5h2c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5z"
|
||||
/>
|
||||
<path
|
||||
fill="#FFCC4D"
|
||||
d="M5.942 32c-.137-4.657-.506-8-.942-8-.435 0-.804 3.343-.941 8h1.883z"
|
||||
/>
|
||||
<path
|
||||
fill="#77B255"
|
||||
d="M10 18.731C10 24.306 7.762 26 5 26c-2.761 0-5-1.694-5-7.269C0 13.154 4 5 5 5s5 8.154 5 13.731z"
|
||||
/>
|
||||
<path fill="#FFE8B6" d="M8 16L21 3l13 13v16H8z" />
|
||||
<path fill="#FFCC4D" d="M21 16h1v16h-1z" />
|
||||
<path
|
||||
fill="#66757F"
|
||||
d="M34 17c-.256 0-.512-.098-.707-.293L21 4.414 8.707 16.707c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l13-13c.391-.391 1.023-.391 1.414 0l13 13c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
|
||||
/>
|
||||
<path
|
||||
fill="#66757F"
|
||||
d="M21 17c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l6.5-6.5c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-6.5 6.5c-.195.195-.451.293-.707.293z"
|
||||
/>
|
||||
<path fill="#C1694F" d="M13 26h4v6h-4z" />
|
||||
<path fill="#55ACEE" d="M13 17h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z" />
|
||||
<path
|
||||
fill="#77B255"
|
||||
d="M10.625 29.991c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973s1.917 2.359 1.917 3.973zm25.25 0c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973.384 0 1.917 2.359 1.917 3.973z"
|
||||
/>
|
||||
</svg>
|
||||
</router-link>
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
height: var(--header-size);
|
||||
position: fixed;
|
||||
background: var(--color-header-background);
|
||||
color: var(--color-header-text);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-bottom: 1px solid var(--color-header-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
<style lang="sass" scoped>
|
||||
header
|
||||
height: var(--header-size)
|
||||
position: fixed
|
||||
background: var(--color-header-background)
|
||||
color: var(--color-header-text)
|
||||
width: 100%
|
||||
z-index: 1
|
||||
top: 0
|
||||
border-bottom: 1px solid var(--color-header-text)
|
||||
display: flex
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
width: var(--header-size);
|
||||
min-width: var(--header-size);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-right: 1px solid var(--color-header-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
a
|
||||
height: 100%
|
||||
width: var(--header-size)
|
||||
min-width: var(--header-size)
|
||||
margin: 0
|
||||
display: flex
|
||||
align-items: center
|
||||
text-align: center
|
||||
align-content: center
|
||||
border-right: 1px solid var(--color-header-text)
|
||||
text-decoration: none
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
color: var(--color-header-text);
|
||||
}
|
||||
p
|
||||
margin: 0 auto
|
||||
font-size: 2rem
|
||||
color: var(--color-header-text)
|
||||
|
||||
h1 {
|
||||
margin: 0 1rem;
|
||||
line-height: 0.9;
|
||||
flex: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1
|
||||
margin: 0 1rem
|
||||
line-height: 0.9
|
||||
flex: 1
|
||||
font-size: 1.2rem
|
||||
font-weight: bold
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
p {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
svg
|
||||
width: 2rem
|
||||
margin: 0 auto
|
||||
|
||||
@media (min-height: 800px)
|
||||
p
|
||||
font-size: 4rem
|
||||
|
||||
h1
|
||||
font-size: 2rem
|
||||
|
||||
svg
|
||||
width: 4rem
|
||||
</style>
|
||||
|
||||
@ -123,6 +123,7 @@ function getTranslation(translations, key) {
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
<img src="/homepage.webp" class="homeImage" />
|
||||
<div class="container" v-if="scores">
|
||||
<ul>
|
||||
<template v-for="(score, index) in scores" :key="score.id">
|
||||
@ -177,14 +178,25 @@ header
|
||||
main
|
||||
width: 100%
|
||||
height: calc(100% - var(--header-size))
|
||||
padding: 1rem
|
||||
background-color: var(--color-background)
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
text-align: center
|
||||
|
||||
.homeImage
|
||||
height: 30vh
|
||||
width: 100%
|
||||
max-width: 600px
|
||||
object-fit: contain
|
||||
margin: 0 auto
|
||||
|
||||
.container
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
background-color: var(--color-background)
|
||||
padding: 1rem
|
||||
|
||||
.container
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
@ -193,6 +205,7 @@ main
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
max-width: 404px
|
||||
border: 1px solid var(--color-green)
|
||||
|
||||
li
|
||||
height: 202px
|
||||
@ -206,6 +219,7 @@ main
|
||||
|
||||
a
|
||||
font-size: 2rem
|
||||
line-height: 2rem
|
||||
color: var(--color-green)
|
||||
display: block
|
||||
width: 100%
|
||||
@ -215,4 +229,5 @@ main
|
||||
justify-content: center
|
||||
text-align: center
|
||||
padding: 1rem
|
||||
text-decoration: none
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user