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

Gallery fix

Browse source
This commit is contained in:
Oleg Lavrovsky 2017-09-08 16:37:33 +02:00
parent 89bae40de6
commit dd377c33ee
6 changed files with 107 additions and 86 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"
} }
} }

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