From: Radek Czajka Date: Wed, 24 Jul 2019 09:05:14 +0000 (+0200) Subject: Carousel fixes. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/d048787bd42b9d009aa7b3dfb5c08f7682f231e6?ds=inline Carousel fixes. --- diff --git a/src/social/templates/social/embed_video.html b/src/social/templates/social/embed_video.html index 9810e7f2a..34f2e06f3 100644 --- a/src/social/templates/social/embed_video.html +++ b/src/social/templates/social/embed_video.html @@ -1,6 +1,6 @@ {% if youtube_id %} - - {% endif %} + data-src="https://www.youtube.com/embed/{{ youtube_id }}" + frameborder="0"> +{% endif %} diff --git a/src/wolnelektury/static/js/base.js b/src/wolnelektury/static/js/base.js index 439ba1327..2d0ebbf64 100644 --- 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; diff --git a/src/wolnelektury/static/scss/main/main_page.scss b/src/wolnelektury/static/scss/main/main_page.scss index 60af2d898..20f2fb3bc 100755 --- 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; - top: 0; - bottom: 0; + top: 50/975 * 100vw; + bottom: 50/975 * 100vw; width: 15%; z-index: 1000; background: black; color: white; opacity: 0; + @media screen and (min-width: 62.5em) { + top: 50px; + bottom: 50px; + } + &::after { + top: 50/975 * 100vw; + bottom: 50/975 * 100vw; font-size: 100/975*100vw; display: block; - line-height: 315/975*100vw; + line-height: (315-100)/975*100vw; text-align: center; + cursor: pointer; @media screen and (min-width: 62.5em) { font-size: 100px; - line-height: 315px; + line-height: 315px - 100px; + top: 50px; + bottom: 50px; } } &: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 b32c64c52..4b20a5572 100644 --- 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 +@never_cache def main_page(request): ctx = { 'last_published': Book.objects.exclude(cover_thumb='').filter(parent=None).order_by('-created_at')[:6],