ungleich-public/public-health-ch
6
1
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

Merge pull request #4 from loleg/gallery

Browse source 
Gallery fixes
This commit is contained in:
khashashin 2017-09-11 10:03:37 +02:00 • committed by GitHub
commit 24ab350f71
9 changed files with 121 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -15,7 +15,7 @@
], ],
"dependencies": { "dependencies": {
"bootstrap-sass": "bootstrap-sass-official#^3.3.7", "bootstrap-sass": "bootstrap-sass-official#^3.3.7",
"slick-carousel": "^1.6.0", "slick-carousel": "^1.4.1",
"slick-lightbox": "^0.2.10" "slick-lightbox": "^0.2.10"
} }
} }

19
publichealth/home/migrations/0019_auto_20170703_1244.py
View file

@ -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'},
),
]

19
publichealth/home/migrations/0021_auto_20170906_1453.py → publichealth/home/migrations/0019_auto_20170908_1505.py
View file

@ -1,8 +1,8 @@
# -*- coding: utf-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 __future__ import unicode_literals
from django.db import migrations from django.db import migrations, models
import wagtail.wagtailcore.blocks import wagtail.wagtailcore.blocks
import wagtail.wagtailcore.fields import wagtail.wagtailcore.fields
import wagtail.wagtailimages.blocks import wagtail.wagtailimages.blocks
@ -11,10 +11,14 @@ import wagtail.wagtailimages.blocks
class Migration(migrations.Migration): class Migration(migrations.Migration):
dependencies = [ dependencies = [
('home', '0020_auto_20170904_2233'), ('home', '0018_contact_contact_form'),
] ]
operations = [ operations = [
migrations.AlterModelOptions(
name='dataletssettings',
options={'verbose_name': 'Get support'},
),
migrations.AddField( migrations.AddField(
model_name='articlepage', model_name='articlepage',
name='gallery', name='gallery',
@ -23,11 +27,16 @@ class Migration(migrations.Migration):
migrations.AlterField( migrations.AlterField(
model_name='articlepage', model_name='articlepage',
name='body_de', 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( migrations.AlterField(
model_name='articlepage', model_name='articlepage',
name='body_fr', 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'),
), ),
] ]

20
publichealth/home/migrations/0020_auto_20170904_2233.py
View file

@ -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'),
),
]

8
publichealth/home/templates/home/article_page.html
View file

@ -1,8 +1,14 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load wagtailcore_tags %} {% load static wagtailcore_tags %}
{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} {% 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 %} {% block content %}
<section id="news-details" class="article-page"> <section id="news-details" class="article-page">
<div class="container"> <div class="container">

35
publichealth/home/templates/home/photo_gallery.html
View file

@ -1,38 +1,15 @@
{% load compress static wagtailcore_tags wagtailimages_tags %} {% 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 --> <!-- Gallery Template -->
<div id="lazy" class="row"> <div class="carousel-inner carousel-gallery slick" role="listbox">
{% for block in page.gallery %} {% for block in page.gallery %}
{% for val in block.value %} {% 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 %}
{% endfor %} {% endfor %}
</div> </div>
<script type="text/javascript">
$('#lazy').slickLightbox({
src: 'src',
itemSelector: 'img',
lazy: true,
useHistoryApi: 'true'
});
console.log($('#lazy').slickLightbox);
</script>

101
publichealth/static/css/modules/_banner.scss
View file

@ -93,49 +93,6 @@ $banner-height: 700px;
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0em; 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 { h3, p, button {
color: #333; color: #333;
text-shadow: none; text-shadow: none;
@ -155,6 +112,49 @@ $banner-height: 700px;
margin-top: 2em; 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 { .arrow {
color: white; color: white;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@ -192,6 +192,21 @@ $banner-height: 700px;
color: inherit; 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) { @include max-screen(1000px) {
.slick-dots { display: none !important; } .slick-dots { display: none !important; }
} }

46
publichealth/static/js/main.js
View file

@ -5,18 +5,40 @@ $(document).ready(function() {
return this.hostname && this.hostname !== location.hostname; return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank'); }).attr('target', '_blank');
// Initialise front page carousel component if ($('#carousel-banner').length) {
$('.carousel-inner.slick').slick({ // Initialise front page carousel component
autoplay: true, $('.carousel-inner').slick({
autoplaySpeed: '10000', autoplay: true,
dots: true, autoplaySpeed: '10000',
infinite: true, dots: true,
speed: 1000, infinite: true,
fade: true, speed: 1000,
cssEase: 'linear', fade: true,
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>', cssEase: 'linear',
nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>', 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>',
});
} 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 // Pastel colors on live news
// $('.feedpage-body .panel').each(function() { // $('.feedpage-body .panel').each(function() {

1
publichealth/templates/base.html
View file

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