Product box style implementation

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index fd876f0e67630cf746a538fbb734b64407b2799e..1b8917a752388a3735ae1b148d0562aed06a93af 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -15,6 +15,7 @@
 @import 'boxes/person-list-box';
 @import 'boxes/event-line-box';
 @import 'boxes/job-line-box';
+@import 'boxes/product-box';
 
 // Sliders
 @import 'sliders/slider-page';

diff --git a/app/static/src/sass/modules/boxes/_product-box.scss b/app/static/src/sass/modules/boxes/_product-box.scss
new file mode 100644 (file)
index 0000000..7e79eec
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_product-box.scss
@@ -0,0 +1,55 @@
+$module: ".product-box";
+
+#{$module} {
+
+    position: relative;
+    @include margin-bottom(2);
+
+    &__image {
+
+        @include fluid-aspect(320 100);
+
+    }
+
+    &__title {
+
+        @include font-size(xxl);
+        @include line-height(2);
+        @include typeface(sans-serif);
+        @include margin(0 0 1 0);
+
+    }
+
+    &__desc {
+
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin(1 0 .25 0);
+        font-weight: weight(light);
+
+    }
+
+    &__content {
+
+        @include padding(.5);
+
+        height: 150px;
+
+    }
+
+    &:after {
+
+        content: "";
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: #979797;
+        position: absolute;
+        bottom: -24px;
+        left: 0;
+        right: 0;
+
+    }
+
+}

diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index c5545de64b9802817d8ecc56c16899cd99d67258..6ce548b49cebcd270da9dfc212f3a679bfe4a013 100644 (file)
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -106,11 +106,8 @@
             {% endfor %}
         {% endblock %}
 
-
         {% block page_person_list %}
         {% endblock %}
-        {% block products %}
-        {% endblock %}
         {% block page_sub_content %}
             {% with object.blocks.all as blocks %}
                 {% include "core/inc/block.html" %}
@@ -123,6 +120,8 @@
     </div>
 
     <div>
+        {% block products %}
+        {% endblock %}
         {% block page_related_content %}
             {% with page.dynamic_content_pages.all as dynamic_content %}
                 {% include "core/inc/related_content.html" %}

diff --git a/app/templates/shop/includes/product_list_square_style.html b/app/templates/shop/includes/product_list_square_style.html
index 39bf24f1e1ff8b1e442de3c6b019a00aa9379c3b..8eb65f4c5834f1aa680887c72152b474b99cc9fd 100644 (file)
--- a/app/templates/shop/includes/product_list_square_style.html
+++ b/app/templates/shop/includes/product_list_square_style.html
@@ -19,22 +19,20 @@
                   {% with product_inline.product as product %}
                     {% with product.links.all|get_type_link:"link" as links %}
                         <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
-                            <div class="article-box article-box--person" >
+                            <div class="product-box" >
                                 {% if product.images.all %}
-                                    <div class="article-box__header">
-                                        <a href="{{ links.0 }}" target="_blank" title="{{ product.title }}">
-                                            <figure class="article-box__image">
-                                                <img class="lazyload" src="{{ MEDIA_URL }}{% thumbnail product.images.all.0 427 500 top=0.5 %}" alt="product"/>
-                                            </figure>
-                                        </a>
-                                    </div>
+                                    <a href="{{ links.0 }}" target="_blank" title="{{ product.title }}">
+                                        <figure class="product-box__image">
+                                            <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail product.images.all.0 640 200 top=0.5 %}" alt="product"/>
+                                        </figure>
+                                    </a>
                                 {% endif %}
-                                <div class="article-box__content tal">
-                                    <a href="{{ links.0 }}" target="_blank" title="{{ product.title }}"><h3 class="article-box__title">{{ product.title }}</h3></a>
+                                <div class="product-box__content tal">
+                                    <a href="{{ links.0 }}" target="_blank" title="{{ product.title }}"><h3 class="product-box__title">{{ product.title }}</h3></a>
                                     {% if product.description %}
-                                        <div class="article-box__desc">{{ product.description|richtext_filters|safe|truncatechars_html:255 }}</div>
+                                        <div class="product-box__desc">{{ product.description|richtext_filters|safe|truncatechars_html:100 }}</div>
                                     {% elif product.content %}
-                                        <div class="article-box__desc">{{ product.content|richtext_filters|safe|truncatechars_html:255 }}</div>
+                                        <div class="product-box__desc">{{ product.content|richtext_filters|safe|truncatechars_html:100 }}</div>
                                     {% endif %}
                                 </div>
                             </div>