From 293ff50809067854cbe2f118bb8a839d942c6389 Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Tue, 24 May 2016 06:49:39 +0200
Subject: [PATCH] Some more UI changes

---
 app/rollerverbrauch/static/main.css           |  18 ++-
 app/rollerverbrauch/templates/account.html    |  68 +++++-----
 app/rollerverbrauch/templates/admin.html      |  22 ++--
 .../templates/deleteVehicleForm.html          |   2 +-
 app/rollerverbrauch/templates/index.html      |   2 +-
 app/rollerverbrauch/templates/layout.html     |   3 +-
 app/rollerverbrauch/templates/pitstops.html   | 116 +++++++++---------
 app/rollerverbrauch/templates/statistics.html |  32 +++--
 8 files changed, 146 insertions(+), 117 deletions(-)

diff --git a/app/rollerverbrauch/static/main.css b/app/rollerverbrauch/static/main.css
index 103a79d..6b9476b 100644
--- a/app/rollerverbrauch/static/main.css
+++ b/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) {
diff --git a/app/rollerverbrauch/templates/account.html b/app/rollerverbrauch/templates/account.html
index 06a044e..756216e 100644
--- a/app/rollerverbrauch/templates/account.html
+++ b/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,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 %}
-                            &nbsp;
-                        {% 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 %}
+                                &nbsp;
+                            {% endif %}
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
         </table>
     </div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/admin.html b/app/rollerverbrauch/templates/admin.html
index d57f4da..8b25d30 100644
--- a/app/rollerverbrauch/templates/admin.html
+++ b/app/rollerverbrauch/templates/admin.html
@@ -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 %}
diff --git a/app/rollerverbrauch/templates/deleteVehicleForm.html b/app/rollerverbrauch/templates/deleteVehicleForm.html
index 8e14d91..c058771 100644
--- a/app/rollerverbrauch/templates/deleteVehicleForm.html
+++ b/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) }}
diff --git a/app/rollerverbrauch/templates/index.html b/app/rollerverbrauch/templates/index.html
index e45181f..162c066 100644
--- a/app/rollerverbrauch/templates/index.html
+++ b/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>
diff --git a/app/rollerverbrauch/templates/layout.html b/app/rollerverbrauch/templates/layout.html
index 900e588..60e5ebe 100644
--- a/app/rollerverbrauch/templates/layout.html
+++ b/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>
diff --git a/app/rollerverbrauch/templates/pitstops.html b/app/rollerverbrauch/templates/pitstops.html
index 0088269..043485e 100644
--- a/app/rollerverbrauch/templates/pitstops.html
+++ b/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,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>
diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 66a18db..c1d5aeb 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/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.
-                            {% 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>