From b3e49885477632cb023ae63a71ec2324dcb11add Mon Sep 17 00:00:00 2001 From: Konrad Mohrfeldt Date: Thu, 13 Oct 2011 01:37:28 +0200 Subject: [PATCH] updated start page view --- k4ever/main/templates/main/product_list.html | 31 +++ k4ever/main/templates/main/startpage.html | 265 +++---------------- k4ever/media/css/style.css | 117 +++++--- 3 files changed, 152 insertions(+), 261 deletions(-) create mode 100644 k4ever/main/templates/main/product_list.html diff --git a/k4ever/main/templates/main/product_list.html b/k4ever/main/templates/main/product_list.html new file mode 100644 index 0000000..8fc65b2 --- /dev/null +++ b/k4ever/main/templates/main/product_list.html @@ -0,0 +1,31 @@ +{% if buyables %} + {% if removeWrapper == None %} + + + {% endif %} + {% for buyable in buyables %} + + + + + + {% endfor %} + {% if removeWrapper == None %} + +
+ + {{ buyable.buyable__name }} ({{ buyable.num_buys }} mal gekauft) + {% if buyable.buyable__deposit > 0 %} + Kaufen (Ohne Pfand) + Kaufen (Mit Pfand) + {% if includeDeposit %} + Kaufen (Nur Pfand) + {% endif %} + {% else %} + Kaufen + {% endif %} +
+ {% endif %} +{% else %} +

{{ default|default_if_none:"Noch keine gekauft" }}

+{% endif %} \ No newline at end of file diff --git a/k4ever/main/templates/main/startpage.html b/k4ever/main/templates/main/startpage.html index 38c0e11..c0c2040 100644 --- a/k4ever/main/templates/main/startpage.html +++ b/k4ever/main/templates/main/startpage.html @@ -1,238 +1,45 @@ {% extends "base.html" %} {% block "content" %} -
- {% if allMostDrinks or allMostSnacks %} - - - - - - - - - - - - - - - - - - - + {% if allMostDrinks or allMostSnacks %} +
-   - -

Die beliebtesten Artikel

- 		-

Deine Lieblingsartikel

- 		-

Zuletzt hattest du:

-
-

Getränke

- 		- {% if allMostDrinks %} - - {% for buyable in allMostDrinks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }}
({{ buyable.num_buys }} mal) - 		- Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} - -
- {% else %} - Noch keine gekauft. - {% endif %} - 		- {% if usersMostDrinks %} - - {% for buyable in usersMostDrinks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }}
({{ buyable.num_buys }} mal) - 		- Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} - -
- {% else %} - Noch keine gekauft. - {% endif %} - 		- {% if usersLastDrinks %} - - {% for buyable in usersLastDrinks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }} - - Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} - -
- {% else %} - Noch keine gekauft. - {% endif %} -
-

Snacks

- 		- {% if allMostSnacks %} - - {% for buyable in allMostSnacks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }}
({{ buyable.num_buys }} mal) - 		- Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} -
- {% else %} - Noch keine gekauft. - {% endif %} - 		- {% if usersMostSnacks %} - - {% for buyable in usersMostSnacks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }}
({{ buyable.num_buys }} mal) - 		- Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} -
- {% else %} - Noch keine gekauft. - {% endif %} - 		- {% if usersLastSnacks %} - - {% for buyable in usersLastSnacks %} - - - - - - {% endfor %} -
- - - {{ buyable.buyable__name }} - - Kaufen - {% if buyable.buyable__deposit > 0 %} - (Ohne Pfand) Kaufen (Mit Pfand) - {% else %} - - {% endif %} -
- {% else %} - Noch keine gekauft. - {% endif %} -
+ + + + + + + + + + + + + + + + + + + + +
 Die beliebtesten ArtikelDeine Lieblingsartikel + Zuletzt hattest du
Getränke + {% include "main/product_list.html" with buyables=allMostDrinks %} + + {% include "main/product_list.html" with buyables=usersMostDrinks %} + + {% include "main/product_list.html" with buyables=usersLastDrinks %} +
Snacks + {% include "main/product_list.html" with buyables=allMostSnacks %} + + {% include "main/product_list.html" with buyables=usersMostSnacks %} + + {% include "main/product_list.html" with buyables=usersLastSnacks %} +
{% else %} {{ error }} Es hat scheinbar noch niemand etwas gekauft. Sei der Erste! {% endif %} -
- - {% comment %} -
- {% if usersMostSnacks or usersMostDrinks %} -

Deine Lieblingsartikel

- - - - - - - -
- Getränke - - Snacks -
- {% else %} - {{ error }} - Wie es aussieht, hast du noch nichts gekauft. Das kannst du ändern! - {% endif %} -
-
- {% if usersLastSnacks or usersLastDrinks %} -

Du hattest als letztes:

- - - - - - - -
- Getränke - - Snacks -
- {% else %} - {{ error }} - {% endif %} -
- {% endcomment %} {% endblock %} diff --git a/k4ever/media/css/style.css b/k4ever/media/css/style.css index 18b0815..b76ddc5 100644 --- a/k4ever/media/css/style.css +++ b/k4ever/media/css/style.css @@ -26,6 +26,10 @@ table, caption, tbody, tfoot, thead, tr, th, td { vertical-align: baseline; } +a:focus { + outline: none; +} + .content { margin: 5px; } @@ -34,7 +38,7 @@ body { line-height: 1; } -h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6, th { clear: both; font-weight: bold; font-family: "Istok Web", inherit; @@ -96,6 +100,7 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus { background-image: -ms-linear-gradient(top, #666666, #111111); background-image: -o-linear-gradient(top, #666666, #111111); background-image: linear-gradient(top, #666666, #111111); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111'); } @@ -131,8 +136,9 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus { color: white; border-bottom: 2px solid black; padding-top: 10px; - /*border-top: 2px solid black;*/ + -moz-box-shadow: 0 3px 8px 0 black inset; -webkit-box-shadow: 0 3px 8px 0 black inset; + box-shadow: 0 3px 8px 0 black inset; } #header .base_nav h1 { @@ -371,56 +377,103 @@ html body div#header div.search ul.ui-autocomplete li.ui-menu-item.focus { font-weight: bold; } -/* TABLE */ -/* Edited by Theri */ table.showitem { - border:1px solid #DFDFDF; - border-collapse: separate; - border-spacing: 5pt; + border: 0 none; + border-collapse: collapse; + width: 100%; } -table.showitem td { - vertical-align: middle; +table.showitem td.productImage { + width: 80px; + text-align: center; +} + +table.showitem td.productImage img { + max-width: 100%; + max-height: 64px; } table.showitem th { - vertical-align: middle; + font-size: 20px; text-align:center; } -table.details { - border-width: 0px; - margin-top: 25px; +table.showitem td.name { + padding: 0 10px; } -table.details th { - vertical-align: middle; - text-align: center; +table.showitem td.name span { + display: block; + font-weight: bold; } -table.details td { +table.showitem td, table.showitem th { vertical-align: middle; - text-align: center; } -.content a { - color: #3398CC; - text-decoration: none; +table.showitem tr td { + padding-bottom: 10px; } - -.content a.button { - text-align: center; + +table.showitem th[scope="row"] { + width: 20px; + padding: 0; + margin: 0; + -moz-transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); +} + +a.buyButton { display: block; - margin-top: 7px; - padding: 0 10px; + padding: 5px 10px; + height: 32px; + text-align: center; + border-radius: 6px; + float: left; + margin-right: 10px; + + background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111)); + background-image: -webkit-linear-gradient(top, #666666, #111111); + background-image: -moz-linear-gradient(top, #666666, #111111); + background-image: -ms-linear-gradient(top, #666666, #111111); + background-image: -o-linear-gradient(top, #666666, #111111); + background-image: linear-gradient(top, #666666, #111111); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111'); + + -moz-box-shadow: 0 1px 3px 0 black; + -webkit-box-shadow: 0 1px 3px 0 black; + box-shadow: 0 1px 3px 0 black; +} + +a.buyButton:hover { + background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000)); + background-image: -webkit-linear-gradient(top, #555555, #000000); + background-image: -moz-linear-gradient(top, #555555, #000000); + background-image: -ms-linear-gradient(top, #555555, #000000); + background-image: -o-linear-gradient(top, #555555, #000000); + background-image: linear-gradient(top, #555555, #000000); + + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#000000'); } -.content a:hover { - background: #3398CC; - color: white; +a.buyButton:active { + -moz-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset; + -webkit-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; } -.content h1 { - font-size: 20px; - text-align: center; +a.buyButton.includingDeposit span { + background-image: url("img/payment_deposit.png"); + min-width: 65px; +} + +a.buyButton span { + display: block; + height: 100%; + min-width: 32px; + background: url("img/payment.png") no-repeat center center transparent; + text-indent: -10000px; }