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

Merge pull request #16 from khashashin/gallery

Browse source 
Gallery feature
This commit is contained in:
datalets 2017-09-11 17:22:28 +02:00 committed by GitHub
commit 92b3a97364
14 changed files with 234 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bower.json
View file

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

20
feedler/migrations/0004_auto_20170905_1502.py Normal file
View file

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

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

42
publichealth/home/migrations/0019_auto_20170908_1505.py Normal file
View file

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

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

25
publichealth/home/models/models.py
View file

@ -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"),

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

@ -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 %}
<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">
{% include 'home/page_content.html' %}
</div>
</section>
{% endblock %}

4
publichealth/home/templates/home/page_content.html
View file

@ -19,6 +19,10 @@
{% for block in page.trans_body %}
{% if block.block_type == 'heading' %}
<h3>{{ block.value }}</h3>
{% elif block.block_type == 'placer' %}
{% if block.value == 'gallery' %}
{% include 'home/photo_gallery.html' %}
{% endif %}
{% elif block.block_type != 'info' %}
<p class="block-{{ block.block_type }}">
{% include_block block %}

26
publichealth/home/templates/home/photo_gallery.html Normal file
View file

@ -0,0 +1,26 @@
{% load compress static wagtailcore_tags wagtailimages_tags %}
<!-- Gallery Template -->
<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 fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
</div>
{% endfor %}
{% endfor %}
</div>
<div class="carousel-inner slider-nav">
{% for block in page.gallery %}
{% for val in block.value %}
<div class="item">
{% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
</div>
{% endfor %}
{% endfor %}
</div>

13
publichealth/static/css/main.scss
View file

@ -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;
}
}
}

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

@ -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; }
}

4
publichealth/static/css/paper/bootstrap.css vendored
View file

@ -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;

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

@ -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: '<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({
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: '<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>',
});
// Pastel colors on live news
// $('.feedpage-body .panel').each(function() {
// var hue = Math.floor(Math.random() * 360);

1
publichealth/templates/base.html
View file

@ -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 %}