add support/style for gallery cell

diff --git a/panikweb_studioneau/static/css/style.scss b/panikweb_studioneau/static/css/style.scss
index 17f385d72a641415b926fe96cf337fef91a6fdd3..4a76415c7386f4fb54360f64a63c320ddd28755a 100644 (file)
--- 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 (file)
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 6c82ee53006fa9e06d090de19861b61d026c209f..7fae3804a33613458756c27e20dc42b58e23c668 100644 (file)
--- 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 700b68a7215dba1390e0573e9f9ebf055a89f3bc..2dbba84bfc06be5775db0184694f6daa466432d6 100644 (file)
--- 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 %}