Create a mockup of a couple of days of sleep data using progress bars.

This commit is contained in:
Christopher Charbonneau Wells 2017-08-21 20:10:00 -04:00
parent faaa67995f
commit 4e7f80cd2e
1 changed files with 42 additions and 1 deletions

View File

@ -3,5 +3,46 @@
{% block title %}Sleep Report - {{ object }}{% endblock %}
{% block content %}
<div>
Sleep report for {{ object }}.
</div>
<div class="pull-left p-1">
<strong>8 Aug</strong>
</div>
<div class="progress" style="height: 32px; border-radius: 0;">
<div class="progress-bar" role="progressbar" style="width: 5%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 2%"></div>
<div class="progress-bar" role="progressbar" style="width: 15%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 6%"></div>
<div class="progress-bar" role="progressbar" style="width: 3%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
<div class="progress-bar" role="progressbar" style="width: 5%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 2%"></div>
<div class="progress-bar" role="progressbar" style="width: 15%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 6%"></div>
<div class="progress-bar" role="progressbar" style="width: 3%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
<div class="progress-bar" role="progressbar" style="width: 8%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
</div>
<div class="pull-left p-1">
<strong>7 Aug</strong>
</div>
<div class="progress" style="height: 32px; border-radius: 0;">
<div class="progress-bar" role="progressbar" style="width: 5%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 2%"></div>
<div class="progress-bar" role="progressbar" style="width: 3%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
<div class="progress-bar" role="progressbar" style="width: 5%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 2%"></div>
<div class="progress-bar" role="progressbar" style="width: 15%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 6%"></div>
<div class="progress-bar" role="progressbar" style="width: 3%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
<div class="progress-bar" role="progressbar" style="width: 8%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%"></div>
<div class="progress-bar" role="progressbar" style="width: 15%; background: none;"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 6%"></div>
</div>
{% endblock %}