initializr base version

This commit is contained in:
joachim lusiardi 2015-03-04 08:11:52 +01:00
parent af7ef156fd
commit 927abf425e
11 changed files with 611 additions and 69 deletions

View File

@ -1,5 +1,4 @@
import sqlite3
import re
from flask import Flask
from flask import render_template
from flask import url_for

BIN
static/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

4
static/jquery-1.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

476
static/main.css Normal file
View File

@ -0,0 +1,476 @@
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
.wrapper {
width: 90%;
margin: 0 5%;
}
/* ===================
ALL: Orange Theme
=================== */
.header-container {
border-bottom: 20px solid #e44d26;
}
.footer-container,
.main aside {
border-top: 20px solid #e44d26;
}
.header-container,
.footer-container,
.main aside {
background: graytext;
}
.title {
color: white;
}
/* ==============
MOBILE: Menu
============== */
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav a {
display: block;
margin-bottom: 10px;
padding: 15px 0;
text-align: center;
text-decoration: none;
font-weight: bold;
color: white;
background: #e44d26;
}
nav a:hover,
nav a:visited {
color: white;
}
nav a:hover {
text-decoration: underline;
}
/* ==============
MOBILE: Main
============== */
.main {
padding: 30px 0;
}
.main article h1 {
font-size: 2em;
}
.main aside {
color: white;
padding: 0px 5% 10px;
}
.footer-container footer {
color: white;
padding: 20px 0;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 .title {
padding-top: 20px;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a {
float: left;
width: 27%;
margin: 0 1.7%;
padding: 25px 2%;
margin-bottom: 0;
}
nav li:first-child a {
margin-left: 0;
}
nav li:last-child a {
margin-right: 0;
}
/* ========================
INTERMEDIATE: IE Fixes
======================== */
nav ul li {
display: inline;
}
.oldie nav a {
margin: 0 0.7%;
}
}
@media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects
==================== */
.header-container,
.main aside {
-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;
}
/* ============
WIDE: Menu
============ */
.title {
float: left;
}
nav {
float: right;
width: 38%;
}
/* ============
WIDE: Main
============ */
.main article {
float: left;
width: 57%;
}
.main aside {
float: right;
width: 28%;
}
}
@media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper {
width: 1026px; /* 1140px - 10% for margins */
margin: 0 auto;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.form li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}
.form label {
width:125px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
.form textarea {padding:8px; width:300px;}
.form button {margin-left:156px;}
.form button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.form button.submit:hover {
opacity:.85;
cursor: pointer;
}
.form button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
.form a {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.form a:hover {
opacity:.85;
cursor: pointer;
}
.form a:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

1
static/main.js Normal file
View File

@ -0,0 +1 @@

File diff suppressed because one or more lines are too long

1
static/normalize.min.css vendored Normal file
View File

@ -0,0 +1 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

View File

@ -1,7 +0,0 @@
.right-aligned {
text-align: right;
}
.error {
color: red
}

View File

@ -1,12 +1,54 @@
<!doctype html>
<html>
<head>
<title>Rollerverbrauch</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Rollerverbrauch</h1>
{% block body %}
{% endblock %}
</body>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rollerverbrauch</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='normalize.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script src="{{ url_for('static', filename='modernizr-2.8.3-respond-1.4.2.min.js') }}"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Rollerverbrauch</h1>
<nav>
<ul>
{% block navigation %}
{% endblock %}
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
{% block body %}
{% endblock %}
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3>RollerVerbrauch ©2015 by Joachim Lusiardi</h3>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery-1.11.2.min.js') }}"><\/script>')</script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</body>
</html>

View File

@ -1,19 +1,32 @@
{% extends "layout.html" %}
{% block navigation %}
{% endblock %}
{% block body %}
{% if data.error %}
<div>
<p class='error'><strong>Error:</strong> {{ data.error }}</p>
</div>
{% endif %}
<form action="{{ url_for('createPitStop') }}" method='post'>
<label for='date'>Date of Pitstop</label>
<input type='date' name='date' id='date' value='{{ data.last.date }}'/>
<br />
<label for='odometer'>Odometer</label>
<input type='text' name='odometer' id='odometer' value='{{ data.last.odometer }}'/>
<label for='litres'>Litres fuelled</label>
<input type='text' name='litres' id='litres' value='{{ data.last.litres }}'/>
<input type='submit' value='Log pit stop'>
<form class="form" action="{{ url_for('createPitStop') }}" method='post'>
<ul>
<li>
<label for='date'>Date of Pitstop:</label>
<input type='date' name='date' id='date' value='{{ data.last.date }}'/>
</li>
<li>
<label for='odometer'>Odometer:</label>
<input type='text' name='odometer' id='odometer' value='{{ data.last.odometer }}'/>
</li>
<li>
<label for='litres'>Litres fuelled:</label>
<input type='text' name='litres' id='litres' value='{{ data.last.litres }}'/>
</li>
<li>
<button class="submit" type="submit">Log pit stop</button>
<a href="{{ url_for('getPitStops') }}">Abort</a>
</li>
</ul>
</form>
{% endblock %}

View File

@ -1,44 +1,46 @@
{% extends "layout.html" %}
{% block body %}
<a href='{{ url_for('createPitStopForm') }}'>Create Pitstop</a>
<table>
<tr>
<th>
Date
</th>
<th>
Odometer
</th>
<th>
Distance
</th>
<th>
Litres
</th>
<th>
Average
</th>
</tr>
{% for pitstop in data['pitstops'] %}
<tr>
<td>
{{pitstop.date}}
</td>
<td class='right-aligned'>
{{pitstop.odometer}} km
</td>
<td class='right-aligned'>
{% if pitstop.distance %}{{pitstop.distance}}{% else %} --{% endif %} km
</td>
<td class='right-aligned'>
{{pitstop.litres}} l
</td>
<td class='right-aligned'>
{% if pitstop.average %}{{pitstop.average}}{% else %} --{% endif %} l/100km
</td>
</tr>
{% endfor %}
</table
{% block navigation %}
<li><a href='{{ url_for('createPitStopForm') }}'>Create Pitstop</a></li>
{% endblock %}
{% block body %}
<table>
<tr>
<th>
Date
</th>
<th>
Odometer
</th>
<th>
Distance
</th>
<th>
Litres
</th>
<th>
Average
</th>
</tr>
{% for pitstop in data['pitstops'] %}
<tr>
<td>
{{pitstop.date}}
</td>
<td class='right-aligned'>
{{pitstop.odometer}} km
</td>
<td class='right-aligned'>
{% if pitstop.distance %}{{pitstop.distance}}{% else %} --{% endif %} km
</td>
<td class='right-aligned'>
{{pitstop.litres}} l
</td>
<td class='right-aligned'>
{% if pitstop.average %}{{pitstop.average}}{% else %} --{% endif %} l/100km
</td>
</tr>
{% endfor %}
</table
{% endblock %}