Add placeholder to event and article cards

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index 7f57694b5979374f488ba9b76626350df30b6b80..3c5aaca447078b03db0f0d887dc9bf7802c6b832 100644 (file)
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -51,6 +51,33 @@ $module: ".article-box";
         }
     }
 
+    &__placeholder {
+
+        background: $color-main;
+
+        &.recherche {
+            background-color: white;
+            background-image: url(../img/patterns/squares.png);
+            opacity: 0.4;
+        }
+        &.creation {
+            background-color: white;
+            background-image: url(../img/patterns/circles.png);
+            opacity: 0.2;
+        }
+        &.transmission {
+            background-color: white;
+            background-image: url(../img/patterns/stripes.png);
+            opacity: 0.4;
+        }
+        &.innovation {
+            background-color: white;
+            background-image: url(../img/patterns/triangles.png);
+            opacity: 0.2;
+        }
+
+    }
+
     &__tags {
         position: absolute;
         bottom: 0;

diff --git a/app/templates/agenda/includes/event_card.html b/app/templates/agenda/includes/event_card.html
index 03a18d7c1350c742756cec97dbedd8fbf39577d4..caf72eb3dd653adc11e53acd65909c7934d17aaa 100644 (file)
--- a/app/templates/agenda/includes/event_card.html
+++ b/app/templates/agenda/includes/event_card.html
@@ -14,13 +14,23 @@
 {% endblock %}
 
 {% block image %}
-    <figure class="article-box__image">
-        {% with event.images.all|get_type:'card' as images %}
-            {% if images %}
+    {% with event.images.all|get_type:'card' as images %}
+        {% if images %}
+            <figure class="article-box__image">
                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
-            {% endif %}
-        {% endwith %}
-    </figure>
+            </figure>
+        {% else %}
+            <figure class="article-box__image">
+                {% if event.departments.first %}
+                    {% with event.departments.first as department %}
+                        <div class="article-box__placeholder {{department.department.name|lower}}"></div>
+                    {% endwith %}
+                {% else %}
+                    <div class="article-box__placeholder"></div>
+                {% endif %}
+            </figure>
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block tags %}

diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index 256ebdaa277ee1815c28edb31d3609d13fd5c8ed..c2f261acb225bf88102145b8779cbef60e8b121b 100644 (file)
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -21,7 +21,11 @@
             </figure>
         {% else %}
             <figure class="article-box__image">
-                
+                {% if article.department %}
+                    <div class="article-box__placeholder {{article.department.name|lower}}"></div>
+                {% else %}
+                    <div class="article-box__placeholder"></div>
+                {% endif %}
             </figure>
         {% endif %}
     {% endwith %}