mirror of
https://github.com/Rushilwiz/tj2023.git
synced 2025-04-10 23:30:17 -04:00
fixed organization and styling
This commit is contained in:
parent
4c9de79ca9
commit
15372706e7
|
@ -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) {
|
||||
|
|
|
@ -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 %}
|
|
@ -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):
|
||||
|
|
Loading…
Reference in New Issue
Block a user