Beautify settings page and buying history, order items in store

devel/TODO

@@ -18,15 +18,15 @@ Todo bis release:
  - barcode client (sping)
 	 - pfand fuer barcode client
 	 - guter erklärender plugintext
- - startseite (konrad?)
+ [x] startseite
  	- beliebte items mit kaufoption, eventuell sortiert nach drei gruppen wie (Getränke, Essen, [Anderes]) oder (Getränke, Süßes, Salziges, [Anderes])
  - einkaufsseite
 	- alle items, sortierung nach preis/alphabet
  - suchfeld fixen (konrad?)
-[x] image aspect ration checking und/oder irgendwo hinschreiben (seba)
+ [x] image aspect ration checking und/oder irgendwo hinschreiben (seba)
- - transaktionsseite schöner machen
+ [x] transaktionsseite schöner machen
  - pluginseite (einstellungen) schöner machen
- - history: items durch bilder ersetzen, pfand drunterschreiben wenn pfand...
+ [x] history: items durch bilder ersetzen, pfand drunterschreiben wenn pfand...
  - apidocs probelesen
  - icons auf startseite unter loginfeld
  - blabla zum kassensystem fuer docs (tannek, seba)

k4ever/buyable/templates/buyables/history.html

@@ -2,7 +2,9 @@
 
 {% block "content" %}
 	{% if history %}
-		<h1>Fr&uuml;here Eink&auml;ufe von {{ user }}</h1>
+		<div style="width:800px">
+			<h1>Fr&uuml;here Eink&auml;ufe von {{ user }}</h1>
+		</div>
 		<div class="pagination" style="width:800px; text-align:center; margin-top:25px">
 			<table width="100%">
 				<tr>

k4ever/buyable/templates/buyables/showItems.html

@@ -2,6 +2,7 @@
 
 {% block "content" %}
 <div style="float:left; width=200;">
+	Sortieren nach <a href="/store/">Letzte &Auml;nderung</a> | <a href="?order=alphabet">Alphabet</a> | <a href="?order=price">Preis</a><br/>
 	<table class="showitem" width="864px" style="border-width:0px">
 	{% for item in items %}
 	      <tr>

k4ever/buyable/views.py

@@ -11,6 +11,17 @@ from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger, Invali
 def showItems(request):
 	# FIXME: Implement pagination here
 	items = Buyable.objects.all()
+		
+	try:
+		order_by = request.GET.get('order', 'date')
+	except ValueError:
+		order_by = 'date'
+	
+	if order_by == 'alphabet':
+		items = items.order_by('name')
+	if order_by == 'price':
+		items = items.order_by('price')
+	
 	return render_to_response("buyables/showItems.html", {'items': items}, RequestContext(request))
 
 @login_required

k4ever/main/templates/settings/settings.html

@@ -1,13 +1,12 @@
 {% extends "base.html" %}
 
 {% block "content" %}
-	<h2>Passwort</h2>
+	<div style="width:800px">
-	<hr />
+	<h1>Passwort</h1>
 	Da die meisten der Nutzer dieses Systems &uuml;ber den LDAP der Freitagsrunde laufen, kann man hier sein Passwort nicht &auml;ndern. Wenn du dein Passwort trotzdem &auml;ndern m&ouml;chstest (und dieses System nicht &uuml;ber einen Freitagsrundenaccount benutzt), wende dich bitte an einen der Freitagsrunden-Admins. (lies: not implemented)
-	<br />
+	</div>
-	<br />
+	<div style="width:800px; margin-top: 25px">
-	<h2>Plugin Berechtigungen</h2>
+	<h1>Pluginberechtigungen</h1>
-	<hr />
 	{% if pluginerror %}
 		<font color="red">{{ pluginerror|safe }}</font>
 	{% endif %}
@@ -15,28 +14,33 @@
 		<font color="green">{{ pluginmsg|safe }}</font>
 	{% endif %}
 	<p>
-	<table>
+	<table style="border: 2px solid #BBBBBB; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px">
-		<tr>
+		<tr style="height: 40px">
-			<th>Name</th>
+			{% if permissions %}
-			<th>Author</th>
+				<th rowspan={{ permissions|length|add:"1"}} style="vertical-align:middle; text-align:center; color:#0cb31c; -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg)">Erlaubt</th>
-			<th>Version</th>
+			{% else %}
-			<th>Beschreibung</th>
+				<th>&nbsp;</th>
-			<th>AuthBlob</th>
+			{% endif %}
-			<th>Erlauben/Verbieten</th>
+			<th width="100px" style="vertical-align:middle">Name</th>
+			<th width="100px" style="vertical-align:middle">Author</th>
+			<th style="vertical-align:middle">Beschreibung</th>
+			<th width="100px" style="vertical-align:middle">AuthBlob</th>
+			<th width="150px" style="vertical-align:middle">Erlauben/Verbieten</th>
 		</tr>
 	{% for p in permissions %}
-	<tr style="background: green">
+	<tr>
-		<td style="vertical-align:middle">{{ p.plugin.name }}</td>
+		<td style="vertical-align:middle; text-align:center">{{ p.plugin.name }}<br/>{{ p.plugin.version }}</td>
-		<td style="vertical-align:middle">{{ p.plugin.author }}</td>
+		<td style="vertical-align:middle; text-align:center">{{ p.plugin.author }}</td>
-		<td style="vertical-align:middle">{{ p.plugin.version }}</td>
+		<td style="vertical-align:middle; text-align:center"><div style="margin: 5px">{{ p.plugin.descr }}</div></td>
-		<td style="vertical-align:top">{{ p.plugin.descr }}</td>
+		<td style="text-align:center">
-		<td>
 		{% if p.plugin.userCanWriteAuthblob %}
-			<form method="post" action="/user/settings/plugin/authblob/{{ p.plugin.id }}/">
+			<div style="margin:5px">
-				{% csrf_token %}
+				<form method="post" action="/user/settings/plugin/authblob/{{ p.plugin.id }}/">
-				<textarea name="authblob">{{ p.authblob }}</textarea>
+					{% csrf_token %}
-				<input type="submit" value="Speichern">
+					<textarea name="authblob">{{ p.authblob }}</textarea>
-			</form>
+					<input type="submit" value="Speichern">
+				</form>
+			</div>
 		{% else %}
 			{% if p.plugin.userCanReadAuthblob %}
 				{{ p.authblob }}
@@ -45,20 +49,22 @@
 			{% endif %}
 		{% endif %}
 		</td>
-		<td style="vertical-align:middle"><a href="/user/settings/plugin/deny/{{ p.plugin.id }}/">Plugin verbieten</a></td>
+		<td style="vertical-align:middle; text-align:center"><a href="/user/settings/plugin/deny/{{ p.plugin.id }}/" class="button" style="color: #e61e1e; margin-bottom: 35px">Plugin verbieten</a></td>
 	</tr>
 	{% endfor %}
-	{% for plugin in unallowed %}
+	{% if unallowed %}
-	<tr style="background: red">
+		<tr style="border-top: 1px solid #BBBBBB">
-		<td style="vertical-align:middle">{{ plugin.name }}</td>
+			<th rowspan={{ unallowed|length}} style="vertical-align:middle; text-align:center; color:#e61e1e; -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg)">Verboten</th>
-		<td style="vertical-align:middle">{{ plugin.author }}</td>
+			{% for plugin in unallowed %}
-		<td style="vertical-align:middle">{{ plugin.version }}</td>
+				<td style="vertical-align:middle; text-align:center">{{ plugin.name }}<br/>{{ plugin.version }}</td>
-		<td style="vertical-align:top">{{ plugin.descr }}</td>
+				<td style="vertical-align:middle; text-align:center">{{ plugin.author }}</td>
-		<td>&nbsp;</td>
+				<td style="vertical-align:middle; text-align:center"><div style="margin:5px">{{ plugin.descr }}</div></td>
-		<td style="vertical-align:middle"><a href="/user/settings/plugin/allow/{{ plugin.id }}/">Plugin erlauben</a></td>
+				<td>&nbsp;</td>
-	</tr>
+				<td style="vertical-align:middle; text-align:center"><a class="button" href="/user/settings/plugin/allow/{{ plugin.id }}/" style="color: #0cb31c; margin-buttom: 35px">Plugin erlauben</a></td>
-	{% endfor %}
+			</tr>
-
+			<tr>
+			{% endfor %}
+		{% endif %}
 	</table>
 	</p>
 {% endblock %}