TRI-283: add scss posterinvideo

This commit is contained in:
2024-11-16 15:02:15 +03:00
parent f58038ab90
commit 034d5faa0d
16 changed files with 926 additions and 136 deletions

View File

@@ -133,60 +133,86 @@
<section class="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
{# {% for media_item in page.get_video_items %}#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{##}
{# <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# {% endfor %}#}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/1.mp4"
poster="/media/media_items/image/ava1.jpg"
controls
autoplay
></video>
</div>
</div>
</div>
<video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/2.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
></video>
</div>
</div>
</div>
</div>
{% endfor %}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <video controls data-src="/media/uploads/1.mp4" autoplay></video>#}
{# </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 class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <video controls data-src="/media/uploads/3.mp4" autoplay>#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <video controls data-src="/media/uploads/4.mp4" autoplay>#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/3.mp4"
poster="/media/media_items/image/ava3.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/4.mp4"
poster="/media/media_items/image/ava1.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
@@ -195,7 +221,13 @@
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/5.mp4" autoplay>
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/5.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
>
</video>
</div>
</div>
@@ -312,13 +344,13 @@
<p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
</div>
</div>
{# </div>#}
{# </div>#}
</section>
<section class="benefits">
<div class="title">{% translate "Преимущества сервиса" %}</div>
<div class="benefits__grid">
<div class="benefits__first benefits__col">
<div class="benefits__first">
<div class="benefits__item">
<h2>{% translate "Прямой контакт" %}</h2>
<p>{% translate "Общаешься напрямую с&nbsp;перевозчиком, никаких посредников" %}</p>
@@ -335,7 +367,7 @@
<div class="benefits__second">
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
</div>
<div class="benefits__third benefits__col">
<div class="benefits__third">
<div class="benefits__item">
<h2>{% translate "Уведомления" %}</h2>
<p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на&nbsp;сайте." %}</p>