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:
commit
e2619bbe91
4 changed files with 36 additions and 9 deletions
13
css/base.css
13
css/base.css
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -105,5 +105,5 @@ 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%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
22
index.html
22
index.html
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue