Add pattern to page box

diff --git a/app/static/src/sass/modules/boxes/_page-box.scss b/app/static/src/sass/modules/boxes/_page-box.scss
index 24f76636890d5f6a28806ed1cb7e7dd577dc99a9..52ee4cf45bce5da5518b6b735ad9017eaca41301 100644 (file)
--- a/app/static/src/sass/modules/boxes/_page-box.scss
+++ b/app/static/src/sass/modules/boxes/_page-box.scss
@@ -21,10 +21,10 @@ $module: ".page-box";
 
     &__image {
 
-        @include fluid-aspect(9 4, "img");
+        @include fluid-aspect(9 4);
 
         @include mq($until: xs) {
-            @include fluid-aspect(4.5 8, "img");
+            @include fluid-aspect(4.5 8);
             >img {
                 width: 310%;
                 left: -50%;
@@ -47,6 +47,33 @@ $module: ".page-box";
 
     }
 
+    &__placeholder {
+
+        background: $color-main;
+
+        &.pattern-bg--squares {
+            background-color: white;
+            background-image: url(../img/patterns/squares.png);
+            opacity: 0.4;
+        }
+        &.pattern-bg--circles {
+            background-color: white;
+            background-image: url(../img/patterns/circles.png);
+            opacity: 0.2;
+        }
+        &.pattern-bg--stripes {
+            background-color: white;
+            background-image: url(../img/patterns/stripes.png);
+            opacity: 0.4;
+        }
+        &.pattern-bg--triangles {
+            background-color: white;
+            background-image: url(../img/patterns/triangles.png);
+            opacity: 0.2;
+        }
+
+    }
+
     &__content {
 
         position: absolute;

diff --git a/app/templates/pages/page/includes/page_box.html b/app/templates/pages/page/includes/page_box.html
index 39f4cdf68a2117ca7ecb7e8622a617a1d3b1cd6f..e02485bbecd25dfa087fb1f1b6423f404b2fa99b 100644 (file)
--- a/app/templates/pages/page/includes/page_box.html
+++ b/app/templates/pages/page/includes/page_box.html
@@ -1,11 +1,17 @@
 {% load mezzanine_tags organization_tags %}
 <a href="{{ object.get_absolute_url }}" title="{{ object.title }}" class="page-box">
     <div class="page-box__image">
-      {% with object.get_content_model.images.all|get_type:'card' as images %}
-       {% if images %}
-        <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 900 400 %}" />
-       {% endif %}
-      {% endwith %}
+        {% with object.get_content_model.images.all|get_type:'card' as images %}
+            {% if images %}
+                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 900 400 %}" />
+            {% else %}
+                {% with page.get_ascendants|last as top_level_parent %}
+                    {% if top_level_parent.get_content_model.weaving_css_class %}
+                        <div class="page-box__placeholder {{top_level_parent.get_content_model.weaving_css_class}}"></div>
+                    {% endif %}
+                {% endwith %}
+            {% endif %}
+        {% endwith %}
     </div>
     <div class="page-box__content">
         <div>