From: Jérémy Fabre <blackmagik88@gmail.com>
Date: Tue, 30 Aug 2016 14:35:35 +0000 (+0200)
Subject: Slider for pages implementation
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=02071f48ff6c12da74d21e3816d03b556445748c;p=mezzo.git

Slider for pages implementation
---

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 3b03730e..f1b5fbd3 100644
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -10,6 +10,7 @@ var Search = require('./modules/search');
 var Summary = require('./modules/summary');
 var OverflowInit = require('./modules/overflow-init');
 var StickyKitInit = require('./modules/sticky-kit-init');
+var LightSliderInit = require('./modules/lightslider-init');
 
 //
 // Init all the modules
@@ -23,3 +24,4 @@ window[Search] = new Search();
 window[Summary] = new Summary();
 window[OverflowInit] = new OverflowInit();
 window[StickyKitInit] = new StickyKitInit();
+window[LightSliderInit] = new LightSliderInit();
diff --git a/app/static/src/js/modules/lightslider-init.js b/app/static/src/js/modules/lightslider-init.js
new file mode 100644
index 00000000..05341877
--- /dev/null
+++ b/app/static/src/js/modules/lightslider-init.js
@@ -0,0 +1,31 @@
+var LightSliderInit = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+LightSliderInit.prototype.init = function() {
+
+    var that = this;
+
+    $('[data-slider-page]').lightSlider({
+        autoWidth: true,
+        item: 4,
+        pager: false,
+        responsive: [
+            {
+                breakpoint: 752,
+                settings: {
+                    autoWidth: false,
+                    item: 1
+                }
+            }
+        ]
+    });
+
+};
+
+module.exports = LightSliderInit;
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index b82ae6ad..c877e6b1 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -8,6 +8,9 @@
 @import 'boxes/article-box';
 @import 'boxes/page-box';
 
+// Sliders
+@import 'sliders/slider-page';
+
 // Page modules
 @import 'breadcrumb';
 @import 'pagination';
diff --git a/app/static/src/sass/modules/sliders/_slider-page.scss b/app/static/src/sass/modules/sliders/_slider-page.scss
new file mode 100644
index 00000000..bd6c823f
--- /dev/null
+++ b/app/static/src/sass/modules/sliders/_slider-page.scss
@@ -0,0 +1,54 @@
+$module: ".slider-page";
+
+#{$module} {
+
+    //
+    // Layout
+    //
+
+    &.lightSlider {
+
+        @include margin-top(3);
+        @include margin-bottom(3);
+
+        @include mq($until: sm) {
+            @include margin-top(1);
+        }
+
+    }
+
+    //
+    // Slides
+    //
+
+    &__slide {
+        visibility: hidden;
+        .lightSlider & {
+            visibility: visible;
+        }
+
+    }
+
+    //
+    // Images
+    //
+
+    &__img {
+
+        @include mq($until: sm) {
+            width: 100%;
+        }
+
+    }
+
+    &__caption {
+
+        font-weight: weight(light);
+        @include font-size(xs);
+        @include line-height(1.25);
+
+        text-align: center;
+
+    }
+
+}
diff --git a/app/static/src/sass/vendors/_all.scss b/app/static/src/sass/vendors/_all.scss
index c27525ff..ad347e0c 100755
--- a/app/static/src/sass/vendors/_all.scss
+++ b/app/static/src/sass/vendors/_all.scss
@@ -1 +1,2 @@
 @import "slick";
+@import "lightslider";
diff --git a/app/static/src/sass/vendors/_lightslider.scss b/app/static/src/sass/vendors/_lightslider.scss
new file mode 100644
index 00000000..25c59e73
--- /dev/null
+++ b/app/static/src/sass/vendors/_lightslider.scss
@@ -0,0 +1,11 @@
+.lSAction {
+
+    > a {
+        opacity: 1;
+        @include transition(all 0.15s ease-in-out);
+        &:hover {
+            width: 60px;
+        }
+    }
+
+}
diff --git a/app/templates/core/inc/slider.html b/app/templates/core/inc/slider.html
index 522598dd..3fe426c5 100644
--- a/app/templates/core/inc/slider.html
+++ b/app/templates/core/inc/slider.html
@@ -1,5 +1,17 @@
-{% for image in slider_images %}
-{{ image.description }}<br/>
-<img src="{{ MEDIA_URL}}{{ image.file }}" alt="" /><br/>
-{{ image.credits }}<br/>
-{% endfor %}
+{% load mezzanine_tags %}
+<ul class="slider-page" data-slider-page>
+    {% for image in slider_images %}
+        <li class="slider-page__slide">
+            <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" /><br />
+            <div class="slider-page__caption">
+                {{ image.title }}
+                {% if image.description %}
+                    | {{ image.description }}
+                {% endif %}
+                {% if image.credits %}
+                    | {{ image.credits }}
+                {% endif %}
+            </div>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index fe192a9e..c4d82a3e 100644
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -1,10 +1,11 @@
 {% load mezzanine_tags i18n staticfiles %}
 
 {% compress js %}
-    <script src="{% static "vendors/jquery/dist/jquery.min.js" %}"></script>
+    <script src="{% static "vendors/jquery/jquery.js" %}"></script>
     <script src="{% static "vendors/overflow.js/js/overflow.js" %}"></script>
     <script src="{% static "vendors/sticky-kit/jquery.sticky-kit.js" %}"></script>
     <script src="{% static "vendors/jquery-throttle-debounce/jquery.ba-throttle-debounce.js" %}"></script>
+    <script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}