feat: Modification du design du bouton de la certitude
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2025-06-20 00:40:13 +02:00
parent 575cc28717
commit 689ab06dbb
2 changed files with 39 additions and 24 deletions

View File

@ -11,6 +11,11 @@
--header-size: var(--header-size-small);
--footer-size: 64px;
--color-red: #c82606;
--color-orange: #df6a0f;
--color-light-green: #70bf41;
--color-dark-green: #00882b;
}
/* semantic color variables for this project */
@ -127,3 +132,8 @@ header svg.color-text [fill]:not([fill=none]) {
strong {
font-weight: bold;
}
.bg-red { background: var(--color-red); }
.bg-orange { background: var(--color-orange); }
.bg-light-green { background: var(--color-light-green); }
.bg-dark-green { background: var(--color-dark-green); }

View File

@ -171,15 +171,15 @@ const weightCertitudes = ref(new Array(certitudes.length).fill(0));
const weightAllCertitudes = ref(0);
const certitudeResult = ref(selectCertitudeResult());
function selectCertitudeResult() {
return certitudesResults
.find(
(result) =>
result.weight_min <= weightAllCertitudes.value &&
result.weight_max >= weightAllCertitudes.value,
)
?.translations.find(
(translation) => translation.languages_code == language,
);
const certitude = certitudesResults.find(
(result) =>
result.weight_min <= weightAllCertitudes.value &&
result.weight_max >= weightAllCertitudes.value,
);
const certitudeTrad = certitude?.translations.find(
(translation) => translation.languages_code == language,
);
return { ...certitudeTrad, color: certitude.color };
}
function displayCertitudeQuestions() {
displayCertitude.value = !displayCertitude.value;
@ -257,18 +257,13 @@ watch(weightAllCertitudes, () => {
</li>
</ul>
</div>
<div v-if="displayCertitude" class="certitude_result">
<button @click="displayCertitudeQuestions">
<span
>Niveau de certitude : {{ certitudeResult?.niveau }}<br />
<span v-html="certitudeResult?.description"></span>
</span>
<span class="cross"></span>
</button>
</div>
<div v-else class="certitude_result">
<button @click="displayCertitudeQuestions">
Ajout un niveau de certitude
<div class="certitude_result">
Niveau de certitude
<button
@click="displayCertitudeQuestions"
:class="'bg-' + certitudeResult.color"
>
<span>{{ certitudeResult?.niveau }} </span>
</button>
</div>
<!--button class="btn download" @click="() => share()" v-if="!sharing">
@ -327,16 +322,26 @@ watch(weightAllCertitudes, () => {
<style lang="sass" scoped>
.certitude_result
padding-top: 1rem
font-size: 1.1rem
text-align: center
color: var(--color-highlight-text)
& *
font-weight: 800
button
display: flex
width: 100%
color: var(--color-highlight-text)
justify-content: center
flex-direction: row
align-items: center
margin: 1rem auto 0
margin: .2rem auto 0
border-radius: 0
border: none
font-weight: 900 !important
font-size: 1.1rem
padding: .3rem
.cross
margin-left: .5rem
.spin
bottom: 1.5rem
right: 1.5rem