Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
@@ -1,13 +1,10 @@
|
|||||||
.chatterbox {
|
.chatterbox {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox .title {
|
.chatterbox .title {
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatterbox__slider {
|
.chatterbox__slider {
|
||||||
/*max-width: 977px;*/
|
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@@ -16,70 +13,6 @@
|
|||||||
/*padding: 50px;*/
|
/*padding: 50px;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.chatterbox__slide {
|
|
||||||
width: 335px;
|
|
||||||
height: 615px;
|
|
||||||
background: url("/static/img/webp/phone-border.webp") center no-repeat;
|
|
||||||
transition: scale 0.2s ease-in-out;
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
|
||||||
scale: 0.72;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-center .chatterbox__vicon {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.chatterbox__vicon {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox__vicon::before {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: opacity 100ms linear;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox__vicon::before {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox__vicon::before, .chatterbox__vicon::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox__vicon::after {
|
|
||||||
border-color: transparent transparent transparent #ffffff;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 15px 0 15px 25px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatterbox .slick-next {
|
.chatterbox .slick-next {
|
||||||
right: -40px;
|
right: -40px;
|
||||||
}
|
}
|
||||||
@@ -88,3 +21,97 @@
|
|||||||
left: -40px;
|
left: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chatterbox__slide {
|
||||||
|
width: 335px;
|
||||||
|
height: 615px;
|
||||||
|
background: url("/static/img/webp/phone-border.webp") center no-repeat;
|
||||||
|
transition: scale 0.2s ease-in-out;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__wrap {
|
||||||
|
position: absolute;
|
||||||
|
/* z-index: -1; */
|
||||||
|
left: 8px;
|
||||||
|
right: 8px;
|
||||||
|
top: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background-color: grey;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||||
|
scale: 0.72;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-center .chatterbox__vbtn {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: initial;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbtn {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loaded .chatterbox__vbtn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbtn::before {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: opacity 100ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbtn::before {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbtn::after {
|
||||||
|
border-color: transparent transparent transparent #ffffff;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 15px 0 15px 25px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox__vbox {
|
||||||
|
position: relative;
|
||||||
|
/*z-index: -1;*/
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatterbox video {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -100,3 +100,7 @@ p {
|
|||||||
.subtitle {
|
.subtitle {
|
||||||
margin-bottom: 81px;
|
margin-bottom: 81px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
1
static/js/lazyload.min.js
vendored
Normal file
1
static/js/lazyload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/js/push/lazyload.min.js
vendored
Normal file
1
static/js/push/lazyload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -5,8 +5,9 @@
|
|||||||
{% block meta %}
|
{% block meta %}
|
||||||
<link rel="stylesheet" href="{% static "css/moover.css" %}">
|
<link rel="stylesheet" href="{% static "css/moover.css" %}">
|
||||||
<link rel="stylesheet" href="{% static "css/slick.css" %}">
|
<link rel="stylesheet" href="{% static "css/slick.css" %}">
|
||||||
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
|
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
|
||||||
<script src="{% static "js/slick.min.js" %}"></script>
|
<script src="{% static "js/slick.min.js" %}"></script>
|
||||||
|
<script src="{% static "js/push/lazyload.min.js" %}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{#{% block before_close %}#}
|
{#{% block before_close %}#}
|
||||||
{# <script src="{% static "js/slick.min.js" %}"></script>#}
|
{# <script src="{% static "js/slick.min.js" %}"></script>#}
|
||||||
@@ -132,64 +133,97 @@
|
|||||||
<section class="chatterbox">
|
<section class="chatterbox">
|
||||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||||
<div class="chatterbox__slider slick-slider">
|
<div class="chatterbox__slider slick-slider">
|
||||||
|
|
||||||
<div class="slick-slide">
|
<div class="slick-slide">
|
||||||
<div class="chatterbox__slide">
|
<div class="chatterbox__slide">
|
||||||
<div class="chatterbox__vicon"></div>
|
<div class="chatterbox__vbtn"></div>
|
||||||
|
<div class="chatterbox__wrap">
|
||||||
<video src="https://example.com/hexlet.mp4"></video>
|
<div class="chatterbox__vbox">
|
||||||
|
<video controls data-src="/media/uploads/1.mp4" autoplay></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="slick-slide">
|
||||||
|
<div class="chatterbox__slide">
|
||||||
|
<div class="chatterbox__vbtn"></div>
|
||||||
|
<div class="chatterbox__vbox">
|
||||||
|
<video controls data-src="/media/uploads/2.mp4" autoplay></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slick-slide">
|
<div class="slick-slide">
|
||||||
<div class="chatterbox__slide">
|
<div class="chatterbox__slide">
|
||||||
<div class="chatterbox__vicon"></div>
|
<div class="chatterbox__vbtn"></div>
|
||||||
|
<div class="chatterbox__wrap">
|
||||||
<video src="https://example.com/hexlet.mp4"></video>
|
<div class="chatterbox__vbox">
|
||||||
|
<video controls data-src="/media/uploads/3.mp4" autoplay>
|
||||||
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="slick-slide">
|
<div class="slick-slide">
|
||||||
<div class="chatterbox__slide">
|
<div class="chatterbox__slide">
|
||||||
<div class="chatterbox__vicon"></div>
|
<div class="chatterbox__vbtn"></div>
|
||||||
|
<div class="chatterbox__wrap">
|
||||||
<video src="https://example.com/hexlet.mp4"></video>
|
<div class="chatterbox__vbox">
|
||||||
|
<video controls data-src="/media/uploads/4.mp4" autoplay>
|
||||||
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="slick-slide">
|
<div class="slick-slide">
|
||||||
<div class="chatterbox__slide">
|
<div class="chatterbox__slide">
|
||||||
<div class="chatterbox__vicon"></div>
|
<div class="chatterbox__vbtn"></div>
|
||||||
|
<div class="chatterbox__wrap">
|
||||||
|
<div class="chatterbox__vbox">
|
||||||
|
<video controls data-src="/media/uploads/5.mp4" autoplay>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slick-slide">
|
|
||||||
<div class="chatterbox__slide">
|
|
||||||
<div class="chatterbox__vicon"></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="slick-slide">
|
|
||||||
<div class="chatterbox__slide">
|
|
||||||
<div class="chatterbox__vicon"></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('.slick-slider').slick({
|
console.log('run');
|
||||||
|
|
||||||
|
function handlerVideos() {
|
||||||
|
const vtns = $('.chatterbox__vbtn');
|
||||||
|
if (!vtns.length) return;
|
||||||
|
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
|
||||||
|
const vtn = e.target;
|
||||||
|
vtn.nextElementSibling.querySelector('video');
|
||||||
|
window.d = vtn;
|
||||||
|
console.log($(vtn).siblings().find('video')[0]);
|
||||||
|
console.log(vtn, e.target)
|
||||||
|
LazyLoad.load($(vtn).siblings().find('video')[0], {
|
||||||
|
callback_loaded: (e) => callbackLoaded(e, vtn),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const callbackLoaded = function (elm, vtn) {
|
||||||
|
vtn.classList.add('hide');
|
||||||
|
const imgWrap = elm.closest('.chatterbox__slide');
|
||||||
|
imgWrap?.classList.add('loaded');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handlerVideos();
|
||||||
|
|
||||||
|
$('.slick-slider')
|
||||||
|
.slick({
|
||||||
centerMode: true,
|
centerMode: true,
|
||||||
{#centerPadding: '160px',#}
|
{#centerPadding: '160px',#}
|
||||||
slidesToShow: 3,
|
slidesToShow: 3,
|
||||||
|
lazyLoad: 'ondemand',
|
||||||
|
{#lazyLoad: 'progressive',#}
|
||||||
responsive: [
|
responsive: [
|
||||||
{
|
{
|
||||||
breakpoint: 768,
|
breakpoint: 768,
|
||||||
@@ -210,7 +244,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
})
|
||||||
|
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||||
|
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||||
|
console.log('edge was hit', slick.$slides[currentSlide]);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user