From dd377c33ee5436c90b71ac150a0a88f485366262 Mon Sep 17 00:00:00 2001 From: Oleg Lavrovsky Date: Fri, 8 Sep 2017 16:37:33 +0200 Subject: [PATCH] Gallery fix --- bower.json | 2 +- .../home/templates/home/article_page.html | 8 +- .../home/templates/home/photo_gallery.html | 35 ++---- publichealth/static/css/modules/_banner.scss | 101 ++++++++++-------- publichealth/static/js/main.js | 46 +++++--- publichealth/templates/base.html | 1 + 6 files changed, 107 insertions(+), 86 deletions(-) diff --git a/bower.json b/bower.json index a8cc1a2..6e003a9 100644 --- a/bower.json +++ b/bower.json @@ -15,7 +15,7 @@ ], "dependencies": { "bootstrap-sass": "bootstrap-sass-official#^3.3.7", - "slick-carousel": "^1.6.0", + "slick-carousel": "^1.4.1", "slick-lightbox": "^0.2.10" } } diff --git a/publichealth/home/templates/home/article_page.html b/publichealth/home/templates/home/article_page.html index 7c46641..f5137ff 100644 --- a/publichealth/home/templates/home/article_page.html +++ b/publichealth/home/templates/home/article_page.html @@ -1,8 +1,14 @@ {% extends "base.html" %} -{% load wagtailcore_tags %} +{% load static wagtailcore_tags %} {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} +{% block extra_css %} + + + +{% endblock %} + {% block content %}
diff --git a/publichealth/home/templates/home/photo_gallery.html b/publichealth/home/templates/home/photo_gallery.html index 959375e..7861412 100644 --- a/publichealth/home/templates/home/photo_gallery.html +++ b/publichealth/home/templates/home/photo_gallery.html @@ -1,38 +1,15 @@ {% load compress static wagtailcore_tags wagtailimages_tags %} -{% compress js %} - - - - -{% endcompress %} - -{% block extra_css %} - - - -{% endblock %} -
+
{% for block in page.gallery %} {% for val in block.value %} - - {% image val.image height-400 as carouselimagedata %} - - {% image val.image height-400 %} - - +
+ {% image val.image fill-700x400 as entry_thumb %} + {% image val.image original as entry_photo %} + +
{% endfor %} {% endfor %}
- - diff --git a/publichealth/static/css/modules/_banner.scss b/publichealth/static/css/modules/_banner.scss index 19f4f20..df422f3 100644 --- a/publichealth/static/css/modules/_banner.scss +++ b/publichealth/static/css/modules/_banner.scss @@ -93,49 +93,6 @@ $banner-height: 700px; padding-top: 0 !important; padding-bottom: 0em; - .carousel-inner { - padding-bottom: 2.5em; - - .item { - height: $banner-height; - position: relative; - background-color: white; - - img { - width: 100%; - height: $banner-height; - overflow: hidden; - display: block; - background-size: cover; - background-position: center; - opacity: 1; - - } - .carousel-caption { - background-color: white; - padding: 2em; - bottom: -2em; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); - - h3 { - margin-top: 0; - } - p:last-child { - margin-bottom: 0; - } - } - } - .slick-dots { - bottom: 50px; - - li { - margin: 0; - button { - box-shadow: none; - } - } - } - } h3, p, button { color: #333; text-shadow: none; @@ -155,6 +112,49 @@ $banner-height: 700px; margin-top: 2em; } } +.carousel-inner { + padding-bottom: 2.5em; + + .item { + height: $banner-height; + position: relative; + background-color: white; + + img { + width: 100%; + height: $banner-height; + overflow: hidden; + display: block; + background-size: cover; + background-position: center; + opacity: 1; + + } + .carousel-caption { + background-color: white; + padding: 2em; + bottom: -2em; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + + h3 { + margin-top: 0; + } + p:last-child { + margin-bottom: 0; + } + } + } + .slick-dots { + bottom: 50px; + + li { + margin: 0; + button { + box-shadow: none; + } + } + } +} .arrow { color: white; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); @@ -192,6 +192,21 @@ $banner-height: 700px; color: inherit; } +// Carousel gallery +$gallery-height: 400px; +.carousel-inner { + padding-bottom: 2.5em; + + .item { + height: $gallery-height; + + img { + width: 100%; // TODO: reduce width to try to use the Variable Width slick configuration + height: $gallery-height; + } + } +} + @include max-screen(1000px) { .slick-dots { display: none !important; } } diff --git a/publichealth/static/js/main.js b/publichealth/static/js/main.js index 982e842..f634172 100644 --- a/publichealth/static/js/main.js +++ b/publichealth/static/js/main.js @@ -5,18 +5,40 @@ $(document).ready(function() { return this.hostname && this.hostname !== location.hostname; }).attr('target', '_blank'); - // Initialise front page carousel component - $('.carousel-inner.slick').slick({ - autoplay: true, - autoplaySpeed: '10000', - dots: true, - infinite: true, - speed: 1000, - fade: true, - cssEase: 'linear', - prevArrow: '', - nextArrow: '', - }); + if ($('#carousel-banner').length) { + // Initialise front page carousel component + $('.carousel-inner').slick({ + autoplay: true, + autoplaySpeed: '10000', + dots: true, + infinite: true, + speed: 1000, + fade: true, + cssEase: 'linear', + prevArrow: '', + nextArrow: '', + }); + + } else if ($('.carousel-gallery').length) { + // Load gallery component + $('.carousel-gallery').slick({ + autoplay: false, + dots: false, + fade: false, + infinite: true, + slidesToShow: 1, + centerMode: true, + prevArrow: '', + nextArrow: '', + }).slickLightbox({ + src: 'data-src', + itemSelector: 'img', + // lazy: true, + // useHistoryApi: 'true' + }); + } + + // Pastel colors on live news // $('.feedpage-body .panel').each(function() { diff --git a/publichealth/templates/base.html b/publichealth/templates/base.html index 7680ee9..7ddf16f 100644 --- a/publichealth/templates/base.html +++ b/publichealth/templates/base.html @@ -33,6 +33,7 @@ + {% endblock %} {% compress js %}