updated account view template and styles

k4ever/media/css/style.css

@@ -155,9 +155,11 @@ a:hover {
   background-color: #3398cc;
 }
 .content {
+  max-width: 1280px;
+  min-width: 800px;
   padding: 5px;
 }
-input {
+input, select {
   padding: 2px 5px;
   border: 1px solid #E5E5E5;
   background: url("img/404") white;
@@ -554,3 +556,52 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   vertical-align: middle;
   margin: 0 10px 0 0;
 }
+.textData thead, .textData tfoot {
+  background-color: #111111;
+}
+.textData thead th, .textData tfoot th {
+  font-weight: bold;
+  color: white;
+}
+.textData tr:nth-child(even) td {
+  background-color: #eaeaea;
+}
+.textData tr:hover td {
+  background-color: #9e9e9e;
+}
+.textData th, .textData td {
+  padding: 7px 30px;
+  vertical-align: middle;
+  text-align: center;
+}
+.icon {
+  display: block;
+  height: 24px;
+  width: 24px;
+  text-indent: -10000px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  margin: 0 auto;
+}
+.icon.approved {
+  background-image: url("img/approved.png");
+}
+.icon.pending {
+  background-image: url("img/pending.png");
+}
+.icon.cash {
+  background-image: url("img/cash.png");
+}
+.icon.transfer {
+  background-image: url("img/transfer.png");
+}
+.transaction {
+  padding: 0 30px;
+}
+.transaction > * {
+  float: none;
+  display: block;
+}
+.transaction input[type="text"], .transaction select {
+  font-size: 16px;
+}

k4ever/media/css/style.less

@@ -161,10 +161,12 @@ a {
 }
 
 .content {
+	max-width: 1280px;
+	min-width: 800px;
 	padding: 5px;
 }
 
-input {
+input, select {
 	padding: 2px 5px;
 	border: 1px solid #E5E5E5;
 	background: url("@{fldImages}/404") white;
@@ -560,4 +562,70 @@ table.itemListContainer {
 		vertical-align: middle;
 		margin: 0 10px 0 0;
 	}
+}
+
+.textData {
+	thead, tfoot {
+		background-color: @clrDarkGrey;
+
+		th {
+			font-weight: bold;
+			color: white;
+		}
+	}
+
+	tr {
+		&:nth-child(even) td {
+			background-color: @clrLightGrey;
+		}
+
+		&:hover td {
+			background-color: darken(@clrLightGrey, 30%);
+		}
+	}
+
+	th, td {
+		padding: 7px 30px;
+		vertical-align: middle;
+		text-align: center;
+	}
+}
+
+.icon {
+	display: block;
+	height: 24px;
+	width: 24px;
+	text-indent: -10000px;
+	background-position: 0 0;
+	background-repeat: no-repeat;
+	margin: 0 auto;
+
+	&.approved {
+		background-image: url("@{fldImages}/approved.png");
+	}
+
+	&.pending {
+		background-image: url("@{fldImages}/pending.png");
+	}
+
+	&.cash {
+		background-image: url("@{fldImages}/cash.png");
+	}
+
+	&.transfer {
+		background-image: url("@{fldImages}/transfer.png");
+	}
+}
+
+.transaction {
+	padding: 0 30px;
+
+	> * {
+		float: none;
+		display: block;
+	}
+
+	input[type="text"], select {
+		font-size: 16px;
+	}
 }

k4ever/transaction/templates/transaction/overview.html

@@ -8,73 +8,51 @@
 			<font color="green"><h1>Du hast Geld aufgeladen.</h1></font>
 		{% endif %}
 	{% endif %}
-	<div style="width:800px"><h1>Konto aufladen</h1>
-		<form method="POST" action="/transaction/">
-			{% csrf_token %}
-			<table width="500px" class="showitem" style="border-width:0px">
-				{{ form.as_table }}
+	<h2>Konto aufladen</h2>
+	<form method="POST" class="transaction" action="/transaction/">
+		{% csrf_token %}
+		{{ form.as_table }}
+		<input type="submit" class="button" value="Einzahlen">
+	</form>
+	
+	<h2>Vergangene Transaktionen</h2>
+	<table class="textData">
+		<thead>
+			<tr>
+				<th>Datum</th>
+				<th>Uhrzeit</th>
+				<th>Betrag</th>
+				<th>Typ</th>
+				<th>Status</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			{% for transaction in history %}
 				<tr>
+					<td>{{ transaction.dateTime|date:"j. F Y" }}</td>
+					<td>{{ transaction.dateTime|date:"H:i" }} Uhr</td>
+					<td>{{ transaction.amount|floatformat:2 }}€</td>
+					<td>{{ transaction.transactionType }}</td>
 					<td>
-						&nbsp;
-					</td>
-					<td>
-						<input type="submit" value="Senden">
+						{% if not transaction.transactionType.needsCheck or transaction.checked %} 
+							<span class="icon approved" title="Zahlung eingegangen">Zahlung eingegangen</span>
+						{% else %}
+							<span class="icon pending" title="Zahlungsbestätigung steht noch aus">Zahlungsbestätigung steht noch aus</span>
+						{% endif %}
 					</td>
 				</tr>
-			</table>
-		</form>
-	</div>
-
-	<div style="width:800px;margin-top:25px"><h1>Vergangene Transaktionen:</h1>
-	<table class="showitem" style="border-width:0px">
-		{% comment %}
-		<tr>
-			<th>
-				Datum
-			</th>
-			<th>
-				Uhrzeit
-			</th>
-			<th>
-				Betrag
-			</th>
-			<th>
-				Typ
-			</th>
-			<th>
-				Status
-			</th>
-		</tr>
-		{% endcomment %}
+			{% endfor %}
+		</tbody>
 
-		{% for transaction in history %}
+		<tfoot>
 			<tr>
-				<td>
-					{% if forloop.first and transacted %}
-						<b>
-					{% endif %}
-					[ {{ transaction.dateTime|date:"j. M Y" }},
-				</td>
-				<td>
-					{{ transaction.dateTime|date:"H:i" }} Uhr ]
-				<td>
-					<b>{{ transaction.amount|floatformat:2 }}€</b>
-				</td>
-				<td>
-					durch {{ transaction.transactionType }}
-				</td>
-				<td>
-					{% if not transaction.transactionType.needsCheck or transaction.checked %} 
-						 eingegangen
-					{% else %}
-						<b> aber noch nicht best&auml;tigt </b>
-					{% endif %}
-				</td>
-				{% if forloop.first and transacted %}
-					</b>
-				{% endif %}
+				<th>Datum</th>
+				<th>Uhrzeit</th>
+				<th>Betrag</th>
+				<th>Typ</th>
+				<th>Status</th>
 			</tr>
-		{% endfor %}
+		</tfoot>
 	</table>
-	</div>
 {% endblock %}