seba
/
k4ever
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated buyButton and table.showitem styles 

updated templates for product listings
This commit is contained in:
Konrad Mohrfeldt 2011-10-14 09:21:13 +02:00
parent 37cd8698bf
commit adb8233120
5 changed files with 123 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
k4ever/buyable/templates/buyables/main Normal file
View File

@ -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 %}

40
k4ever/buyable/templates/buyables/product_list.html Normal file
View File

@ -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 %}

45
k4ever/buyable/templates/buyables/showItems.html
View File

@ -1,47 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block "content" %} {% 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 %} {% endblock %}

14
k4ever/main/templates/main/product_list.html
View File

@ -1,31 +1,27 @@
{% if buyables %} {% if buyables %}
{% if removeWrapper == None %}
<table width=100%> <table width=100%>
<tbody> <tbody>
{% endif %}
{% for buyable in buyables %} {% for buyable in buyables %}
<tr> <tr>
<td class="productImage"> <td class="productImage">
<a href="/store/show/{{ buyable.buyable__id }}"><img src="{{ MEDIA_URL }}{{ buyable.buyable__image }}" /></a> <a href="/store/show/{{ buyable.buyable__id }}"><img src="{{ MEDIA_URL }}{{ buyable.buyable__image }}" /></a>
</td> </td>
<td class="name"><span>{{ buyable.buyable__name }}</span> ({{ buyable.num_buys }} mal gekauft)</td> <td class="name"><span>{{ buyable.buyable__name }}</span> ({{ buyable.num_buys }} mal gekauft)</td>
<td> <td class="actions">
{% if buyable.buyable__deposit > 0 %} {% 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 %} {% 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 %} {% endif %}
{% else %} {% 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 %} {% endif %}
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
{% if removeWrapper == None %}
</tbody> </tbody>
</table> </table>
{% endif %}
{% else %} {% else %}
<p>{{ default|default_if_none:"Noch keine gekauft" }}</p> <p>{{ default|default_if_none:"Noch keine gekauft" }}</p>
{% endif %} {% endif %}

49
k4ever/media/css/style.css
View File

@ -407,6 +407,19 @@ table.showitem td.name span {
font-weight: bold; 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 { table.showitem td, table.showitem th {
vertical-align: middle; vertical-align: middle;
} }
@ -429,11 +442,14 @@ table.showitem th[scope="row"] {
a.buyButton { a.buyButton {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
margin: 10px 10px 15px 0;
position: relative;
height: 32px; height: 32px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
float: left; 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-gradient(linear, left top, left bottom, from(#666666), to(#111111));
background-image: -webkit-linear-gradient(top, #666666, #111111); background-image: -webkit-linear-gradient(top, #666666, #111111);
@ -448,6 +464,11 @@ a.buyButton {
box-shadow: 0 1px 3px 0 black; box-shadow: 0 1px 3px 0 black;
} }
a.buyButton.includingPrice {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
a.buyButton:hover { a.buyButton:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000)); background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
background-image: -webkit-linear-gradient(top, #555555, #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; 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"); background-image: url("img/payment_deposit.png");
min-width: 65px; min-width: 65px;
} }
a.buyButton span { a.buyButton.onlyDeposit > span {
background-image: url("img/deposit.png");
}
a.buyButton > span {
display: block; display: block;
height: 100%; height: 100%;
min-width: 32px; min-width: 32px;
background: url("img/payment.png") no-repeat center center transparent; 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;
} }