Commit 5a2f827c authored by sajolida's avatar sajolida

Add 'Last updated' info on donation counter

parent ab68fd60
......@@ -75,4 +75,5 @@ Creative Commons Attribution 3.0 United States License.
Creative Commons — Attribution, by Thomas Helbig.
- [[Survey|https://thenounproject.com/term/survey/1296072]]:
Creative Commons — Attribution, by unlimicon.
- [[Info|https://thenounproject.com/term/info/808461]]:
Creative Commons — Attribution, by icongeek]].
......@@ -69,6 +69,33 @@ body.pt .donate-pt {
background: black;
}
/* Hide 'Last updated' by default */
#counter-last-updated {
display: none;
}
/* Hide 'Last updated' info icon when there is no JS to display 'Last updated' */
#counter-last-updated-info {
display: none;
}
#counter-last-updated-info {
position: absolute;
top: -4px;
right: 0;
}
#counter-last-updated {
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 0.5em;
width: 300px;
height: 2.6em;
top: 1.5em;
left: -50px;
}
/* Hide the number of days remaining when there is no JS to calculate them */
.counter-days {
display: none;
......
......@@ -15,4 +15,13 @@ document.addEventListener('DOMContentLoaded', function() {
numberOfDays[i].textContent = Math.round((endOfCampaign-now)/24/60/60/1000);
}
// Display #counter-last-updated when hover on #counter-last-updated-info
document.getElementById('counter-last-updated-info').style.display = "inline-block";
document.getElementById('counter-last-updated-info').onmouseover = function() {
document.getElementById('counter-last-updated').style.display = "block";
}
document.getElementById('counter-last-updated-info').onmouseout = function() {
document.getElementById('counter-last-updated').style.display = "none";
}
});
......@@ -112,6 +112,16 @@
<div class="counter-amount donate-fr">XX&#8239;XXX€ sur 120&#8239;000€</div>
<div class="counter-amount donate-it">XX&#8239;XXX€ out of 120&#8239;000€</div>
<div class="counter-amount donate-pt">XX&#8239;XXX€ out of 120&#8239;000€</div>
<div id="counter-last-updated-info"><img src="lib/info.png" alt="Info"></div>
<div id="counter-last-updated">
<span class="donate-en">Last updated on 2018-10-27.</span>
<span class="donate-es">Última actualización el 2018-10-27.</span>
<span class="donate-de">Last updated on 2018-10-27.</span>
<span class="donate-fa">Last updated on 2018-10-27.</span>
<span class="donate-fr">Dernière mise à jour le 2018-10-27.</span>
<span class="donate-it">Last updated on 2018-10-27.</span>
<span class="donate-pt">Last updated on 2018-10-27.</span>
</div>
<div class="counter-progress">
<div class="counter-progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment