Some more UI changes

app/rollerverbrauch/static/main.css

@@ -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) {

app/rollerverbrauch/templates/account.html

@@ -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,11 +13,12 @@
     <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">
+            <tbody>
                 <tr>
                     <th>
                         Vehicle
@@ -31,18 +32,18 @@
                 </tr>
                 {% for vehicle in current_user.vehicles %}
                     <tr>
-                    <td style="text-align:center">
+                        <td>
                             {{ vehicle.name }}
                         </td>
-                    <td style="text-align:center">
+                        <td>
                             {{ vehicle.pitstops | length }} pitstops
                         </td>
-                    <td style="text-align:center">
+                        <td>
-                        <a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}">
+                            <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) }}">
+                            <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 %}
@@ -51,6 +52,7 @@
                         </td>
                     </tr>
                 {% endfor %}
+            </tbody>
         </table>
     </div>
 {% endblock %}

app/rollerverbrauch/templates/admin.html

@@ -1,6 +1,10 @@
 {% extends "layout.html" %}
 
 {% block body %}
+<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>
@@ -8,5 +12,7 @@
                     <li>{{user.email}}</li>
                 {% endfor %}
             </ul>
-    <a href='{{ url_for('security.login', _external=True) }}'>Login</a>
+        </div>
+    </div>
+</div>
 {% endblock %}

app/rollerverbrauch/templates/deleteVehicleForm.html

@@ -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) }}

app/rollerverbrauch/templates/index.html

@@ -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>

app/rollerverbrauch/templates/layout.html

@@ -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>

app/rollerverbrauch/templates/pitstops.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,6 +14,7 @@
             {% for vehicle in current_user.vehicles %}
                 <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                     <h3>{{vehicle.name}}</h3>
+                    {% if vehicle.pitstops %}
                         <div class="table-responsive">
                             <table class="table table-striped table-bordered table-condensed">
                                 <tr>
@@ -68,6 +69,11 @@
                                 {% 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>

app/rollerverbrauch/templates/statistics.html

@@ -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.
+                                <div class="alert alert-warning" role="alert">
-                            {% endif %}
+                                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
                                 </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.
                             {% endif %}
                         </div>
                     </div>