Merge pull request 'Fix #30 : Mise en page des barres de progressions' (#31) from progression into main

Reviewed-on: #31
Reviewed-by: VincentP <vincent-peugnet@riseup.net>
This commit is contained in:
Nono 2026-02-12 12:37:23 +00:00
commit e2619bbe91
4 changed files with 36 additions and 9 deletions

View file

@ -195,6 +195,19 @@ figcaption {
margin-right: 10%; margin-right: 10%;
} }
#progress {
display: block;
text-align: center;
}
#gauge-bar {
float: left;
}
#fundraising-bar {
float: left;
}
code { code {
background: #ffffff1f; background: #ffffff1f;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;

View file

@ -104,6 +104,6 @@ font-size : 1.5em;
} }
.morethanhalf { .morethanhalf {
text-align : end; text-align : end;
color:black; background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%);
} }

View file

@ -95,12 +95,26 @@
</h3> </h3>
<section id="progress"> <section id="progress">
<p>Il y a</p> <p>Il y a</p>
<div class="places"><span class="bar"><span id="gauge-bar" style="width:0" class="progression lessthanhalf"><span id="gauge-text">?/200</span></span></span></div>
<p>places déjà réservées.</p> <div class="places">
<span class="bar">
<span id="gauge-bar" style="width:0" class="progression lessthanhalf">
<span id="gauge-text">?/200</span>
</span>
</span>
</div>
<p>places déjà réservées. Ouverture prochaine des inscriptions!</p>
<br> <br>
<p>Et nous avons reçu</p> <p>Et nous avons reçu</p>
<div class="places"><span class="bar"><span id="fundraising-bar" style="width:0" class="progression lessthanhalf"><span id="fundraising-text">? %</span></span></span></div> <div class="places">
<p>des dons dont nous avons besoin</p> <span class="bar">
<span id="fundraising-bar" style="width:0" class="progression lessthanhalf">
<span id="fundraising-text">? %</span>
</span>
</span>
</div>
<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
</section> </section>

View file

@ -4,8 +4,8 @@ const gaugeMax = 200;
const fundraisingTotalMax = 20000; const fundraisingTotalMax = 20000;
async function getGauge() { async function getGauge() {
// REMOVE WHEN SIGNUP FORM IS OPEN // // REMOVE WHEN SIGNUP FORM IS OPEN
return 0; // return 0;
try { try {
const response = await fetch(gauge_url); const response = await fetch(gauge_url);
@ -61,7 +61,7 @@ async function setGauge() {
const gaugeRatio = gauge / gaugeMax; const gaugeRatio = gauge / gaugeMax;
gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%"); gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
gaugeText.innerText = gauge + "/" + gaugeMax; gaugeText.innerText = gauge + " / " + gaugeMax;
setAboveHalf(gaugeRatio, gaugeBar); setAboveHalf(gaugeRatio, gaugeBar);
} }