From 91f74955bc254f235a35d6eb65708d66af9e7d96 Mon Sep 17 00:00:00 2001
From: khashashin <khashashin@gmail.com>
Date: Thu, 14 Sep 2017 11:05:21 +0200
Subject: [PATCH] gallery responsive, added button background

---
 .../home/templates/home/photo_gallery.html    |  7 +++---
 publichealth/static/css/main.scss             | 22 +++++++++++++++-
 publichealth/static/js/main.js                | 25 ++++++++++++++++---
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/publichealth/home/templates/home/photo_gallery.html b/publichealth/home/templates/home/photo_gallery.html
index 823bc4f..a4c75e1 100644
--- a/publichealth/home/templates/home/photo_gallery.html
+++ b/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 %}
diff --git a/publichealth/static/css/main.scss b/publichealth/static/css/main.scss
index cd56fb3..320f585 100644
--- a/publichealth/static/css/main.scss
+++ b/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;
+}
diff --git a/publichealth/static/js/main.js b/publichealth/static/js/main.js
index abf8845..c061eb9 100644
--- a/publichealth/static/js/main.js
+++ b/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>',
 	});