Carousel fixes.

diff --git a/src/social/templates/social/embed_video.html b/src/social/templates/social/embed_video.html
index 9810e7f..34f2e06 100644 (file)
--- a/src/social/templates/social/embed_video.html
+++ b/src/social/templates/social/embed_video.html
@@ -1,6 +1,6 @@
 {% if youtube_id %}
 {% if youtube_id %}

-<iframe style="position: absolute; left:0;right:0;height:100%;width:100%;"
+<iframe style="position: absolute; left:0;right:0;height:100%;width:100%; background-image:url('https://img.youtube.com/vi/{{ youtube_id }}/0.jpg'); background-position: 50%; background-size: cover;"

        type="text/html" width="100%" height="360"
        type="text/html" width="100%" height="360"

-                                                  src="http://www.youtube.com/embed/{{ youtube_id }}"
-        frameborder="0"></iframe>
-         {% endif %}
+       data-src="https://www.youtube.com/embed/{{ youtube_id }}"
+       frameborder="0"></iframe>
+{% endif %}

diff --git a/src/wolnelektury/static/js/base.js b/src/wolnelektury/static/js/base.js
index 439ba13..2d0ebbf 100644 (file)
--- a/src/wolnelektury/static/js/base.js
+++ b/src/wolnelektury/static/js/base.js
@@ -66,6 +66,14 @@
         });
 
 
         });
 
 

+        $('.carousel').on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
+            $("iframe", outgoingSlideEl).attr("src", '');
+            $("iframe", incomingSlideEl).attr("src", $("iframe", incomingSlideEl).attr('data-src'));
+        });
+        $('.carousel section').first().each(function() {
+            $("iframe", this).attr("src", $("iframe", this).attr('data-src'));
+        });
+

 
         (function() {
             var $current = null;
 
         (function() {
             var $current = null;

diff --git a/src/wolnelektury/static/scss/main/main_page.scss b/src/wolnelektury/static/scss/main/main_page.scss
index 60af2d8..20f2fb3 100755 (executable)
--- a/src/wolnelektury/static/scss/main/main_page.scss
+++ b/src/wolnelektury/static/scss/main/main_page.scss
@@ -325,23 +325,33 @@ section {
 
     .cycle-prev, .cycle-next {
         position: absolute;
 
     .cycle-prev, .cycle-next {
         position: absolute;

-        top: 0;
-        bottom: 0;
+        top: 50/975 * 100vw;
+        bottom: 50/975 * 100vw;

         width: 15%;
         z-index: 1000;
         background: black;
         color: white;
         opacity: 0;
 
         width: 15%;
         z-index: 1000;
         background: black;
         color: white;
         opacity: 0;
 

+        @media screen and (min-width: 62.5em) {
+            top: 50px;
+            bottom: 50px;
+        }
+

         &::after {
         &::after {

+            top: 50/975 * 100vw;
+            bottom: 50/975 * 100vw;

             font-size: 100/975*100vw;
             display: block;
             font-size: 100/975*100vw;
             display: block;

-            line-height: 315/975*100vw;
+            line-height: (315-100)/975*100vw;

             text-align: center;
             text-align: center;

+            cursor: pointer;

 
             @media screen and (min-width: 62.5em) {
                 font-size: 100px;
 
             @media screen and (min-width: 62.5em) {
                 font-size: 100px;

-                line-height: 315px;
+                line-height: 315px - 100px;
+                top: 50px;
+                bottom: 50px;

             }
         }
         &:hover {
             }
         }
         &:hover {


@@ -349,3 +359,39 @@ section {
         }
     }
 }
         }
     }
 }

+
+
+.cycle-pager {
+    text-align: center;
+    width: 100%;
+    z-index: 500;
+    position: absolute;
+    bottom: 8%;
+    overflow: hidden;
+
+    span {
+        font-family: arial;
+        font-size: 64 /975*100vw;
+        width: 32 /975*100vw;
+        height: 32 /975*100vw;
+        display: inline-block;
+        color: #ddd;
+        cursor: pointer;
+
+        text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
+
+        @media screen and (min-width: 62.5em) {
+            font-size: 64px;
+            width: 32px;
+            height: 32px;
+        }
+
+        &.cycle-pager-active {
+            color: #018189;
+        }
+    }
+
+    > * {
+        cursor: pointer;
+    }
+}

diff --git a/src/wolnelektury/views.py b/src/wolnelektury/views.py
index b32c64c..4b20a55 100644 (file)
--- a/src/wolnelektury/views.py
+++ b/src/wolnelektury/views.py
@@ -25,6 +25,7 @@ from social.utils import get_or_choose_cite
 from wolnelektury.forms import RegistrationForm, SocialSignupForm
 
 
 from wolnelektury.forms import RegistrationForm, SocialSignupForm
 
 

+@never_cache

 def main_page(request):
     ctx = {
         'last_published': Book.objects.exclude(cover_thumb='').filter(parent=None).order_by('-created_at')[:6],
 def main_page(request):
     ctx = {
         'last_published': Book.objects.exclude(cover_thumb='').filter(parent=None).order_by('-created_at')[:6],