From: Frédéric Péters <fpeters@0d.be>
Date: Fri, 3 Feb 2023 20:16:40 +0000 (+0100)
Subject: add support/style for gallery cell
X-Git-Tag: v2024~25
X-Git-Url: https://git.0d.be/?p=panikweb-studioneau.git;a=commitdiff_plain;h=b7935a3db07dfe46ba42193c1ec10f37be9b627b

add support/style for gallery cell
---

diff --git a/panikweb_studioneau/static/css/style.scss b/panikweb_studioneau/static/css/style.scss
index 17f385d..4a76415 100644
--- a/panikweb_studioneau/static/css/style.scss
+++ b/panikweb_studioneau/static/css/style.scss
@@ -229,53 +229,63 @@ p {
 	left: 0;
 }
 
+%gallery-buttons {
+	position: absolute;
+	cursor: pointer;
+	top: calc(50% - 50px);
+	z-index: 100;
+	color: white;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 40px;
+	border: none;
+	width: 100px;
+	height: 100px;
+	&#prev {
+		left: 10px;
+		&::before {
+			font-family: FontAwesome;
+			content: "\f053";
+		}
+	}
+	&#next {
+		right: 10px;
+		&::before {
+			font-family: FontAwesome;
+			content: "\f054";
+		}
+	}
+}
+
+%gallery-item {
+	width: 100%;
+	position: relative;
+	&.transition {
+		position: absolute;
+		z-index: 90;
+		transition: opacity ease-out 1s;
+		opacity: 1;
+		&.faded {
+			opacity: 0;
+		}
+	}
+	.img {
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+}
+
 #focus {
 	@extend %hero-width;
 	position: relative;
 	button {
-		position: absolute;
-		cursor: pointer;
-		top: calc(50% - 50px);
-		z-index: 100;
-		color: white;
-		background: rgba(0, 0, 0, 0.1);
-		font-size: 40px;
-		border: none;
-		width: 100px;
-		height: 100px;
-		&#prev {
-			left: 10px;
-			&::before {
-				font-family: FontAwesome;
-				content: "\f053";
-			}
-		}
-		&#next {
-			right: 10px;
-			&::before {
-				font-family: FontAwesome;
-				content: "\f054";
-			}
-		}
+		@extend %gallery-buttons;
 	}
 	@extend %hero-height;
 	overflow: hidden;
 	.item {
-		width: 100%;
-		position: relative;
-		&.transition {
-			position: absolute;
-			z-index: 90;
-			transition: opacity ease-out 1s;
-			opacity: 1;
-			&.faded {
-				opacity: 0;
-			}
-		}
+		@extend %gallery-item;
 		.img {
-			background-position: center;
-			background-size: cover;
-			background-repeat: no-repeat;
 			@extend %hero-height;
 		}
 		.infos {
@@ -306,6 +316,38 @@ p {
 	}
 }
 
+.gallery {
+	position: relative;
+	height: 400px;
+	margin: 1em 0;
+	overflow: hidden;
+	button {
+		@extend %gallery-buttons;
+		font-size: 30px;
+		width: 75px;
+		height: 75px;
+		top: calc(50% - 37.5px);
+		@media screen and (max-width: 600px) {
+			font-size: 20px;
+			width: 50px;
+			height: 50px;
+			top: calc(50% - 25px);
+		}
+	}
+	.item {
+		@extend %gallery-item;
+		.img {
+			height: 400px;
+		}
+	}
+	@media screen and (max-width: 600px) {
+		height: 300px;
+		.item .img {
+			height: 300px;
+		}
+	}
+}
+
 h2 {
 	border-top: 2px ridge black;
 	border-bottom: 2px ridge black;
diff --git a/panikweb_studioneau/templates/combo/gallerycell.html b/panikweb_studioneau/templates/combo/gallerycell.html
new file mode 100644
index 0000000..f07164d
--- /dev/null
+++ b/panikweb_studioneau/templates/combo/gallerycell.html
@@ -0,0 +1,12 @@
+{% load thumbnail %}
+<div class="gallery scrolling-images" id="gallery-{{cell.id}}">
+  <button id="prev"></button>
+  <button id="next"></button>
+{% for image in cell.image_set.all %}
+{% thumbnail image.image "920x400" crop="50% 50%" as im %}
+  <div class="item">
+          <div class="img" {% if image.title %}alt="{{ image.title }}"{% endif %} style="background-image: url({{im.url}}"></div>
+  </div>
+{% endthumbnail %}
+{% endfor %}
+</div>
diff --git a/panikweb_studioneau/templates/includes/footer.html b/panikweb_studioneau/templates/includes/footer.html
index 6c82ee5..7fae380 100644
--- a/panikweb_studioneau/templates/includes/footer.html
+++ b/panikweb_studioneau/templates/includes/footer.html
@@ -22,9 +22,9 @@ $(function() {
 
  var roll_timeout = null;
  function init_roll_buttons() {
-   if ($('#focus').length == 0) return;
-   if ($('#focus').hasClass('initialized')) return;
-   if ($('#focus .item').length < 2) {
+   if ($('.scrolling-images').length == 0) return;
+   if ($('.scrolling-images').hasClass('initialized')) return;
+   if ($('.scrolling-images .item').length < 2) {
      $('#next, #prev').hide();
      return;
    }
@@ -35,11 +35,11 @@ $(function() {
    $('#next').on('click', function(ev, autoroll) {
      if (roll_timeout && !autoroll) { clearTimeout(roll_timeout); roll_timeout = null; }
      var current_position = $(window).scrollTop();
-     const $first = $('#focus .item:not(.transition)').first();
-     const $last = $('#focus .item:not(.transition)').last();
+     const $first = $('.scrolling-images .item:not(.transition)').first();
+     const $last = $('.scrolling-images .item:not(.transition)').last();
      if ($first.length == 0) return;
      const $cloned = $first.clone();
-     $cloned.addClass('transition').insertBefore($('#focus .item').first());
+     $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
      $cloned.on('transitionend', function() { $cloned.remove(); });
      $first.detach().insertAfter($last);
      $cloned[0].offsetHeight; // redraw
@@ -53,18 +53,18 @@ $(function() {
    });
    $('#prev').on('click', function(ev, autoroll) {
      if (roll_timeout && !autoroll) { clearTimeout(roll_timeout); roll_timeout = null; }
-     const $first = $('#focus .item:not(.transition)').first();
-     const $last = $('#focus .item:not(.transition)').last();
+     const $first = $('.scrolling-images .item:not(.transition)').first();
+     const $last = $('.scrolling-images .item:not(.transition)').last();
      if ($first.length == 0) return;
      const $cloned = $first.clone();
-     $cloned.addClass('transition').insertBefore($('#focus .item').first());
+     $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
      $cloned.on('transitionend', function() { $cloned.remove(); });
      $last.detach().insertBefore($first);
      $cloned[0].offsetHeight; // redraw
      $cloned.addClass('faded');
      if (autoroll) { roll_timeout = setTimeout(function() {$('#next').trigger('click', ['autoroll']); }, 10000); }
    });
-   $('#focus').addClass('initialized');
+   $('.scrolling-images').addClass('initialized');
    roll_timeout = setTimeout(function() {$('#next').trigger('click', ['autoroll']); }, 10000);
  }
  function init_newsletter_form() {
diff --git a/panikweb_studioneau/templates/news/roll.html b/panikweb_studioneau/templates/news/roll.html
index 700b68a..2dbba84 100644
--- a/panikweb_studioneau/templates/news/roll.html
+++ b/panikweb_studioneau/templates/news/roll.html
@@ -1,5 +1,5 @@
 {% load thumbnail paniktags %}
-<div id="focus">
+<div id="focus" class="scrolling-images">
         <button id="prev"></button>
         <button id="next"></button>
 {% for focus in news %}