Merge pull request #4 from loleg/gallery

Gallery fixes

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"
   }
 }

publichealth/home/migrations/0019_auto_20170703_1244.py

@@ -1,19 +0,0 @@
-# -*- coding: utf-8 -*-
-# Generated by Django 1.11.3 on 2017-07-03 10:44
-from __future__ import unicode_literals
-
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('home', '0018_contact_contact_form'),
-    ]
-
-    operations = [
-        migrations.AlterModelOptions(
-            name='dataletssettings',
-            options={'verbose_name': 'Get support'},
-        ),
-    ]

publichealth/home/migrations/0019_auto_20170908_1505.py

@@ -1,8 +1,8 @@
 # -*- coding: utf-8 -*-
-# Generated by Django 1.11.4 on 2017-09-06 12:53
+# Generated by Django 1.11.4 on 2017-09-08 13:05
 from __future__ import unicode_literals
 
-from django.db import migrations
+from django.db import migrations, models
 import wagtail.wagtailcore.blocks
 import wagtail.wagtailcore.fields
 import wagtail.wagtailimages.blocks
@@ -11,10 +11,14 @@ import wagtail.wagtailimages.blocks
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('home', '0020_auto_20170904_2233'),
+        ('home', '0018_contact_contact_form'),
     ]
 
     operations = [
+        migrations.AlterModelOptions(
+            name='dataletssettings',
+            options={'verbose_name': 'Get support'},
+        ),
         migrations.AddField(
             model_name='articlepage',
             name='gallery',
@@ -23,11 +27,16 @@ class Migration(migrations.Migration):
         migrations.AlterField(
             model_name='articlepage',
             name='body_de',
-            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='cup'))), blank=True, null=True),
+            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='user'))), blank=True, null=True),
         ),
         migrations.AlterField(
             model_name='articlepage',
             name='body_fr',
-            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='cup'))), blank=True, null=True),
+            field=wagtail.wagtailcore.fields.StreamField((('paragraph', wagtail.wagtailcore.blocks.RichTextBlock()), ('section', wagtail.wagtailcore.blocks.CharBlock(classname='full title')), ('info', wagtail.wagtailcore.blocks.StructBlock((('title', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('photo', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('summary', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), ('action', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('url', wagtail.wagtailcore.blocks.URLBlock(required=False))))), ('placer', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('gallery', 'Image gallery')], icon='user'))), blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='contactformfield',
+            name='field_type',
+            field=models.CharField(choices=[('singleline', 'Single line text'), ('multiline', 'Multi-line text'), ('email', 'Email'), ('number', 'Number'), ('url', 'URL'), ('checkbox', 'Checkbox'), ('checkboxes', 'Checkboxes'), ('dropdown', 'Drop down'), ('multiselect', 'Multiple select'), ('radio', 'Radio buttons'), ('date', 'Date'), ('datetime', 'Date/time')], max_length=16, verbose_name='field type'),
         ),
     ]

publichealth/home/migrations/0020_auto_20170904_2233.py

@@ -1,20 +0,0 @@
-# -*- coding: utf-8 -*-
-# Generated by Django 1.11.4 on 2017-09-04 20:33
-from __future__ import unicode_literals
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('home', '0019_auto_20170703_1244'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='contactformfield',
-            name='field_type',
-            field=models.CharField(choices=[('singleline', 'Single line text'), ('multiline', 'Multi-line text'), ('email', 'Email'), ('number', 'Number'), ('url', 'URL'), ('checkbox', 'Checkbox'), ('checkboxes', 'Checkboxes'), ('dropdown', 'Drop down'), ('multiselect', 'Multiple select'), ('radio', 'Radio buttons'), ('date', 'Date'), ('datetime', 'Date/time')], max_length=16, verbose_name='field type'),
-        ),
-    ]

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 %}
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
+		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
+{% endblock %}
+
 {% block content %}
 <section id="news-details" class="article-page">
   <div class="container">

publichealth/home/templates/home/photo_gallery.html

@@ -1,38 +1,15 @@
 {% load compress static wagtailcore_tags wagtailimages_tags %}
-{% compress js %}
-<script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
-<script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
-<script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
-{% endcompress %}
-
-{% block extra_css %}
-		<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
-{% endblock %}
 
 <!-- Gallery Template -->
 
-<div id="lazy" class="row">
+<div class="carousel-inner carousel-gallery slick" role="listbox">
 {% for block in page.gallery %}
   {% for val in block.value %}
-
+		<div class="item">
-  {% image val.image height-400 as carouselimagedata %}
+			{% image val.image fill-700x400 as entry_thumb %}
-  <a class="thumbnail" href="{{ carouselimagedata.url }}" data-caption="{{ val.caption }}">
+			{% image val.image original as entry_photo %}
-    {% image val.image height-400 %}
+			<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
-  </a>
+		</div>
-
   {% endfor %}
 {% endfor %}
 </div>
-
-<script type="text/javascript">
-  $('#lazy').slickLightbox({
-    src: 'src',
-    itemSelector: 'img',
-    lazy: true,
-    useHistoryApi: 'true'
-  });
-  console.log($('#lazy').slickLightbox);
-</script>

publichealth/static/css/modules/_banner.scss

@@ -93,6 +93,25 @@ $banner-height: 700px;
   padding-top: 0 !important;
   padding-bottom: 0em;
 
+  h3, p, button {
+    color: #333;
+    text-shadow: none;
+    text-align: left;
+  }
+
+  p {
+    font-size: 90%;
+    -webkit-hyphens: manual;
+    -ms-hyphens: manual;
+    hyphens: manual;
+  }
+  footer p {
+    color: black;
+    text-align: left;
+    font-size: 110%;
+    margin-top: 2em;
+  }
+}
 .carousel-inner {
   padding-bottom: 2.5em;
 
@@ -136,25 +155,6 @@ $banner-height: 700px;
     }
   }
 }
-  h3, p, button {
-    color: #333;
-    text-shadow: none;
-    text-align: left;
-  }
-
-  p {
-    font-size: 90%;
-    -webkit-hyphens: manual;
-    -ms-hyphens: manual;
-    hyphens: manual;
-  }
-  footer p {
-    color: black;
-    text-align: left;
-    font-size: 110%;
-    margin-top: 2em;
-  }
-}
 .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; }
 }

publichealth/static/js/main.js

@@ -5,8 +5,9 @@ $(document).ready(function() {
 		return this.hostname && this.hostname !== location.hostname;
 	}).attr('target', '_blank');
 
+	if ($('#carousel-banner').length) {
 		// Initialise front page carousel component
-	$('.carousel-inner.slick').slick({
+		$('.carousel-inner').slick({
 			autoplay: true,
 			autoplaySpeed: '10000',
 			dots: true,
@@ -18,6 +19,27 @@ $(document).ready(function() {
 			nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
 		});
 
+	} else if ($('.carousel-gallery').length) {
+		// Load gallery component
+		$('.carousel-gallery').slick({
+			autoplay: false,
+			dots: false,
+			fade: false,
+			infinite: true,
+		  slidesToShow: 1,
+		  centerMode: true,
+			prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
+			nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
+		}).slickLightbox({
+		  src: 'data-src',
+		  itemSelector: 'img',
+		  // lazy: true,
+		  // useHistoryApi: 'true'
+		});
+	}
+
+
+
 	// Pastel colors on live news
 	// $('.feedpage-body .panel').each(function() {
 	// 	var hue = Math.floor(Math.random() * 360);

publichealth/templates/base.html

@@ -33,6 +33,7 @@
             <script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
             <script src="{% static 'libs/bootstrap-sass/assets/javascripts/bootstrap.min.js' %}"></script>
             <script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
+            <script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
         {% endblock %}
 
         {% compress js %}