Fix the page sliders on mobile and large screens

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index f1b5fbd3b642f7264975ebc762bb72b69921f35b..ae240de57068e776df6bef95b4d959bc720b8c54 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -10,7 +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');
+var LightSliderPageInit = require('./modules/lightsliderpage-init');
 
 //
 // Init all the modules
@@ -24,4 +24,4 @@ window[Search] = new Search();
 window[Summary] = new Summary();
 window[OverflowInit] = new OverflowInit();
 window[StickyKitInit] = new StickyKitInit();
-window[LightSliderInit] = new LightSliderInit();
+window[LightSliderPageInit] = new LightSliderPageInit();

diff --git a/app/static/src/js/modules/lightslider-init.js b/app/static/src/js/modules/lightslider-init.js
deleted file mode 100644 (file)
index 0534187..0000000
--- a/app/static/src/js/modules/lightslider-init.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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/js/modules/lightsliderpage-init.js b/app/static/src/js/modules/lightsliderpage-init.js
new file mode 100644 (file)
index 0000000..2dde54c
--- /dev/null
+++ b/app/static/src/js/modules/lightsliderpage-init.js
@@ -0,0 +1,116 @@
+var LightSliderPageInit = function() {
+
+    this.elements = [];
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+LightSliderPageInit.prototype.init = function() {
+
+    var that = this,
+        element,
+        elements = $('[data-slider-page]');
+
+    elements.each(function(idx) {
+
+        element = {
+            $element: $(this),
+            attached: 1,
+            slider: null,
+            options: {
+                autoWidth: true,
+                item: 4,
+                pager: false,
+                responsive: [
+                    {
+                        breakpoint: 752,
+                        settings: {
+                            autoWidth: false,
+                            item: 1
+                        }
+                    }
+                ]
+            }
+        };
+
+        that.elements.push(element);
+
+    });
+
+    elements.imagesLoaded( function() {
+
+        that.windowResize();
+        $(window).resize( $.throttle(1000, that.windowResize.bind(that)) );
+
+    });
+
+};
+
+LightSliderPageInit.prototype.windowResize = function(e) {
+
+    var that = this,
+        windowWidth = $(window).width(),
+        totalWidth, element;
+
+    for(var i=0; i<that.elements.length; i++) {
+
+        element = that.elements[i];
+        totalWidth = 0;
+
+        element.$element.find('li').each(function() {
+            totalWidth += $(this).find('img').get(0).naturalWidth;
+        });
+
+        if(totalWidth > windowWidth) {
+
+            that.attach(that.elements[i]);
+
+        } else {
+
+            that.detach(that.elements[i]);
+
+        }
+
+    }
+
+};
+
+LightSliderPageInit.prototype.attach = function(element) {
+
+    var that = this,
+        windowWidth = $(window).width(),
+        totalWidth = 0;
+
+    element.$element.find('li').each(function() {
+        totalWidth += $(this).find('img').width();
+    });
+
+    if(element.attached !== true) {
+        element.slider = element.$element.lightSlider(element.options);
+        element.$element.removeClass('flexbox');
+        element.attached = true;
+    }
+
+};
+
+LightSliderPageInit.prototype.detach = function(element) {
+
+    var that = this;
+
+    if(element.attached !== false) {
+        if(element.slider) {
+            element.slider.destroy();
+            element.$element.lightSlider = $.fn.lightSlider;
+        }
+        element.slider = null;
+        element.$element.addClass('flexbox');
+        element.attached = false;
+    }
+
+};
+
+module.exports = LightSliderPageInit;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index c877e6b1e425db3f7d207c36c7121b476c77ab6f..5317dc9ba9ec0b5204a47bf1fb391a5361bc4230 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -13,6 +13,7 @@
 
 // Page modules
 @import 'breadcrumb';
+@import 'page';
 @import 'pagination';
 
 // Specific modules

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
new file mode 100644 (file)
index 0000000..e1d9b44
--- /dev/null
+++ b/app/static/src/sass/modules/_page.scss
@@ -0,0 +1,18 @@
+$module: ".page";
+
+#{$module} {
+
+    &__slider {
+
+    background: white;
+
+        @include padding-top(3);
+        @include padding-bottom(3);
+
+        @include mq($until: sm) {
+            @include padding-top(1);
+        }
+
+    }
+
+}

diff --git a/app/static/src/sass/modules/sliders/_slider-page.scss b/app/static/src/sass/modules/sliders/_slider-page.scss
index bd6c823f7d8bbfeae81aa9824a61f40ff17b7ec4..e3e4d14a861f9fbb54668cd1f34e9fcaec269da1 100644 (file)
--- a/app/static/src/sass/modules/sliders/_slider-page.scss
+++ b/app/static/src/sass/modules/sliders/_slider-page.scss
@@ -2,19 +2,35 @@ $module: ".slider-page";
 
 #{$module} {
 
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    height: 520px;
+
     //
-    // Layout
+    // Not lightslider, lets go with Flexbox W00t W00t
     //
-
-    &.lightSlider {
-
-        @include margin-top(3);
-        @include margin-bottom(3);
-
-        @include mq($until: sm) {
-            @include margin-top(1);
+    &.flexbox {
+        @include mq($from: sm) {
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-flex-direction: row;
+            -ms-flex-direction: row;
+            flex-direction: row;
+            -webkit-flex-wrap: nowrap;
+            -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+            -webkit-justify-content: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-align-content: stretch;
+            -ms-flex-line-pack: stretch;
+            align-content: stretch;
+            -webkit-align-items: flex-start;
+            -ms-flex-align: start;
+            align-items: flex-start;
         }
-
     }
 
     //
@@ -22,10 +38,32 @@ $module: ".slider-page";
     //
 
     &__slide {
+        text-align: center;
         visibility: hidden;
         .lightSlider & {
             visibility: visible;
         }
+        .flexbox & {
+            visibility: visible;
+            @include mq($from: sm) {
+                -webkit-order: 0;
+                -ms-flex-order: 0;
+                order: 0;
+                -webkit-flex: 0 1 auto;
+                -ms-flex: 0 1 auto;
+                flex: 0 1 auto;
+                -webkit-align-self: auto;
+                -ms-flex-item-align: auto;
+                align-self: auto;
+            }
+        }
+
+    }
+
+    &__wrapper {
+
+        // Nothing ?
+        position: relative;
 
     }
 

diff --git a/app/templates/core/inc/slider.html b/app/templates/core/inc/slider.html
index 3fe426c59909e0898ab1902960f4b05562714ed7..e824742e34cde2dc58f6f630a9170b6708ed8fe5 100644 (file)
--- a/app/templates/core/inc/slider.html
+++ b/app/templates/core/inc/slider.html
@@ -1,17 +1,21 @@
 {% 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>
+<div class="page__slider">
+    <ul class="slider-page" data-slider-page>
+        {% for image in slider_images %}
+            <li class="slider-page__slide">
+                <div class="slider-page__wrapper">
+                    <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>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index c4d82a3ea9209ebdf9a29e204786fb16099b5b7c..076c76be3a261e71af06ff3be661bd52abf67e49 100644 (file)
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -6,6 +6,7 @@
     <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 "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}

diff --git a/app/templates/magazine/article/article_detail.html b/app/templates/magazine/article/article_detail.html
index c78e0408f435be3aae68d9c2e76f7e3c7a399159..35d872218396c963fc8d3162317f7ef765bd63a4 100644 (file)
--- a/app/templates/magazine/article/article_detail.html
+++ b/app/templates/magazine/article/article_detail.html
@@ -78,11 +78,12 @@
 
     {% if article.related_articles.all %}
 
+        <hr class="mt0 mb0" />
         <div class="white-bg pb2">
             <div class="container">
                 <div class="row tac">
                     <div class="col-xs-12">
-                        <h2 class="dashed dashed--center">{% trans "Also discover" %}</h2>
+                        <h2 class="dashed dashed--center mt2">{% trans "Also discover" %}</h2>
                     </div>
                 </div>
                 <div class="row tac">

diff --git a/bower.json b/bower.json
index 5fffe4204fbba855cfb9b69536a87a0c589e46b4..4f5458dd368bd1c032b5df73b54c74283af9a63d 100644 (file)
--- a/bower.json
+++ b/bower.json
@@ -22,6 +22,7 @@
     "jquery-throttle-debounce": "https://github.com/cowboy/jquery-throttle-debounce.git",
     "lightslider": "^1.1.5",
     "lightgallery": "^1.2.21",
-    "jquery": "https://github.com/components/jquery.git#2.2.4"
+    "jquery": "https://github.com/components/jquery.git#2.2.4",
+    "imagesloaded": "^4.1.1"
   }
 }