Merge pull request #637 from informa/issue/557/demo

Browse.html styling

oscar/apps/catalogue/abstract_models.py

@@ -365,7 +365,7 @@ def is_available_to_buy(self):
                 if variant.is_available_to_buy:
                     return True
             return False
-        if self.get_product_class().track_stock:
+        if not self.product_class.track_stock:
             return True
         return self.has_stockrecord and self.stockrecord.is_available_to_buy
 

sites/demo/static/demo/less/page/buttons.less

@@ -39,7 +39,7 @@
   fieldset[disabled] & {
     cursor: default;
     pointer-events: none; // Future-proof disabling of clicks
-    .opacity(.65);
+    .opacity(65);
     .box-shadow(none);
   }
 

sites/demo/static/demo/less/page/layout.less

@@ -30,7 +30,7 @@ body {
 .page {
 }
 .page_inner {
-   padding:@gridGutterWidth;
+   padding:@gridGutterWidth 0;
    .clearfix();
 }
 

sites/demo/static/demo/less/page/plugins.less

@@ -203,6 +203,37 @@
   }
 }
 /* Star Rating Default */
+.star-rating {
+    letter-spacing: -1px;
+    color:#CBCBCB;
+}
+.star-rating.One {
+    i:first-child {
+        color:#E6CE31;
+    }
+}
+.star-rating.Two {
+    i:first-child, i:first-child + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Three {
+    i:first-child, i:first-child + i, i:first-child + i + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Four {
+    i:first-child, i:first-child + i, i:first-child + i + i, i:first-child + i + i + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Five {
+    i {
+        color:#E6CE31;
+    }
+}
+
+
 .star {
 	clear:both;
 	display:block;
@@ -237,7 +268,7 @@
 	width: 65px;
 }
 .product_pod .star {
-  margin: 0px auto 4px;
+  margin-bottom: 4px;
 }
 .product_pod .star.One,
 .promotion_single .star.One {

sites/demo/static/demo/less/page/product_lists.less

@@ -1,9 +1,22 @@
+//Breadcrumb mods
+.breadcrumb {
+  padding: 8px 15px;
+  margin: 0 0 20px;
+  list-style: none;
+  background: none;
+  .border-radius(0);
+}
 /*  Procduct columns*/
 .five li {
     width:@fifth;
 }
 .four li {
-    width:@quart;
+    @totalGutter: 10%;
+    @productColumns: 4;
+    @productGutters: 3;
+    @productGutter: @totalGutter / @productGutters;
+    width:(100 - @productGutters * @productGutter) / @productColumns;
+    margin-right:@productGutter;
 }
 .three li {
     width:@third;
@@ -19,6 +32,9 @@
 .three li,
 .two li,
 .one li {
+  &.no-margin {
+    margin-right:0;
+  }
   li {
     width:auto;
   }
@@ -27,85 +43,119 @@
   .horiz_col;
 }
 .product_pod {
-  padding:8%;
   position:relative;
-  height:405px;
+  height:430px;
   overflow:hidden;
-  text-align:center;
   .clearfix();
   & p {
     margin-bottom:0;
   }
+  .unavailable {
+    width:113px;
+    height:86px;
+    position:absolute;
+    right:0;
+    top:0;
+    background:url(/static/demo/img/ui/unavailable.png) 0 0;
+  }
   h3 {
-    font-size:1em;
+    font-size:@headingFourSize;
     margin-bottom:0;
     line-height:@baseLineHeight;
+    color:@gray;
+    span {
+    }
     a {
-      line-height:@baseLineHeight;
+      display:block;
+      text-transform: none;
+      min-height:50px;
     }
   }
   .price_color {
-    min-height:50px;
-  }
-  h4 {
-    .clearfix();
-    margin-bottom: @baseLineHeight;
-    margin-top: @baseLineHeight / 2;
-    line-height:@baseLineHeight;
-    font-size:@baseFontSize + 3;
-  }
-  form p {
     min-height:40px;
+    margin-bottom:20px;
+    position: relative;
+    span {
+      position: absolute;
+      bottom:0;
+    }
+    i {
+      display:block;
+      color:@gray;
+      font-style: normal;
+    }
+    del {
+      color:@gray;
+    }
   }
-  .availability {
-    margin-bottom:@baseLineHeight / 2;
-    text-align:center;
-    min-height:30px;
-    white-space:nowrap;
-  }
-  button {
-    width:100%;
+  .image_container {
+    border:1px solid #C7DAD7;
+    a {
+      display:block;
+    }
   }
   .product_price {
     position:absolute;
-    bottom:8%;
-    left:8%;
-    width:84%;
+    bottom:0;
+    left:0;
+    width:100%;
     min-height:130px;
     form {
       margin-bottom:0px;
-      input#id_quantity,
-      #id_product_id {
-        width:90%;
-      }
-      label {
-        display:none;
-      }
-    }
-    .btn {
-      padding-left:0px;
-      padding-right:0px;
-      width:100%;
     }
   }
 }
 /* Product list image container */
 .image_container {
-  width:100%;
-  min-height:155px;
+  min-height:200px;
+  line-height:200px;
   overflow:hidden;
   text-align: center;
   margin-bottom: @baseLineHeight / 2;
   position:relative;
   img {
-    max-height:155px;
+    max-height:150px;
     max-width:90%;
     width:auto;
     margin:0px auto;
   }
 }
-// Add a hover state for thumbnail
-a:hover .thumbnail {
-  border-color: @linkColor;
-  .box-shadow(0 1px 4px rgba(0,105,214,.25));
+
+.category-title {
+  background:#244761;
+  height:250px;
+  overflow:hidden;
+  position: relative;
+  color:@white;
+  margin-bottom:30px;
+  h1 {
+    color:@white;
+    text-transform: uppercase;
+    margin-bottom:0;
+    font-size:@headingTwoSize;
+    margin: 50px 350px 0 30px;
+  }
+  p {
+    border-top:2px solid @white;
+    padding-top:10px;
+    margin: 0 350px 0 30px;
+  }
+  div {
+    position: relative;
+    background:url(/static/demo/img/ui/bg-category-title.png) -200px 0 no-repeat;
+    position: absolute;
+    top:0;
+    left:0px;
+    height:250px;
+  }
+  img {
+    position: absolute;
+    width:auto;
+    height:250px;
+    right:0;
+    top:0;
+  }
+  i {
+
+  }
 }

sites/demo/templates/catalogue/browse.html

@@ -0,0 +1,40 @@
+{% extends "oscar/catalogue/browse.html" %}
+
+{% load currency_filters %}
+{% load basket_tags %}
+{% load promotion_tags %}
+{% load product_tags %}
+{% load i18n %}
+
+{% block header %}{% endblock  %}
+
+{% block content %}
+
+<div class="category-title">
+    {% if category.image %}
+        <img src="{{ category.image.url }}" alt="{{ summary }}" />
+    {% endif %}
+    <div>
+        <h1>{{ summary }}</h1>
+        {% if category.description %}
+        <p>{{ category.description|safe|truncatechars:250 }}</p>
+        {% endif %} 
+    </div>
+</div>
+
+
+    {% if products.count %}
+    <section>
+        <div class="mod">
+            <ol class="products four">
+                {% for product in products %}
+                    <li {% if forloop.counter|divisibleby:"4" %}class="no-margin"{% endif %}>{% render_product product %}</li>
+                {% endfor %}
+            </ol>
+            {% include "partials/pagination.html" %}
+        </div>
+    </section>
+    {% else %}
+        <p class="nonefound">{% trans "No products found." %}</p>
+    {% endif %}
+{% endblock content %}

sites/demo/templates/catalogue/detail.html

@@ -0,0 +1,52 @@
+{% extends "oscar/catalogue/detail.html" %}
+{% load currency_filters %}
+{% load history_tags %}
+{% load reviews_tags %}
+{% load staticfiles %}
+{% load product_tags %}
+{% load i18n %}
+
+{% block product_gallery %}
+<div class="span6">
+    {# change this to flexslider }
+</div>
+{% endblock %}
+
+
+{% block product_main %}
+<div class="span6">
+    <h4>{{ product.stockrecord.partner.name }}</h4>
+    <h1>{{ product.get_title }}</h1>
+
+    {% block product_stock_record %}
+    {% include "catalogue/partials/stock_record.html" %}
+    {% endblock %}
+
+    {% comment %}
+    {# will use this else where}
+    {% if product.rating != None %}
+    <p class="star {{ product.rating|as_stars }}">
+        <small><a href="{% url catalogue:reviews-list product.slug product.id %}">
+                {% blocktrans count reviews|length as num_reviews %}
+                1 custom review
+                {% plural %}
+                {{ num_reviews }} customer reviews
+                {% endblocktrans %}
+        </a></small>
+        &nbsp;
+        <a id="write_review" href="{% url catalogue:reviews-add product.slug product.id %}#addreview" class="btn btn-success btn-small">{% trans "Write a review" %}</a>
+    </p>
+    {% else %}
+        <p class="star">
+            <a id="write_review" href="{% url catalogue:reviews-add product.slug product.id %}#addreview" class="btn btn-success btn-small">{% trans "Write a review" %}</a>
+        </p>
+    {% endif %}
+    {% endcomment %}
+
+    <hr/>
+
+    {% block product_basket_form %}
+    {% include "catalogue/partials/add_to_basket_form.html" %}
+    {% endblock %}
+</div><!-- /span6 -->
+{% endblock %}

sites/demo/templates/catalogue/partials/add_to_basket_form_compact.html

@@ -0,0 +1,13 @@
+{% load basket_tags %}
+{% load i18n %}
+
+{% basket_form request.basket product as basket_form single %}
+<form action="{% url basket:add %}" method="post">
+    {% csrf_token %}
+    {{ basket_form.as_p }}
+    {% if product.is_available_to_buy %}
+        <button type="submit" class="btn btn-block btn-primary btn-full">{% trans "Add to basket" %}</button>
+    {% else %}
+        <span class="btn btn-info btn-block disabled">{% trans "Out of Stock" %}</span>
+    {% endif %}
+</form>