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

Reviewed-on: interhack/2026.camp.public.website#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%;
}
#progress {
display: block;
text-align: center;
}
#gauge-bar {
float: left;
}
#fundraising-bar {
float: left;
}
code {
background: #ffffff1f;
padding: 0.2em 0.4em;

View file

@ -104,6 +104,6 @@ font-size : 1.5em;
}
.morethanhalf {
text-align : end;
color:black;
text-align : end;
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>
<section id="progress">
<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>
<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>
<p>des dons dont nous avons besoin</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>
<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
</section>

View file

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