From 47aec83b1e442e57484c36ab60a9b306a556ddce Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?=
 <Jeremy@iMac-de-Jeremy-2.fritz.box>
Date: Tue, 14 Feb 2017 10:24:51 +0100
Subject: [PATCH] Update Instagram feed with a slider

---
 app/static/src/js/modules/instagram.js      | 22 +++++++++++++++++++++
 app/static/src/sass/modules/_all.scss       |  1 +
 app/static/src/sass/modules/_instagram.scss | 19 ++++++++++++++++++
 app/templates/base.html                     |  3 ---
 app/templates/includes/instagram.html       | 12 +++++------
 5 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 app/static/src/sass/modules/_instagram.scss

diff --git a/app/static/src/js/modules/instagram.js b/app/static/src/js/modules/instagram.js
index f261edc4..169b4389 100644
--- a/app/static/src/js/modules/instagram.js
+++ b/app/static/src/js/modules/instagram.js
@@ -13,6 +13,28 @@ Instagram.prototype.init = function() {
 
     var that = this;
 
+    $('.instagram').lightSlider({
+        item: 3,
+        slideMargin: 0,
+        pager: false,
+        loop: true,
+        auto: true,
+        pauseOnHover: true,
+        responsive: [
+            {
+                breakpoint: 752,
+                settings: {
+                    item: 2
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    item: 1
+                }
+            }
+        ]
+    });
 
 };
 
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 0ec352f2..6a970b26 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -66,6 +66,7 @@
 @import 'linked-organizations';
 @import 'newsletter';
 @import 'tweets';
+@import 'instagram';
 @import 'hero';
 @import 'overlay';
 
diff --git a/app/static/src/sass/modules/_instagram.scss b/app/static/src/sass/modules/_instagram.scss
new file mode 100644
index 00000000..9464506a
--- /dev/null
+++ b/app/static/src/sass/modules/_instagram.scss
@@ -0,0 +1,19 @@
+$module: ".instagram";
+
+#{$module} {
+
+    &__item {
+
+        display: block;
+        float: left;
+        width: 33.33%;
+
+        span {
+
+            display: none;
+
+        }
+
+    }
+
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index e5c9dbd6..61139b58 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -74,9 +74,6 @@
                     <div class="section-title section-title--uppercase section-title--underline section-title--accent">
                         {% trans "Instagram feed" %}
                     </div>
-                    <div>
-                        INSTAGRAM HERE
-                    </div>
                     <div>
                         {% include "includes/instagram.html" %}
                     </div>
diff --git a/app/templates/includes/instagram.html b/app/templates/includes/instagram.html
index c3ca0746..c734b42c 100644
--- a/app/templates/includes/instagram.html
+++ b/app/templates/includes/instagram.html
@@ -2,13 +2,11 @@
 
 {% instagram_user_recent_media ircam_paris %}
 
-<div id="django_recent_media_wall">
+<div class="instagram">
     {% for media in recent_media|slice:"3" %}
-        <div class="django_instagram_media_wall_item">
-            <a href="{{ media.display_src }}" target="_blank" title="{{ media.caption }}">
-                <img src="{{ media.thumbnail_src }}"/>
-                <span>{{ media.caption }}</span>
-            </a>
-        </div>
+        <a class="instagram__item" href="http://instagram.com/p/{{media.code}}" target="_blank" title="{{ media.caption }}">
+            <img src="{{ media.thumbnail_src }}"/>
+            <span>{{ media.caption }}</span>
+        </a>
     {% endfor %}
 </div>
-- 
2.39.5