From: Jérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Date: Fri, 21 Oct 2016 09:17:55 +0000 (+0200)
Subject: Add placeholder to event and article cards
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=86e781a6e10733c15f69e6a46e96c9725d2fa26d;p=mezzo.git

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 7f57694b..3c5aaca4 100644
--- 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 03a18d7c..caf72eb3 100644
--- 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 256ebdaa..c2f261ac 100644
--- 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 %}