Some more UI changes
This commit is contained in:
parent
873a28aa28
commit
293ff50809
@ -1,6 +1,7 @@
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.starter-template {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 60px;
|
||||
@ -23,11 +24,6 @@ td {
|
||||
color: #a94442;
|
||||
}
|
||||
|
||||
.pitstop {
|
||||
}
|
||||
//.navbar-fixed-bottom{
|
||||
//margin-bottom:20px;
|
||||
//}
|
||||
.nav-pills > li > a {
|
||||
border: 1px solid;
|
||||
}
|
||||
@ -42,6 +38,7 @@ h2 {
|
||||
|
||||
h3 {
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
h3:before{
|
||||
content:"― ";
|
||||
@ -50,8 +47,19 @@ h3:after{
|
||||
content:" ―";
|
||||
}
|
||||
|
||||
.tab-content > .active {
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 1px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.panel-body > p, .panel-body > ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// for small devices
|
||||
@media only screen
|
||||
and (min-device-width : 320px)
|
||||
and (max-device-width : 568px) {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Password</div>
|
||||
<div class="panel-body">
|
||||
<a href='{{ url_for('security.change_password') }}'>
|
||||
<a href='{{ url_for('security.change_password') }}' class="btn btn-primary " role="button">
|
||||
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Change
|
||||
</a>
|
||||
</div>
|
||||
@ -13,44 +13,46 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Vehicles</div>
|
||||
<div class="panel-body">
|
||||
<a href="{{ url_for('create_vehicle') }}">
|
||||
<a href="{{ url_for('create_vehicle') }}" class="btn btn-primary " role="button">
|
||||
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> create
|
||||
</a>
|
||||
</div>
|
||||
<table class="table table-striped table-bordered">
|
||||
<tr>
|
||||
<th>
|
||||
Vehicle
|
||||
</th>
|
||||
<th>
|
||||
Info
|
||||
</th>
|
||||
<th>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
{% for vehicle in current_user.vehicles %}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:center">
|
||||
{{ vehicle.name }}
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
{{ vehicle.pitstops | length }} pitstops
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
<a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}">
|
||||
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
|
||||
</a>
|
||||
{% if current_user.vehicles | length > 1 %}
|
||||
<a href="{{ url_for('delete_vehicle', vid=vehicle.id) }}">
|
||||
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
|
||||
</a>
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
</td>
|
||||
<th>
|
||||
Vehicle
|
||||
</th>
|
||||
<th>
|
||||
Info
|
||||
</th>
|
||||
<th>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for vehicle in current_user.vehicles %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ vehicle.name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ vehicle.pitstops | length }} pitstops
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}" class="btn btn-primary " role="button">
|
||||
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
|
||||
</a>
|
||||
{% if current_user.vehicles | length > 1 %}
|
||||
<a href="{{ url_for('delete_vehicle', vid=vehicle.id) }}" class="btn btn-primary btn-warning " role="button">
|
||||
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
|
||||
</a>
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<h3>Admin</h3>
|
||||
We have {{ data.users|length }} users so far:
|
||||
<ul>
|
||||
{% for user in data.users %}
|
||||
<li>{{user.email}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href='{{ url_for('security.login', _external=True) }}'>Login</a>
|
||||
<div class="col-md-2" ></div>
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h3>Admin</h3>
|
||||
We have {{ data.users|length }} users so far:
|
||||
<ul>
|
||||
{% for user in data.users %}
|
||||
<li>{{user.email}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h3>Delete vehicle '{{vehicle.name}}'</h3>
|
||||
<h3>Delete vehicle '{{vehicle.name}}'?</h3>
|
||||
<form class='form-horizontal' method="POST">
|
||||
{{ form.hidden_tag() }}
|
||||
{{ render_field_with_errors(form.submit) }}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="panel-body" >
|
||||
<h1>Join the pitstop community!</h1>
|
||||
|
||||
<p>There are already {{ data.users}} members with {{ data.vehicles }} vehicles who have logged {{ data.pitstops }} pitstops fuelling {{ data.litres }}l for {{ data.kilometers }}km.</p>
|
||||
|
||||
@ -176,7 +176,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#
|
||||
<nav class="navbar navbar-inverse navbar-fixed-bottom">
|
||||
<div class="container">
|
||||
<div class="navbar-footer">
|
||||
@ -184,5 +184,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
#}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "layout.html" %}
|
||||
{% extends "layout.html" %}
|
||||
{% block body %}
|
||||
<div id="content">
|
||||
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
|
||||
@ -14,60 +14,66 @@
|
||||
{% for vehicle in current_user.vehicles %}
|
||||
<div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
|
||||
<h3>{{vehicle.name}}</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<th>
|
||||
Date<br/>
|
||||
Days
|
||||
</th>
|
||||
<th>
|
||||
Odometer<br/>
|
||||
Distance
|
||||
</th>
|
||||
<th>
|
||||
Litres<br/>
|
||||
Average
|
||||
</th>
|
||||
</tr>
|
||||
{% for pitstop in vehicle.pitstops|reverse %}
|
||||
{% if not loop.last %}
|
||||
{% set days = (pitstop.date - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].date).days %}
|
||||
{% set distance = pitstop.odometer - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].odometer %}
|
||||
{% set average = (pitstop.litres / distance) * 100 %}
|
||||
<tr class='pitstop'>
|
||||
<td>
|
||||
{{pitstop.date}}<br/>
|
||||
{{ days }} days
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.odometer}} km<br/>
|
||||
{{distance}} km
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.litres}} l<br/>
|
||||
{{average | round(2)}} l/100km
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr class='pitstop'>
|
||||
<td>
|
||||
{{pitstop.date}}<br/>
|
||||
-- days
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.odometer}} km<br/>
|
||||
-- km
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.litres}} l<br/>
|
||||
-- l/100km
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
{% if vehicle.pitstops %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<th>
|
||||
Date<br/>
|
||||
Days
|
||||
</th>
|
||||
<th>
|
||||
Odometer<br/>
|
||||
Distance
|
||||
</th>
|
||||
<th>
|
||||
Litres<br/>
|
||||
Average
|
||||
</th>
|
||||
</tr>
|
||||
{% for pitstop in vehicle.pitstops|reverse %}
|
||||
{% if not loop.last %}
|
||||
{% set days = (pitstop.date - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].date).days %}
|
||||
{% set distance = pitstop.odometer - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].odometer %}
|
||||
{% set average = (pitstop.litres / distance) * 100 %}
|
||||
<tr class='pitstop'>
|
||||
<td>
|
||||
{{pitstop.date}}<br/>
|
||||
{{ days }} days
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.odometer}} km<br/>
|
||||
{{distance}} km
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.litres}} l<br/>
|
||||
{{average | round(2)}} l/100km
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr class='pitstop'>
|
||||
<td>
|
||||
{{pitstop.date}}<br/>
|
||||
-- days
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.odometer}} km<br/>
|
||||
-- km
|
||||
</td>
|
||||
<td>
|
||||
{{pitstop.litres}} l<br/>
|
||||
-- l/100km
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -61,14 +61,28 @@
|
||||
</li>
|
||||
</ul>
|
||||
<div id="charts_tabs-content" class="tab-content">
|
||||
<div class="tab-pane active" id="v{{vehicle.id}}_c1">
|
||||
<div class="tab-pane active" id="v{{vehicle.id}}_c3">
|
||||
{% if vehicle.pitstop_count > 1 %}
|
||||
<div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
|
||||
<script type="text/javascript">
|
||||
{{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
|
||||
</script>
|
||||
{% else %}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="tab-pane " id="v{{vehicle.id}}_c1">
|
||||
{% if vehicle.pitstop_count > 0 %}
|
||||
<div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
|
||||
<script type="text/javascript">
|
||||
{{ chartScript('fuelledChartDiv'+vehicle.id|str, vehicle.litres, 'l') }}
|
||||
</script>
|
||||
{% else %}
|
||||
not enough data.
|
||||
<div class="alert alert-warning" role="alert">
|
||||
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="tab-pane " id="v{{vehicle.id}}_c2">
|
||||
@ -78,17 +92,9 @@
|
||||
{{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }}
|
||||
</script>
|
||||
{% else %}
|
||||
not enough data.
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="tab-pane " id="v{{vehicle.id}}_c3">
|
||||
{% if vehicle.pitstop_count > 1 %}
|
||||
<div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
|
||||
<script type="text/javascript">
|
||||
{{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
|
||||
</script>
|
||||
{% else %}
|
||||
not enough data.
|
||||
<div class="alert alert-warning" role="alert">
|
||||
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user