diff --git a/bower.json b/bower.json index 338479c..6e003a9 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +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/feedler/migrations/0004_auto_20170905_1502.py b/feedler/migrations/0004_auto_20170905_1502.py new file mode 100644 index 0000000..3e36893 --- /dev/null +++ b/feedler/migrations/0004_auto_20170905_1502.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.11.4 on 2017-09-05 13:02 +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('feedler', '0003_entry_lang'), + ] + + operations = [ + migrations.AlterField( + model_name='entry', + name='lang', + field=models.CharField(blank=True, choices=[('de', 'Deutsch'), ('fr', 'Français'), ('it', 'Italiano'), ('en', 'English'), ('', ' * * * ')], default='', max_length=2), + ), + ] diff --git a/publichealth/home/migrations/0019_auto_20170703_1244.py b/publichealth/home/migrations/0019_auto_20170703_1244.py deleted file mode 100644 index 6565d9d..0000000 --- a/publichealth/home/migrations/0019_auto_20170703_1244.py +++ /dev/null @@ -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'}, - ), - ] diff --git a/publichealth/home/migrations/0019_auto_20170908_1505.py b/publichealth/home/migrations/0019_auto_20170908_1505.py new file mode 100644 index 0000000..58ef971 --- /dev/null +++ b/publichealth/home/migrations/0019_auto_20170908_1505.py @@ -0,0 +1,42 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.11.4 on 2017-09-08 13:05 +from __future__ import unicode_literals + +from django.db import migrations, models +import wagtail.wagtailcore.blocks +import wagtail.wagtailcore.fields +import wagtail.wagtailimages.blocks + + +class Migration(migrations.Migration): + + dependencies = [ + ('home', '0018_contact_contact_form'), + ] + + operations = [ + migrations.AlterModelOptions( + name='dataletssettings', + options={'verbose_name': 'Get support'}, + ), + migrations.AddField( + model_name='articlepage', + name='gallery', + field=wagtail.wagtailcore.fields.StreamField((('image', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock()), ('caption', wagtail.wagtailcore.blocks.TextBlock(required=False)))), icon='image')),), blank=True), + ), + 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='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='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'), + ), + ] diff --git a/publichealth/home/migrations/0020_auto_20170904_2233.py b/publichealth/home/migrations/0020_auto_20170904_2233.py deleted file mode 100644 index a96fbe9..0000000 --- a/publichealth/home/migrations/0020_auto_20170904_2233.py +++ /dev/null @@ -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'), - ), - ] diff --git a/publichealth/home/models/models.py b/publichealth/home/models/models.py index 6fd1eb1..45be7cb 100644 --- a/publichealth/home/models/models.py +++ b/publichealth/home/models/models.py @@ -7,7 +7,7 @@ from django.utils import translation from modelcluster.fields import ParentalKey -from wagtail.wagtailcore.blocks import StructBlock, CharBlock, URLBlock, RichTextBlock +from wagtail.wagtailcore.blocks import StructBlock, CharBlock, URLBlock, RichTextBlock, ListBlock, TextBlock, ChoiceBlock from wagtail.wagtailcore.models import Page, Orderable from wagtail.wagtailcore.fields import StreamField, RichTextField from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel, InlinePanel, MultiFieldPanel @@ -77,6 +77,13 @@ class ArticleIndexPage(Page): class Meta: verbose_name = "Rubrik" +class ImageCarouselBlock(StructBlock): + image = ImageChooserBlock() + caption = TextBlock(required=False) + + class Meta: + icon = 'image' + class ArticlePage(Page): title_fr = models.CharField(max_length=255, default="") trans_title = TranslatedField( @@ -91,17 +98,28 @@ class ArticlePage(Page): 'intro_fr', ) + gallery = StreamField([ + ('image', ListBlock(ImageCarouselBlock(), icon="image")), + ], blank=True) + # documents = StreamField([ + # ('documents', ListBlock(DocumentChooserBlock(), icon="document")), + # ]) + body_de = StreamField([ ('paragraph', RichTextBlock()), - ('image', ImageChooserBlock()), ('section', CharBlock(classname="full title")), ('info', InfoBlock()), + ('placer', ChoiceBlock(choices=[ + ('gallery', 'Image gallery'), + ], icon='user')) ], null=True, blank=True) body_fr = StreamField([ ('paragraph', RichTextBlock()), - ('image', ImageChooserBlock()), ('section', CharBlock(classname="full title")), ('info', InfoBlock()), + ('placer', ChoiceBlock(choices=[ + ('gallery', 'Image gallery'), + ], icon='user')) ], null=True, blank=True) trans_body = TranslatedField( 'body_de', @@ -142,6 +160,7 @@ class ArticlePage(Page): MultiFieldPanel([ ImageChooserPanel('feed_image'), ], heading="Images"), + StreamFieldPanel('gallery'), ] promote_panels = [ InlinePanel('related_links', label="Links"), diff --git a/publichealth/home/templates/home/article_page.html b/publichealth/home/templates/home/article_page.html index 71336e8..f5137ff 100644 --- a/publichealth/home/templates/home/article_page.html +++ b/publichealth/home/templates/home/article_page.html @@ -1,14 +1,18 @@ {% extends "base.html" %} -{% load wagtailcore_tags wagtailimages_tags %} +{% load static wagtailcore_tags %} {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} +{% block extra_css %} + + + +{% endblock %} + {% block content %}
- {% include 'home/page_content.html' %} -
{% endblock %} diff --git a/publichealth/home/templates/home/page_content.html b/publichealth/home/templates/home/page_content.html index db2dd41..5c32aeb 100644 --- a/publichealth/home/templates/home/page_content.html +++ b/publichealth/home/templates/home/page_content.html @@ -19,6 +19,10 @@ {% for block in page.trans_body %} {% if block.block_type == 'heading' %}

{{ block.value }}

+ {% elif block.block_type == 'placer' %} + {% if block.value == 'gallery' %} + {% include 'home/photo_gallery.html' %} + {% endif %} {% elif block.block_type != 'info' %}

{% include_block block %} diff --git a/publichealth/home/templates/home/photo_gallery.html b/publichealth/home/templates/home/photo_gallery.html new file mode 100644 index 0000000..823bc4f --- /dev/null +++ b/publichealth/home/templates/home/photo_gallery.html @@ -0,0 +1,26 @@ +{% load compress static wagtailcore_tags wagtailimages_tags %} + + + +

+{% for block in page.gallery %} + {% for val in block.value %} +
+ {% image val.image fill-700x400 as entry_thumb %} + {% image val.image original as entry_photo %} + +
+ {% endfor %} +{% endfor %} +
+
+{% for block in page.gallery %} + {% for val in block.value %} +
+ {% image val.image fill-700x400 as entry_thumb %} + {% image val.image original as entry_photo %} + +
+ {% endfor %} +{% endfor %} +
diff --git a/publichealth/static/css/main.scss b/publichealth/static/css/main.scss index 8bd1115..cd56fb3 100644 --- a/publichealth/static/css/main.scss +++ b/publichealth/static/css/main.scss @@ -14,3 +14,16 @@ body { @include mid-screen($screen-sm-min, $screen-md-min) { body { margin-top: 200px; } } +$slider-nav: 200px; +.slider-nav { + padding-bottom: 2.5em; + + .item { + height: $slider-nav; + + img { + width: 90%; + height: $slider-nav; + } + } +} diff --git a/publichealth/static/css/modules/_banner.scss b/publichealth/static/css/modules/_banner.scss index 19f4f20..6b01f87 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,22 @@ $banner-height: 700px; color: inherit; } +// Carousel gallery + +$gallery-height: 550px; +.carousel-inner { + padding-bottom: 0; + + .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/css/paper/bootstrap.css b/publichealth/static/css/paper/bootstrap.css index 7326dea..44d2f95 100644 --- a/publichealth/static/css/paper/bootstrap.css +++ b/publichealth/static/css/paper/bootstrap.css @@ -6238,7 +6238,7 @@ button.close { .carousel { position: relative; } -.carousel-inner { +/*.carousel-inner { position: relative; overflow: hidden; width: 100%; @@ -6313,7 +6313,7 @@ button.close { } .carousel-inner > .active.right { left: 100%; -} +}*/ .carousel-control { position: absolute; top: 0; diff --git a/publichealth/static/js/main.js b/publichealth/static/js/main.js index 982e842..abf8845 100644 --- a/publichealth/static/js/main.js +++ b/publichealth/static/js/main.js @@ -5,19 +5,47 @@ $(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', + 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({ + slidesToShow: 1, + slidesToScroll: 1, + arrows: false, + fade: true, + asNavFor: '.slider-nav' + }).slickLightbox({ + src: 'data-src', + itemSelector: 'img', + // lazy: true, + // useHistoryApi: 'true' + }); + } + $('.slider-nav').slick({ + slidesToShow: 3, + slidesToScroll: 1, + asNavFor: '.carousel-gallery', dots: true, - infinite: true, - speed: 1000, - fade: true, - cssEase: 'linear', + centerMode: true, + focusOnSelect: true, prevArrow: '', nextArrow: '', }); + // Pastel colors on live news // $('.feedpage-body .panel').each(function() { // var hue = Math.floor(Math.random() * 360); 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 %}