From 873a28aa2836de74f3ceb630f058117ba141c5fc Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Sun, 22 May 2016 11:47:46 +0200
Subject: [PATCH] ui redesign

---
 app/rollerverbrauch/static/main.css           | 44 ++++++++++++++++++-
 app/rollerverbrauch/templates/account.html    |  2 +-
 .../templates/createVehicleForm.html          | 22 ++++++----
 .../templates/deleteVehicleForm.html          | 19 +++++---
 .../templates/editVehicleForm.html            | 20 ++++++---
 app/rollerverbrauch/templates/index.html      | 20 ++-------
 app/rollerverbrauch/templates/layout.html     | 37 +++++++++++++++-
 .../templates/newPitStopForm.html             | 37 +++++++++-------
 .../templates/security/change_password.html   | 23 ++++++----
 .../templates/security/forgot_password.html   | 20 ++++++---
 .../templates/security/login_user.html        | 19 +++-----
 .../templates/security/register_user.html     | 28 +++++++-----
 .../templates/selectVehice.html               | 21 ++++++---
 app/rollerverbrauch/templates/statistics.html | 14 +++---
 14 files changed, 218 insertions(+), 108 deletions(-)

diff --git a/app/rollerverbrauch/static/main.css b/app/rollerverbrauch/static/main.css
index 7626b33..103a79d 100644
--- a/app/rollerverbrauch/static/main.css
+++ b/app/rollerverbrauch/static/main.css
@@ -2,7 +2,8 @@ body {
   padding-top: 50px;
 }
 .starter-template {
-  padding: 40px 15px;
+  padding-top: 30px;
+  padding-bottom: 60px;
   text-align: center;
 }
 
@@ -24,7 +25,46 @@ td {
 
 .pitstop {
 }
-
+//.navbar-fixed-bottom{
+//margin-bottom:20px;
+//}
 .nav-pills > li > a {
 	border: 1px solid;
+}
+
+h1 {
+    margin-top: 0px;
+}
+
+h2 {
+    margin-top: 0px;
+}
+
+h3 {
+    margin-top: 0px;
+}
+h3:before{
+    content:"― ";
+}
+h3:after{
+    content:" ―";
+}
+
+
+
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 568px) {
+    h3:before{
+        content:"";
+    }
+    h3:after{
+        content:"";
+    }
+    #charts_tabs {
+        display:none;
+    }
+    #charts_tabs-content {
+        display:none;
+    }
 }
\ No newline at end of file
diff --git a/app/rollerverbrauch/templates/account.html b/app/rollerverbrauch/templates/account.html
index 8cec4de..06a044e 100644
--- a/app/rollerverbrauch/templates/account.html
+++ b/app/rollerverbrauch/templates/account.html
@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 
 {% block body %}
-		<h3>Account management for {{current_user.email}}</h3>
+    <h3>Account management for {{current_user.email}}</h3>
     <div class="panel panel-default">
         <div class="panel-heading">Password</div>
         <div class="panel-body">
diff --git a/app/rollerverbrauch/templates/createVehicleForm.html b/app/rollerverbrauch/templates/createVehicleForm.html
index 4ea3b84..2dce35b 100644
--- a/app/rollerverbrauch/templates/createVehicleForm.html
+++ b/app/rollerverbrauch/templates/createVehicleForm.html
@@ -1,12 +1,18 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<h3>Create vehicle</h3>
-<form class='form-horizontal' method="POST">
-    {{ form.hidden_tag() }}
-    {{ render_field_with_errors(form.name) }}
-    {{ render_field_with_errors(form.submit) }}
-</form>
-
-
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Create vehicle</h3>
+            <form class='form-horizontal' method="POST">
+                {{ form.hidden_tag() }}
+                {{ render_field_with_errors(form.name) }}
+                {{ render_field_with_errors(form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
+<div class="col-md-2" ></div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/deleteVehicleForm.html b/app/rollerverbrauch/templates/deleteVehicleForm.html
index 5e957c3..8e14d91 100644
--- a/app/rollerverbrauch/templates/deleteVehicleForm.html
+++ b/app/rollerverbrauch/templates/deleteVehicleForm.html
@@ -1,11 +1,18 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<h3>Delete vehicle '{{vehicle.name}}'</h3>
-<form class='form-horizontal' method="POST">
-    {{ form.hidden_tag() }}
-    {{ render_field_with_errors(form.submit) }}
-</form>
-
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Delete vehicle '{{vehicle.name}}'</h3>
+            <form class='form-horizontal' method="POST">
+                {{ form.hidden_tag() }}
+                {{ render_field_with_errors(form.submit) }}
 
+            </form>
+        </div>
+    </div>
+</div>
+<div class="col-md-2" ></div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/editVehicleForm.html b/app/rollerverbrauch/templates/editVehicleForm.html
index 627a24f..8d2827f 100644
--- a/app/rollerverbrauch/templates/editVehicleForm.html
+++ b/app/rollerverbrauch/templates/editVehicleForm.html
@@ -1,12 +1,18 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<h3>Edit vehicle</h3>
-<form class='form-horizontal' method="POST">
-    {{ form.hidden_tag() }}
-    {{ render_field_with_errors(form.name) }}
-    {{ render_field_with_errors(form.submit) }}
-</form>
-
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Edit vehicle</h3>
+            <form class='form-horizontal' method="POST">
+                {{ form.hidden_tag() }}
+                {{ render_field_with_errors(form.name) }}
+                {{ render_field_with_errors(form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
 
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/index.html b/app/rollerverbrauch/templates/index.html
index 4ab1607..e45181f 100644
--- a/app/rollerverbrauch/templates/index.html
+++ b/app/rollerverbrauch/templates/index.html
@@ -3,6 +3,9 @@
 
 {% block body %}
 <div class="row">
+    <div class="col-md-4">
+        {{ render_login_form() }}
+    </div>
     <div class="col-md-8">
         <div class="panel panel-default">
             <div class="panel-body">
@@ -21,22 +24,5 @@
             </div>
         </div>
     </div>
-    <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-body">
-                <form class='form-horizontal' action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
-                    {{ login_user_form.hidden_tag() }}
-                    {{ render_field_with_errors(login_user_form.email) }}
-                    {{ render_field_with_errors(login_user_form.password) }}
-                    {{ render_field_with_errors(login_user_form.remember) }}
-                    {{ render_field(login_user_form.next) }}
-                    {{ render_field_with_errors(login_user_form.submit) }}
-                    {% if security.recoverable %}
-                        <a href="{{ url_for_security('forgot_password') }}">Forgot password</a>
-                    {% endif %}
-                </form>
-            </div>
-        </div>
-    </div>
 </div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/layout.html b/app/rollerverbrauch/templates/layout.html
index e03289b..900e588 100644
--- a/app/rollerverbrauch/templates/layout.html
+++ b/app/rollerverbrauch/templates/layout.html
@@ -16,14 +16,22 @@
 {% macro render_field_with_errors(field) %}
 <div class="form-group">
 	{% if field.type == 'SubmitField' %}
-		<div class="col-sm-12" style="align:center">
+        <div class="col-md-4" ></div>
+
+		<div class="col-sm-4" style="align:center">
 			<input id="{{ field.id }}" name="{{ field.id }}" class="btn btn-default" type="submit" value="{{ field.label.text }}">
 		</div>
+    <!--
+		<div class="col-sm-3" style="align:center">
+            <a class="btn btn-default" href="{{ g.data['back'] }}" role="button">Cancel</a>
+		</div>
+    -->
+        <div class="col-md-4" ></div>
 	{% else %}
 		<label class="col-sm-6 control-label">
 			{{ field.label }}
 		</label>
-		<div class="col-sm-2">
+		<div class="col-sm-6">
 			{% if field.type == 'SelectField' %}
 				<select id="{{ field.id }}" name="{{ field.id }}" class="form-control">
 					{% for choice in field.choices %}
@@ -54,7 +62,25 @@
 			{% endif %}
 		</div>
 	{% endif %}
+</div>
+{% endmacro %}
 
+{% macro render_login_form() %}
+<div class="panel panel-default">
+	<div class="panel-body">
+		<h3>Login</h3>
+		<form class='form-horizontal' action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
+			{{ login_user_form.hidden_tag() }}
+			{{ render_field_with_errors(login_user_form.email) }}
+			{{ render_field_with_errors(login_user_form.password) }}
+			{{ render_field_with_errors(login_user_form.remember) }}
+			{{ render_field(login_user_form.next) }}
+			{{ render_field_with_errors(login_user_form.submit) }}
+			{% if security.recoverable %}
+				<a href="{{ url_for_security('forgot_password') }}">Forgot password</a>
+			{% endif %}
+		</form>
+	</div>
 </div>
 {% endmacro %}
 
@@ -151,5 +177,12 @@
 			</div>
 		</div>
 
+	    <nav class="navbar navbar-inverse navbar-fixed-bottom">
+	      <div class="container">
+	        <div class="navbar-footer">
+				<a class="navbar-brand" href="">Imprint</a>
+			</div>
+		  </div>
+		</nav>
     </body>
 </html>
diff --git a/app/rollerverbrauch/templates/newPitStopForm.html b/app/rollerverbrauch/templates/newPitStopForm.html
index df25716..37f2f71 100644
--- a/app/rollerverbrauch/templates/newPitStopForm.html
+++ b/app/rollerverbrauch/templates/newPitStopForm.html
@@ -1,20 +1,25 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<h3>New Pitstop for '{{ vehicle.name }}'</h3>
-<form class='form-horizontal' method="POST">
-    {{ form.hidden_tag() }}
-    {{ render_field_with_errors(form.date) }}
-    <span id="{{form.date.id}}_help" class="help-block">
-        {{messages['date']}}
-    </span>
-	{{ render_field_with_errors(form.odometer) }}
-   <span id="{{form.odometer.id}}_help" class="help-block">
-        {{messages['odometer']}}
-    </span>
-	{{ render_field_with_errors(form.litres) }}
-    {{ render_field_with_errors(form.submit) }}
-</form>
-
-
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>New Pitstop for '{{ vehicle.name }}'</h3>
+            <form class='form-horizontal' method="POST">
+                {{ form.hidden_tag() }}
+                {{ render_field_with_errors(form.date) }}
+                <span id="{{form.date.id}}_help" class="help-block">
+                    {{messages['date']}}
+                </span>
+                {{ render_field_with_errors(form.odometer) }}
+               <span id="{{form.odometer.id}}_help" class="help-block">
+                    {{messages['odometer']}}
+                </span>
+                {{ render_field_with_errors(form.litres) }}
+                {{ render_field_with_errors(form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/security/change_password.html b/app/rollerverbrauch/templates/security/change_password.html
index 4cc83e1..e83bcb3 100644
--- a/app/rollerverbrauch/templates/security/change_password.html
+++ b/app/rollerverbrauch/templates/security/change_password.html
@@ -2,12 +2,19 @@
 {% from "security/_macros.html" import render_field_with_errors, render_field %}
 
 {% block body %}
-<h1>Change password</h1>
-<form class='form-horizontal' action="{{ url_for_security('change_password') }}" method="POST" name="change_password_form">
-  {{ change_password_form.hidden_tag() }}
-  {{ render_field_with_errors(change_password_form.password) }}
-  {{ render_field_with_errors(change_password_form.new_password) }}
-  {{ render_field_with_errors(change_password_form.new_password_confirm) }}
-  {{ render_field_with_errors(change_password_form.submit) }}
-</form>
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Change password</h3>
+            <form class='form-horizontal' action="{{ url_for_security('change_password') }}" method="POST" name="change_password_form">
+              {{ change_password_form.hidden_tag() }}
+              {{ render_field_with_errors(change_password_form.password) }}
+              {{ render_field_with_errors(change_password_form.new_password) }}
+              {{ render_field_with_errors(change_password_form.new_password_confirm) }}
+              {{ render_field_with_errors(change_password_form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/security/forgot_password.html b/app/rollerverbrauch/templates/security/forgot_password.html
index 729b28f..97ec3ae 100644
--- a/app/rollerverbrauch/templates/security/forgot_password.html
+++ b/app/rollerverbrauch/templates/security/forgot_password.html
@@ -2,10 +2,18 @@
 {% from "security/_macros.html" import render_field_with_errors, render_field %}
 
 {% block body %}
-<h1>Send password reset instructions</h1>
-<form class='form-horizontal' action="{{ url_for_security('forgot_password') }}" method="POST" name="forgot_password_form">
-    {{ forgot_password_form.hidden_tag() }}
-    {{ render_field_with_errors(forgot_password_form.email) }}
-    {{ render_field_with_errors(forgot_password_form.submit) }}
-</form>
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Reset password</h3>
+            <form class='form-horizontal' action="{{ url_for_security('forgot_password') }}" method="POST" name="forgot_password_form">
+                {{ forgot_password_form.hidden_tag() }}
+                {{ render_field_with_errors(forgot_password_form.email) }}
+                {{ render_field_with_errors(forgot_password_form.submit) }}
+            </form>
+        </div>
+    </div>
+    <div class="col-md-2" ></div>
+</div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/security/login_user.html b/app/rollerverbrauch/templates/security/login_user.html
index c918f37..627572e 100644
--- a/app/rollerverbrauch/templates/security/login_user.html
+++ b/app/rollerverbrauch/templates/security/login_user.html
@@ -2,17 +2,12 @@
 {% from "security/_macros.html" import render_field_with_errors, render_field %}
 
 {% block body %}
-<h1>Login</h1>
-<form class='form-horizontal' action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
-    {{ login_user_form.hidden_tag() }}
-    {{ render_field_with_errors(login_user_form.email) }}
-    {{ render_field_with_errors(login_user_form.password) }}
-    {{ render_field_with_errors(login_user_form.remember) }}
-    {{ render_field(login_user_form.next) }}
-    {{ render_field_with_errors(login_user_form.submit) }}
-    {% if security.recoverable %}
-        <a href="{{ url_for_security('forgot_password') }}">Forgot password</a>
-    {% endif %}
-</form>
+<div class="row">
+    <div class="col-md-2" ></div>
+    <div class="col-md-8">
+        {{ render_login_form() }}
+    </div>
+    <div class="col-md-2" ></div>
+</div>
 {% endblock %}
 
diff --git a/app/rollerverbrauch/templates/security/register_user.html b/app/rollerverbrauch/templates/security/register_user.html
index b269de4..1e82995 100644
--- a/app/rollerverbrauch/templates/security/register_user.html
+++ b/app/rollerverbrauch/templates/security/register_user.html
@@ -2,14 +2,22 @@
 {% from "security/_macros.html" import render_field_with_errors, render_field %}
 
 {% block body %}
-<h1>Register User</h1>
-<form class='form-horizontal' action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
-    {{ register_user_form.hidden_tag() }}
-    {{ render_field_with_errors(register_user_form.email) }}
-    {{ render_field_with_errors(register_user_form.password) }}
-    {% if register_user_form.password_confirm %}
-        {{ render_field_with_errors(register_user_form.password_confirm) }}
-    {% endif %}
-    {{ render_field_with_errors(register_user_form.submit) }}
-</form>
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Register</h3>
+            <form class='form-horizontal' action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
+                {{ register_user_form.hidden_tag() }}
+                {{ render_field_with_errors(register_user_form.email) }}
+                {{ render_field_with_errors(register_user_form.password) }}
+                {% if register_user_form.password_confirm %}
+                    {{ render_field_with_errors(register_user_form.password_confirm) }}
+                {% endif %}
+                {{ render_field_with_errors(register_user_form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
+<div class="col-md-2" ></div>
 {% endblock %}
diff --git a/app/rollerverbrauch/templates/selectVehice.html b/app/rollerverbrauch/templates/selectVehice.html
index 4cb52e2..43e60bf 100644
--- a/app/rollerverbrauch/templates/selectVehice.html
+++ b/app/rollerverbrauch/templates/selectVehice.html
@@ -1,10 +1,19 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<h3>Select Vehicle</h3>
-<form class='form-horizontal' method="POST">
-    {{ form.hidden_tag() }}
-    {{ render_field_with_errors(form.vehicle) }}
-    {{ render_field_with_errors(form.submit) }}
-</form>
+<div class="col-md-2" ></div>
+<div class="col-md-8">
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h3>Select Vehicle</h3>
+            <form class='form-horizontal' method="POST">
+                {{ form.hidden_tag() }}
+                {{ render_field_with_errors(form.vehicle) }}
+                {{ render_field_with_errors(form.submit) }}
+            </form>
+        </div>
+    </div>
+</div>
+<div class="col-md-2" ></div>
 {% endblock %}
+
diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 5e8f245..66a18db 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -11,7 +11,7 @@
                 </li>
             {% endfor %}
         </ul>
-        <div id="vehicle_contetn" class="tab-content">
+        <div id="vehicle_content" class="tab-content ">
             {% for vehicle in data %}
                 <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                     <h3>{{vehicle.name}}</h3>
@@ -45,6 +45,11 @@
 					</div>
                     <ul id="charts_tabs" class="nav nav-tabs" data-tabs="tabs">
                         <li class="active">
+                            <a href="#v{{vehicle.id}}_c3" id="i{{vehicle.id}}_c3" data-toggle="tab">
+                                Consumption
+                            </a>
+                        </li>
+                        <li>
                             <a href="#v{{vehicle.id}}_c1" id="i{{vehicle.id}}_c1" data-toggle="tab">
                                 Fuelled litres
                             </a>
@@ -54,13 +59,8 @@
                                 Odometer
                             </a>
                         </li>
-                        <li>
-                            <a href="#v{{vehicle.id}}_c3" id="i{{vehicle.id}}_c3" data-toggle="tab">
-                                Consumption
-                            </a>
-                        </li>
                     </ul>
-                    <div id="my-tab-content" class="tab-content">
+                    <div id="charts_tabs-content" class="tab-content">
                         <div class="tab-pane active" id="v{{vehicle.id}}_c1">
                             {% if vehicle.pitstop_count > 0 %}
  					            <div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>