updated buyButton and table.showitem styles

updated templates for product listings

k4ever/buyable/templates/buyables/main

@@ -0,0 +1,31 @@
+{% if buyables %}
+	{% if removeWrapper == None %}
+	<table width=100%>
+		<tbody>
+	{% endif %}
+		{% for buyable in buyables %}
+			<tr>
+				<td class="productImage">
+					<a href="/store/show/{{ buyable.buyable__id }}"><img src="{{ MEDIA_URL }}{{ buyable.buyable__image }}" /></a>
+				</td>
+				<td class="name"><span>{{ buyable.buyable__name }}</span> ({{ buyable.num_buys }} mal gekauft)</td>
+				<td>
+					{% if buyable.buyable__deposit > 0 %}
+						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span>Kaufen (Ohne Pfand)</span></a>
+						<a class="buyButton includingDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span>Kaufen (Mit Pfand)</span></a>
+						{% if includeDeposit %}
+							<a class="buyButton onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span>Kaufen (Nur Pfand)</span></a>
+						{% endif %}
+					{% else %}
+						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span>Kaufen</span></a>
+					{% endif %}
+				</td>
+			</tr>
+		{% endfor %}
+	{% if removeWrapper == None %}
+		</tbody>
+	</table>
+	{% endif %}
+{% else %}
+	<p>{{ default|default_if_none:"Noch keine gekauft" }}</p>
+{% endif %}

k4ever/buyable/templates/buyables/product_list.html

@@ -0,0 +1,40 @@
+{% if buyables %}
+	<table class="showitem">
+		<tbody>
+		{% for buyable in buyables %}
+			<tr>
+				<td class="productImage">
+					<a href="/store/show/{{ buyable.id }}"><img src="{{ MEDIA_URL }}{{ buyable.image }}" /></a>
+				</td>
+				<td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td>
+				<td class="actions">
+					{% if buyable.hasDeposit %}
+						<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}"
+							title="Kaufen (Ohne Pfand)">
+							<span><span>{{ buyable.price|floatformat:2 }} €</span></span>
+						</a>
+
+						<a class="buyButton includingDeposit includingPrice"
+							href="/store/buy/{{ buyable.id }}/with/deposit"	title="Kaufen (Mit Pfand)">
+							<span><span>{{ buyable.price|floatformat:2 }} € / {{ buyable.deposit|floatformat:2 }} €</span></span>
+						</a>
+
+						<a class="buyButton onlyDeposit includingPrice" 
+							href="/store/buy/{{ buyable.id }}/only/deposit"	title="Kaufen (Nur Pfand)">
+							<span><span>{{ buyable.deposit|floatformat:2 }} €</span></span>
+						</a>
+
+					{% else %}
+						<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}"
+							title="Kaufen">
+							<span><span>{{ buyable.price|floatformat:2 }} €</span></span>
+						</a>
+					{% endif %}
+				</td>
+			</tr>
+		{% endfor %}
+		</tbody>
+	</table>
+{% else %}
+	<p>{{ default|default_if_none:"Noch keine gekauft" }}</p>
+{% endif %}

k4ever/buyable/templates/buyables/showItems.html

@@ -1,47 +1,6 @@
 {% extends "base.html" %}
 
 {% block "content" %}
-<div style="float:left; width=200;">
+	Sortieren nach <a href="/store/">Letzte Änderung</a> | <a href="?order=alphabet">Alphabet</a> | <a href="?order=price">Preis</a><br/>
-	Sortieren nach <a href="/store/">Letzte &Auml;nderung</a> | <a href="?order=alphabet">Alphabet</a> | <a href="?order=price">Preis</a><br/>
+	{% include "buyables/product_list.html" with buyables=items %}
-	<table class="showitem" width="864px" style="border-width:0px">
-	{% for item in items %}
-	      <tr>
-		  	<td width="64px">
-				<a href="/store/show/{{ item.id }}"><img WIDTH=64 HEIGHT=64 src="{{ MEDIA_URL }}{{ item.image }}"></a>
-			</td>
-			<th width="200px" align="center">
-				<span style="font-size: large">{{ item.name }}</span><br/>
-				<a href="/store/show/{{ item.id }}">Details</a>
-			</th>
-			<td width="200px">
-				<a class="button" href="/store/buy/{{ item.id }}/">Kaufen f&uuml;r {{ item.price|floatformat:2 }} €<br/>{% if item.hasDeposit %} (Ohne Pfand){% endif %}</a>
-			</td>
-			<td width="200px">
-				{% if item.hasDeposit %}
-					<a class="button" href="/store/buy/{{ item.id }}/with/deposit/">Kaufen f&uuml;r {{ item.price|floatformat:2 }} € <br/>+ {{ item.deposit|floatformat:2 }} € Pfand</a>
-				{% else %}	
-					&nbsp;
-				{% endif %}
-			</td>
-			<td width="200px">
-				{% if item.hasDeposit %}
-					<a class="button" href="/store/buy/{{ item.id }}/only/deposit/">Kaufen <br/>nur {{ item.deposit|floatformat:2 }} € Pfand</a>
-				{% else %}
-					&nbsp;
-				{% endif %}
-			</td>
-		</tr>
-						{% comment %}
-	Buy <a href="/store/buy/{{ item.id }}/">it!</a>
-                {% if item.hasDeposit %}
-                        <a href="/store/buy/{{ item.id }}/with/deposit/">it+deposit!</a>
-                        <a href="/store/buy/{{ item.id }}/only/deposit/"> only deposit!</a>
-                {% endif %}
- 	</br> (
-	{% for type in item.buyableType.all %}
-		{{ type }}
-	{% endfor %} )
-	</div>{% endcomment %}
-	{% endfor %}
-	</table>
 {% endblock %}

k4ever/main/templates/main/product_list.html

@@ -1,31 +1,27 @@
 {% if buyables %}
-	{% if removeWrapper == None %}
 	<table width=100%>
 		<tbody>
-	{% endif %}
 		{% for buyable in buyables %}
 			<tr>
 				<td class="productImage">
 					<a href="/store/show/{{ buyable.buyable__id }}"><img src="{{ MEDIA_URL }}{{ buyable.buyable__image }}" /></a>
 				</td>
 				<td class="name"><span>{{ buyable.buyable__name }}</span> ({{ buyable.num_buys }} mal gekauft)</td>
-				<td>
+				<td class="actions">
 					{% if buyable.buyable__deposit > 0 %}
-						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span>Kaufen (Ohne Pfand)</span></a>
+						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span></span></a>
-						<a class="buyButton includingDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span>Kaufen (Mit Pfand)</span></a>
+						<a class="buyButton includingDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span></span></a>
 						{% if includeDeposit %}
-							<a class="buyButton onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span>Kaufen (Nur Pfand)</span></a>
+							<a class="buyButton onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span></span></a>
 						{% endif %}
 					{% else %}
-						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span>Kaufen</span></a>
+						<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span></span></a>
 					{% endif %}
 				</td>
 			</tr>
 		{% endfor %}
-	{% if removeWrapper == None %}
 		</tbody>
 	</table>
-	{% endif %}
 {% else %}
 	<p>{{ default|default_if_none:"Noch keine gekauft" }}</p>
 {% endif %}

k4ever/media/css/style.css

@@ -407,6 +407,19 @@ table.showitem td.name span {
 	font-weight: bold;
 }
 
+table.showitem td.name a {
+	display: block;
+	font: 20px "Istok Web", inherit;
+	text-decoration: none;
+	color: inherit;
+	font-weight: bold;
+}
+
+table.showitem tbody tr:nth-child(even) td.name,
+table.showitem tbody tr:nth-child(even) td.actions {
+	background-color: #ececec;
+}
+
 table.showitem td, table.showitem th {
 	vertical-align: middle;
 }
@@ -429,11 +442,14 @@ table.showitem th[scope="row"] {
 a.buyButton {
 	display: block;
 	padding: 5px 10px;
+	margin: 10px 10px 15px 0;
+	position: relative;
 	height: 32px;
 	text-align: center;
 	border-radius: 6px;
 	float: left;
-	margin-right: 10px;
+	z-index: 2;
+	text-decoration: none;
 	
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
 	background-image: -webkit-linear-gradient(top, #666666, #111111);
@@ -448,6 +464,11 @@ a.buyButton {
 	box-shadow: 0 1px 3px 0 black;
 }
 
+a.buyButton.includingPrice {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
 a.buyButton:hover {
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
 	background-image: -webkit-linear-gradient(top, #555555, #000000);
@@ -465,15 +486,35 @@ a.buyButton:active {
 	box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
 }
 
-a.buyButton.includingDeposit span {
+a.buyButton.includingDeposit > span {
 	background-image: url("img/payment_deposit.png");
 	min-width: 65px;
 }
 
-a.buyButton span {
+a.buyButton.onlyDeposit > span {
+	background-image: url("img/deposit.png");
+}
+
+a.buyButton > span {
 	display: block;
 	height: 100%;
 	min-width: 32px;
 	background: url("img/payment.png") no-repeat center center transparent;
-	text-indent: -10000px;
 }
+
+a.buyButton > span > span {
+	position: absolute;
+	bottom: -15px;
+	left: 0;
+	display: block;
+	width: 100%;
+	z-index: 1;
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
+	background-color: #3398cc;
+	color: white;
+	
+	-moz-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+	-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+	box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
+}