Compare commits

...

2 Commits

Author SHA1 Message Date
Simon 0d13783421 feat: Design ajout d'un logo pour le téléchargement
continuous-integration/drone/push Build is failing Details
2023-05-02 23:28:28 +02:00
Simon ce5b3ec3ab feat: Center buttons 2023-05-02 23:19:22 +02:00
2 changed files with 78 additions and 44 deletions

View File

@ -26,7 +26,6 @@ function slideMove(splide, newIndex) {
answerWeight.value = props.question.answers[newIndex].weight;
emits("answerSelected", props.question, answerWeight);
}
const isProduction = process.env.NODE_ENV == "production";
const displayPopup = ref(false);
function showHidePopup() {
displayPopup.value = !displayPopup.value;
@ -102,51 +101,60 @@ const d = ref(0);
</template>
</div>
</div>
<template v-if="question.function == 'rapport_hd'">
<button class="btn calculette" @click="showHidePopup">
<img src="/abacus.svg" alt="" />
</button>
<template v-if="displayPopup">
<div class="popup">
<button class="btn close" @click="showHidePopup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
fill="#000"
/>
</svg>
</button>
<label for="H">H (m)</label>
<input v-model="h" type="number" name="H" />
<label for="D">D (cm)</label>
<input v-model="d" type="number" name="D" />
<p>({{ h }} * 100) / {{ d }} {{ Math.round((h * 100) / d) }}</p>
<button class="btn equal" @click="validatePopup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
fill="#31373D"
d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
/>
</svg>
</button>
</div>
<div class="btns">
<template v-if="question.function == 'rapport_hd'">
<button class="btn calculette" @click="showHidePopup">
<img src="/abacus.svg" alt="" />
</button>
<template v-if="displayPopup">
<div class="popup">
<button class="btn close" @click="showHidePopup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
fill="#000"
/>
</svg>
</button>
<label for="H">H (m)</label>
<input v-model="h" type="number" name="H" />
<label for="D">D (cm)</label>
<input v-model="d" type="number" name="D" />
<p>({{ h }} * 100) / {{ d }} {{ Math.round((h * 100) / d) }}</p>
<button class="btn equal" @click="validatePopup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
fill="#31373D"
d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
/>
</svg>
</button>
</div>
</template>
</template>
</template>
<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>
<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>
</div>
</template>
<style lang="sass">
.btns
width: 400px
max-width: 100%
min-width: 280px
position: relative
margin: 0 auto
.popup
position: absolute
background: var(--color-highlight-background)

View File

@ -174,7 +174,30 @@ async function share() {
</li>
</ul>
</div>
<button @click="() => share()">Partager</button>
<button
class="btn download"
@click="() => share()"
data-html2canvas-ignore
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
fill="#D99E82"
d="M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4v-9c0-2.209.791-3 3-3h30c2.209 0 3 .791 3 3v9z"
/>
<path
fill="#662113"
d="M25 20c0 3.866-3.134 7-7 7s-7-3.134-7-7h14z"
/>
<path
fill="#C1694F"
d="M4 36h28c2.209 0 4-1.791 4-4H0c0 2.209 1.791 4 4 4z"
/>
<path
fill="#77B255"
d="M26.716 8h-4.783V2c0-1.105-.896-2-2-2h-4.001c-1.104 0-1.999.896-1.999 2v6H9.148c-1.223 0-1.516.623-.651 1.489l7.863 7.863c.865.865 2.28.865 3.146 0l7.863-7.863C28.232 8.623 27.94 8 26.716 8z"
/>
</svg>
</button>
</div>
</template>
<template v-else>
@ -209,6 +232,10 @@ async function share() {
<style lang="sass" scoped>
.center
text-align: center
.download
bottom: 1.5rem
right: 1.5rem
opacity: .7
.noscore
display: flex
justify-content: center
@ -251,7 +278,6 @@ label
.latest
background-color: var(--color-highlight-background)
color: var(--color-highlight-text)
text-align: center
display: flex
align-items: center
justify-content: center