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

publichealth/home/templates/home/photo_gallery.html

@@ -2,13 +2,13 @@
 
 <!-- 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 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 }})">
+			<image data-src="{{ entry_photo.url }}" data-caption="{{ val.caption }}" style="background-image:url({{ entry_thumb.url }})">
 		</div>
   {% endfor %}
 {% endfor %}
@@ -18,8 +18,7 @@
   {% 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 }})">
+			<image style="background-image:url({{ entry_thumb.url }})">
 		</div>
   {% endfor %}
 {% endfor %}

publichealth/static/css/main.scss

@@ -14,9 +14,21 @@ body {
 @include mid-screen($screen-sm-min, $screen-md-min) {
   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 {
-  padding-bottom: 2.5em;
+  margin-top: 2.5em;
 
   .item  {
     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;
+}

publichealth/static/js/main.js

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