Browse Source

front-end template rewrite, using bootstrap

master
Frederic 11 years ago
parent
commit
86d642085a
  1. 40
      cash/static/signin.css
  2. 239
      cash/static/style.css
  3. 175
      cash/templates/cash/base.html
  4. 4
      cash/templates/cash/buy_confirm.html
  5. 48
      cash/templates/cash/login.html
  6. 4
      cash/templates/cash/product_list.html
  7. 7
      cash/templates/cash/transaction_list.html
  8. 13
      cash/templates/cash/usersettings.html
  9. 1
      lugcash2/settings.py

40
cash/static/signin.css

@ -0,0 +1,40 @@ @@ -0,0 +1,40 @@
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

239
cash/static/style.css

@ -1,243 +1,28 @@ @@ -1,243 +1,28 @@
body {
//background-image: url(bg.png);
//background-color: #ffe082;
//background-repeat: repeat-x;
background-color: #ffcc33;
background-color: #eeeeee;
padding-top: 50px;
padding-bottom: 50px;
}
body, td {
font-size: 12px;
font-family: sans-serif;
text-align: center;
}
a:hover {
text-decoration: underline;
}
a, a:visited {
color: #ff9000;
text-decoration: none;
}
a.menulink, a.menulink:visited {
//line-height: 20px;
display: block;
}
a.menulink:hover {
//background-color: #ff00ff;
}
a.actionlink {
border: 2px solid #dcdcdc;
border-radius: 4px;
padding: 6px;
line-height: 42px;
}
a.actionlink:hover {
text-decoration: none;
background-color: #ffcc33;
color: #ffffff;
}
div.menulink {
width: 100%;
padding: 5px;
}
div.menulink:hover {
background-color: #efefef;
}
span.big {
font-size: 17px;
}
span.small-gray {
font-size: 10px;
color: #a0a0a0;
}
#outbox {
width: 750px;
margin: auto;
//border: 1px solid black;
}
#top {
margin-top: 30px;
table {
width: 100%;
height: 10px;
background-color: #ffcc33;
}
#header {
float: left;
width: 460px;
height: 70px;
text-align: left;
padding: 20px;
//border: 1px solid black;
}
#topmenu {
margin-left: 500px;
background-color: #ffffff;
margin-top: 65px;
padding: 8px;
border-radius: 8px;
}
ul.topmenu {
padding: 0px;
margin: 0px;
}
li.topmenu {
display: inline;
padding-right: 10px;
}
#topclear {
clear: left;
width: 0px;
height: 0px;
}
#leftmenu {
float: left;
width: 170px;
text-align: left;
padding: 15px;
background-color: #dcdcdc;
/*margin-top: 20px;*/
height: 100%;
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
}
#content {
margin-left: 200px;
//margin-top: 20px;
text-align: left;
padding: 15px;
background-color: #ffffff;
height: 100%;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
}
#contentclear {
clear: left;
width: 0px;
height: 0px;
}
#foot {
width: 100%;
color: #D37800;
padding: 3px;
text-align: center;
}
#content_bg {
border-radius: 8px;
background: url('images/menu_bg.png') repeat-y #ffffff;
}
#infoboxleft {
background-color: #efefef;
padding: 8px;
border-radius: 8px;
}
/*#content table {
background: #DCDCDC;
width: 100%;
border-collapse: collapse;
}
#content table th {
text-align: center;
border: 2px solid #ffffff;
}
#content table td {
text-align: left;
border: 2px solid #ffffff;
}*/
.txt_item {
width: 30px;
}
/* ************************* */
#content table {
border-collapse: collapse;
background-color: inherit;
width: 100%;
}
#content table td {
border-style: solid;
border-width: 0px;
border-bottom-width: 1px;
border-bottom-color: #dcdcdc;
text-align: center;
}
#content thead td, #content th {
h1 {
font-weight: bold;
color: #a0a0a0;
text-align: center;
}
div.error {
background-color: #ff9393;
padding: 15px;
text-align: center;
margin-bottom: 20px;
color: #000000;
font-weight: normal;
border-radius: 5px;
}
div.success {
background-color: #93ff93;
padding: 15px;
text-align: center;
margin-bottom: 20px;
color: #000000;
font-weight: normal;
border-radius: 5px;
}
#content table.invisibletable {
border: 0px;
background-color: #ffffff;
td,th {
border-bottom: 1px solid #b9b9b9;
}
#content table.invisibletable td {
border: none;
color: #000000;
font-weight: normal;
}
.formtable th {
font-weight: normal;
thead td,th {
border-bottom: 2px solid #b9b9b9;
font-weight: bold;
}
.formtable td {
border: none;
tbody tr:hover {
background-color: #dfdfdf;
}

175
cash/templates/cash/base.html

@ -1,132 +1,81 @@ @@ -1,132 +1,81 @@
{% load staticfiles %}
{% load url from future %}
<?xml version="1.0" encoding="utf8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="{% static "style.css" %}"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript">
function toggle_visible(id)
{
var elem = document.getElementById(id);
if(elem.style.display != 'none')
{
elem.style.display = 'none';
}
else
{
elem.style.display = 'inline';
}
}
</script>
<script type="text/javascript">
function calculate_sum() {
products = new Array();
//var p = {'id': {$items[item].id}, 'price': {$items[item].price}};
products.push(p);
sum = 0.0;
for(var i = 0; i < products.length; i++){
id = "item_"+products[i].id;
count = document.getElementById(id).value;
sum = sum + products[i].price*count;
}
document.getElementById('sum').innerHTML = sum.toFixed(2);
function modifyValue(id, n) {
var elem = document.getElementById(id);
var newval = parseInt(elem.value) + n;
if((newval >= 0) && (newval < 100))
elem.value = newval;
}
</script>
<title>Kassensystem - LUG Saar</title>
</head>
<body>
{% if debug %}
<div style="position: absolute; top: 110px; right: 43%; color: #ff0000; font-size: 36px; font-weight: bold;">
DEVELOPMENT
</div>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="outbox">
<title>Kassensystem</title>
<div id="top"></div>
<div id="header">
<img src="{% static "images/cash-register-64x64.png" %}" alt="kasse" /> <span style="font-size: 50px;">Kassensystem</span>
</div>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="/static/style.css" rel="stylesheet" />
<div id="topmenu" onclick="javascript: bbb();">
<!--<a href="#">Home</a>&nbsp;&nbsp;<a href="#">Einstellungen</a>&nbsp;&nbsp;<a href="#">Logout</a>-->
<ul class="topmenu">
{% if user.is_authenticated %}
<li class="topmenu"><a href="/">Home</a></li>
<li class="topmenu"><a href="{% url 'usersettings' %}">Einstellungen</a></li>
<li class="topmenu"><a href="{% url 'django.contrib.auth.views.logout_then_login' %}">Logout</a></li>
{% else %}
<li class="topmenu"><a href="{% url 'django.contrib.auth.views.login' %}">Login</a></li>
{% endif %}
</ul>
</div>
{% endblock %}
</head>
<body>
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'overview' %}">Kassensystem</a>
</div>
<div id="topclear"></div>
<ul class="nav navbar-nav">
<li><a href="{% url 'overview' %}">Home</a></li>
<li><a href="{% url 'products' %}">Kaufen</a></li>
<li><a href="{% url 'transactions' %}">Kontoauszug</a></li>
<li><a href="{% url 'usersettings' %}">Einstellungen</a></li>
{% if user.is_staff %}
<li><a href="/admin/">Administration</a></li>
{% endif %}
</ul>
<div id="content_bg">
<ul class="nav navbar-nav navbar-right">
<li><a href="{% url 'django.contrib.auth.views.logout_then_login' %}">Logout</a></li>
</ul>
<div id="leftmenu">
{% if user.is_authenticated and user.account %}
<div id="infoboxleft">
<span class="small-gray">Username:</span><br/>
<span class="big"><b>{{ user.username }}</b></span><br/><br/>
<span class="small-gray">Guthaben:</span><br/>
<span class="big" id="credit"{% if user.account.credit < 0 %} style="color: red"{% endif %}><b>{{ user.account.credit|floatformat:2 }} &euro;</b></span><br/>
{% if user.account.credit|add:"35" < 5 %}
<span class="small-gray" style="color: #FF5252">Achtung! Nur noch {{ user.account.credit|add:"35"|floatformat:2 }} &euro; bis zum Schuldenlimit.</span>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container">
{% block content %}
<h1>Übersicht</h1>
<strong>Herzlich willkommen, {{ user.first_name }}!</strong>
<table>
<tr><th>Username:</th><td>{{ user.username }}</td></tr>
<tr><th>Realer Name:</th><td>{{ user.first_name }} {{ user.last_name }}</td></tr>
<tr><th>Ausweis-Nr.:</th><td>{{ user.account.card_number }}</td></tr>
<tr><th>Guthaben:</th><td{% if user.account.credit < 0 %} style="color: red"{% endif %}>{{ user.account.credit|floatformat:2 }} &euro;</td></tr>
<tr><th>Betrag bis Schuldenlimit:</th><td>{{ user.account.credit|add:"35"|floatformat:2 }} &euro;</td></tr>
</table>
{% endblock %}
</div>
</div>
<div class="col-md-2 well">
<span>Username:</span>
<span><strong>{{ user.username }}</strong></span><br/>
<span>Guthaben:</span>
<span {% if user.account.credit < 0 %} style="color: red"{% endif %}><b>{{ user.account.credit|floatformat:2 }} &euro;</b></span><br/>
{% if user.account.credit|add:"35" < 5 %}
<span style="color: #FF5252">Achtung!<br/> Nur noch {{ user.account.credit|add:"35"|floatformat:2 }}&nbsp;&euro; bis zum Schuldenlimit.</span>
{% endif %}
</div>
</div>
<span class="small-gray">Funktionen</span><br/>
<div class="menulink"><a class="menulink" href="/">Übersicht</a></div>
<div class="menulink"><a class="menulink" href="{% url 'products' %}">Kaufen</a></div>
<div class="menulink"><a class="menulink" href="{% url 'transactions' %}">Kontoauszug</a></div>
{% if user.is_staff %}
<span class="small-gray">Administration</span><br/>
<div class="menulink"><a class="menulink" href="/admin/">Administration</a></div>
{% endif %}
{% else %}
Einloggen um Menüfunktionen zu benutzen.
{% endif %}
</div>
<div id="content">
{% block content %}
<h1>Konto - Übersicht</h1>
<table>
<tr><th>Username:</th><td>{{ user.username }}</td></tr>
<tr><th>Realer Name:</th><td>{{ user.first_name }} {{ user.last_name }}</td></tr>
<tr><th>Ausweis-Nr.:</th><td>{{ user.account.card_number }}</td></tr>
<tr><th>Guthaben:</th><td{% if user.account.credit < 0 %} style="color: red"{% endif %}>{{ user.account.credit|floatformat:2 }} &euro;</td></tr>
<tr><th>Betrag bis Schuldenlimit:</th><td>{{ user.account.credit|add:"35"|floatformat:2 }} &euro;</td></tr>
</table>
{% endblock %}
</div>
<div id="contentclear"></div>
</div>
</div>
<div id="foot">cashonly v0815</div>
</div>
</body>
</html>

4
cash/templates/cash/buy_confirm.html

@ -13,8 +13,8 @@ @@ -13,8 +13,8 @@
</table>
<p>Möchten Sie dieses Produkt wirklich kaufen?</p>
<a class="actionlink" href="{% url 'buy_really' product.id %}">Ja</a>
<a class="actionlink" href="{% url 'products' %}">Nein</a>
<a class="btn btn-default" href="{% url 'buy_really' product.id %}">Ja</a>
<a class="btn btn-default" href="{% url 'products' %}">Nein</a>

48
cash/templates/cash/login.html

@ -1,21 +1,37 @@ @@ -1,21 +1,37 @@
{% extends "cash/base.html" %}
{% load url from future %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block content %}
<title>Kassensystem</title>
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/signin.css" rel="stylesheet">
<form method="post" action="{% url 'django.contrib.auth.views.login' %}">
{% csrf_token %}
<label>{{ form.username.label_tag }}:<br/>
{{ form.username }}</label><br/>
<label>{{ form.password.label_tag }}:<br/>
{{ form.password }}</label><br/>
</head>
<input type="submit" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
<body>
{% endblock %}
<div class="container">
<form class="form-signin" method="post" action="{% url 'django.contrib.auth.views.login' %}">
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" name="username" class="form-control" placeholder="Username" autofocus>
<input type="password" name="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>

4
cash/templates/cash/product_list.html

@ -22,8 +22,8 @@ Kategorie: @@ -22,8 +22,8 @@ Kategorie:
<td>{{ p.name }}</td>
<td>{{ p.price|floatformat:2 }} &euro;</td>
<td>
<a href="{% url 'buy' p.id %}">Kaufen</a>
<a href="{% url 'product' p.id %}">Details</a>
<a class="btn btn-default" href="{% url 'buy' p.id %}">Kaufen</a>
<a class="btn btn-default" href="{% url 'product' p.id %}">Details</a>
</td>
</tr>
{% endfor %}

7
cash/templates/cash/transaction_list.html

@ -8,14 +8,15 @@ @@ -8,14 +8,15 @@
{% if transaction_list %}
{% if detailed %}
<a href="{% url 'transactions' %}" class="actionlink">weniger Details</a>
<a href="{% url 'transactions' %}" class="btn btn-default">weniger Details</a>
{% else %}
<a href="{% url 'transactions_detailed' %}" class="actionlink">mehr Details</a>
<a href="{% url 'transactions_detailed' %}" class="btn btn-default">mehr Details</a>
{% endif %}
<br/>
<table>
<thead>
<tr><th>Datum</th><th>Betreff</th><th>Betrag</th></tr>
<tr><th>Datum</th><th>Betreff</th><th style="text-align: right;">Betrag</th></tr>
</thead>
{% for t in transaction_list %}
<tr>

13
cash/templates/cash/usersettings.html

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
{% extends "cash/base.html" %}
{% load url from future %}
{% load bootstrap %}
{% block content %}
@ -9,10 +10,8 @@ @@ -9,10 +10,8 @@
<p>Der Kontoauszug wird nachts versandt, sofern in den vergangenen 24 Stunden Kontobewegungen stattgefunden haben.</p>
<form action="{% url 'usersettings' %}settings/" method="post">
{% csrf_token %}
<table class="formtable">
{{ settings_form.as_table }}
<th colspan="2"><br/><input type="submit" value="Speichern" /></th>
</table>
{{ settings_form|bootstrap }}
<input type="submit" class="btn btn-default" value="Speichern" />
</form>
<hr/>
@ -21,10 +20,8 @@ @@ -21,10 +20,8 @@
<p>Der PIN wird nach dem Einscannen des Mitgliederausweises abgefragt. Wenn das Feld leergelassen wird, wird kein PIN abgefragt.</p>
<form action="{% url 'usersettings' %}pin/" method="post">
{% csrf_token %}
<table class="formtable">
{{ pin_form.as_table }}
<th colspan="2"><br/><input type="submit" value="Speichern" /></th>
</table>
{{ pin_form|bootstrap }}
<input type="submit" class="btn btn-default" value="Speichern" />
</form>

1
lugcash2/settings.py

@ -128,6 +128,7 @@ INSTALLED_APPS = ( @@ -128,6 +128,7 @@ INSTALLED_APPS = (
# Uncomment the next line to enable admin documentation:
# 'django.contrib.admindocs',
'django_evolution',
'bootstrapform',
'cash'
)

Loading…
Cancel
Save