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

feat: Center buttons

This commit is contained in:
Simon 2023-05-02 23:19:22 +02:00
parent bd1e7c4030
commit ce5b3ec3ab
1 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/Question.vue
View File

@ -102,51 +102,60 @@ const d = ref(0);
</template> </template>
</div> </div>
</div> </div>
<template v-if="question.function == 'rapport_hd'"> <div class="btns">
<button class="btn calculette" @click="showHidePopup"> <template v-if="question.function == 'rapport_hd'">
<img src="/abacus.svg" alt="" /> <button class="btn calculette" @click="showHidePopup">
</button> <img src="/abacus.svg" alt="" />
<template v-if="displayPopup"> </button>
<div class="popup"> <template v-if="displayPopup">
<button class="btn close" @click="showHidePopup"> <div class="popup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <button class="btn close" @click="showHidePopup">
<path <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
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" <path
fill="#000" 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> </svg>
<label for="H">H (m)</label> </button>
<input v-model="h" type="number" name="H" /> <label for="H">H (m)</label>
<label for="D">D (cm)</label> <input v-model="h" type="number" name="H" />
<input v-model="d" type="number" name="D" /> <label for="D">D (cm)</label>
<p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p> <input v-model="d" type="number" name="D" />
<button class="btn equal" @click="validatePopup"> <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <button class="btn equal" @click="validatePopup">
<path <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
fill="#31373D" <path
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" 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> </svg>
</div> </button>
</div>
</template>
</template> </template>
</template> <button class="btn next" @click="$emit('nextQuestion')">
<button class="btn next" @click="$emit('nextQuestion')"> <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"
viewBox="0 0 40 40" width="40"
width="40" height="40"
height="40" >
> <path
<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"
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>
></path> </svg>
</svg> </button>
</button> </div>
</template> </template>
<style lang="sass"> <style lang="sass">
.btns
width: 400px
max-width: 100%
min-width: 280px
position: relative
margin: 0 auto
.popup .popup
position: absolute position: absolute
background: var(--color-highlight-background) background: var(--color-highlight-background)