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

Merge branch 'master' of github.com:datalets/public-health-ch

Browse source
This commit is contained in:
Oleg Lavrovsky 2017-09-14 11:37:09 +02:00
commit c87ee12ec5
3 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,13 +2,13 @@
<!-- Gallery Template --> <!-- Gallery Template -->
<div class="carousel-inner carousel-gallery slick" role="listbox"> <div id="responsive" 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"> <div class="item">
{% image val.image fill-700x400 as entry_thumb %} {% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %} {% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})"> <image data-src="{{ entry_photo.url }}" data-caption="{{ val.caption }}" style="background-image:url({{ entry_thumb.url }})">
</div> </div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
@ -18,8 +18,7 @@
{% for val in block.value %} {% for val in block.value %}
<div class="item"> <div class="item">
{% image val.image fill-700x400 as entry_thumb %} {% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %} <image style="background-image:url({{ entry_thumb.url }})">
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
</div> </div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

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

@ -14,9 +14,21 @@ body {
@include mid-screen($screen-sm-min, $screen-md-min) { @include mid-screen($screen-sm-min, $screen-md-min) {
body { margin-top: 200px; } body { margin-top: 200px; }
} }
@include max-screen(1000px) {
.carousel-inner .item {
margin-bottom: 0px;
height: auto;
}
.slick-dots { display: none !important; }
}
@include max-screen(480px) {
#responsive { display: none !important; }
.arrow:before { display: none; }
}
$slider-nav: 200px; $slider-nav: 200px;
.slider-nav { .slider-nav {
padding-bottom: 2.5em; margin-top: 2.5em;
.item { .item {
height: $slider-nav; height: $slider-nav;
@ -27,3 +39,11 @@ $slider-nav: 200px;
} }
} }
} }
.arrow:before {
font-size: 45px;
/* border: 2px solid grey; */
padding: 58px 0 88px 0;
background-color: rgba(128, 128, 128, 0.57);
margin: 0;
}

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

@ -30,17 +30,36 @@ $(document).ready(function() {
}).slickLightbox({ }).slickLightbox({
src: 'data-src', src: 'data-src',
itemSelector: 'img', itemSelector: 'img',
// lazy: true, caption: 'caption'
// useHistoryApi: 'true'
}); });
} }
$('.slider-nav').slick({ $('.slider-nav').slick({
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
infinite: true,
asNavFor: '.carousel-gallery', asNavFor: '.carousel-gallery',
dots: true,
centerMode: true, centerMode: true,
focusOnSelect: true, focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}
],
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</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>', nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
}); });