fixed organization and styling

This commit is contained in:
Rushil Umaretiya 2020-10-21 16:15:43 -04:00
parent 4c9de79ca9
commit 15372706e7
3 changed files with 53 additions and 47 deletions

View File

@ -92,6 +92,23 @@ body {
color: #444;
}
#progress {
width: 100%;
background-color: #eee;
border-radius: 50px;
}
#bar {
width: 1%;
height: 50px;
background-color: #0000ff ;
text-align: center;
line-height: 50px;
color: white;
border-radius: 50px;
transition: all 1s;
}
/* mobile styles */
@media (max-width: 768px) {

View File

@ -3,24 +3,6 @@
{% block title %}Home{% endblock title %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
<style>
#progress {
width: 100%;
background-color: #eee;
border-radius: 50px;
}
#bar {
width: 1%;
height: 50px;
background-color: #0000ff ;
text-align: center;
line-height: 50px;
color: white;
border-radius: 50px;
transition: all 1s;
}
</style>
{% endblock css %}
{% block content %}
<div class="jumbotron jumbotron-fluid">
@ -45,32 +27,33 @@
</div>
</div>
<br><br><br>
<div class="container news">
<h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
<br><br>
<div id="progress">
<div id="bar">$0</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var thing = ({{ bar.money_raised }})/50000;
thing = thing * 100;
console.log(thing);
width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width < thing) {
width+=.25;
document.getElementById('bar').style.width = width + "%";
document.getElementById('bar').innerHTML = "$" + (width * 500)
} else {
document.getElementById('bar').style.width = thing + "%";
document.getElementById('bar').innerHTML = "$" + (thing * 500)
clearInterval(id);
}
}
});
</script>
</div>
{% if bar %}
<div class="container news">
<h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
<br><br>
<div id="progress">
<div id="bar">$0</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var thing = ({{ bar.money_raised }})/50000;
thing = thing * 100;
console.log(thing);
width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width < thing) {
width+=.25;
document.getElementById('bar').style.width = width + "%";
document.getElementById('bar').innerHTML = "$" + (width * 500)
} else {
document.getElementById('bar').style.width = thing + "%";
document.getElementById('bar').innerHTML = "$" + (thing * 500)
clearInterval(id);
}
}
});
</script>
</div>
{% endif %}
{% endblock content %}

View File

@ -12,7 +12,13 @@ def index(request):
stories = []
bar = None
return render(request, 'pages/index.html', {'stories': stories, 'animate': True, 'bar': bar})
context = {
'stories': stories,
'animate': True,
'bar': bar
}
return render(request, 'pages/index.html')
def council(request):