From: Jérémy Fabre Date: Wed, 31 Aug 2016 10:03:32 +0000 (+0200) Subject: Fix the page sliders on mobile and large screens X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=ea0c9d10ac73528c0fec806eae5c98e2de6d27f4;p=mezzo.git 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 f1b5fbd3..ae240de5 100644 --- 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 index 05341877..00000000 --- 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 index 00000000..2dde54c8 --- /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 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 c877e6b1..5317dc9b 100755 --- 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 index 00000000..e1d9b440 --- /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 bd6c823f..e3e4d14a 100644 --- 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 3fe426c5..e824742e 100644 --- a/app/templates/core/inc/slider.html +++ b/app/templates/core/inc/slider.html @@ -1,17 +1,21 @@ {% load mezzanine_tags %} - +
+
    + {% for image in slider_images %} +
  • +
    + {{ image.title }} {{ image.description }} {{ image.credits }}
    +
    + {{ image.title }} + {% if image.description %} + | {{ image.description }} + {% endif %} + {% if image.credits %} + | {{ image.credits }} + {% endif %} +
    +
    +
    • + {% endfor %} +
+
diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html index c4d82a3e..076c76be 100644 --- a/app/templates/includes/footer_scripts.html +++ b/app/templates/includes/footer_scripts.html @@ -6,6 +6,7 @@ + {% 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 c78e0408..35d87221 100644 --- 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 %} +
-

{% trans "Also discover" %}

+

{% trans "Also discover" %}

diff --git a/bower.json b/bower.json index 5fffe420..4f5458dd 100644 --- 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" } }