слайдер из баннеров

apps/content/models.py

@@ -3,6 +3,7 @@ from urllib.parse import urlparse
 from django.conf import settings
 from django.db import models
 from django.contrib.auth import get_user_model
+from django.db.models.expressions import RawSQL
 from django.urls import reverse_lazy
 from django.utils import timezone
 from django.contrib.postgres.fields import ArrayField
@@ -144,6 +145,7 @@ class GalleryImage(models.Model):
 class Banner(models.Model):
     PAGE_INDEX = 1
     PAGE_COURSES = 2
+    PAGE_SCHOOL = 3
 
     text = models.TextField()
     button_text = models.CharField(max_length=50)
@@ -164,6 +166,12 @@ class Banner(models.Model):
         verbose_name_plural = 'Банеры'
         ordering = ('-created_at',)
 
+    @classmethod
+    def get_for_page(cls, page):
+        return Banner.objects.filter(use=True, pages__contains=[page]).annotate(
+            is_main=RawSQL('main_banner @> %s', ([page],))
+        ).order_by('-is_main')
+
 
 class Contest(models.Model):
     title = models.CharField(max_length=255)

apps/course/templates/course/courses.html

@@ -4,12 +4,13 @@
 
 {% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_courses.jpg' %}{% endblock ogimage %}
 {% block content %}
-  {% include "templates/blocks/banners.html" %}
+  {% if not banners|length %}
   <div class="main" style="background-image: url({% static 'img/bg-1.jpg' %});">
     <div class="main__center center">
       <div class="main__title">Онлайн-курсы LilCity</div>
     </div>
   </div>
+  {% endif %}
   <div class="section">
     <div class="section__center center">
       <div class="text text_lg">

apps/course/views.py

@@ -319,7 +319,7 @@ class CoursesView(ListView):
         context = super().get_context_data()
         filtered = CourseFilter(self.request.GET)
         context.update(filtered.data)
-        context['banners'] = Banner.objects.filter(use=True)
+        context['banners'] = Banner.get_for_page(Banner.PAGE_COURSES)
         context['course_items'] = Course.shuffle(context.get('course_items'))
         context['ages'] = Course.AGE_CHOICES[1:]
         age = context.get('age')

apps/school/templates/school/summer_school.html

@@ -3,14 +3,15 @@
 {% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_main.jpg' %}{% endblock %}
 {% block content %}
 {% if not is_purchased and not prev_school_payments_exists %}
-{% include "../summer/promo.html" %}
+{% include "../summer/buy.html" %}
-{% include "../summer/about.html" %}
-{% include "../summer/advantages.html" %}
-{% include "../summer/online.html" %}
 {% include "../blocks/schedule.html" %}
-{% include "templates/blocks/game.html" %}
+{% include "../summer/advantages.html" %}
+{% include "../summer/about.html" %}
 {% include "templates/blocks/partners.html" %}
 {% else %}
+{% include 'templates/blocks/messages.html' %}
+{% include "../summer/online.html" %}
 {% include "../summer/schedule_purchased.html" %}
+{% include "templates/blocks/partners.html" %}
 {% endif %}
 {% endblock %}

apps/school/templates/summer/buy.html

@@ -0,0 +1,18 @@
+<div class="section" style="padding-bottom: 0px;">
+  <div class="section__center center text-center">
+      <a
+        {% if not is_purchased_future %}
+          data-popup=".js-popup-buy"
+        {% endif %}
+          class="main__btn btn"
+          href="#"
+        >
+        {% if not is_purchased and not is_purchased_future %}Купить доступ от {{ min_school_price }} руб./месяц{% endif %}
+        {% if is_purchased_future and not is_purchased %}ваша подписка начинается {{school_purchased_future.date_start}}{% endif %}
+        {% if is_purchased %}ваша подписка истекает {{ subscription_ends_humanize }}<br/>перейти к оплате{% endif %}
+      </a>
+      {% if not is_purchased and not is_purchased_future %}
+      <a class="main__btn btn btn_stroke-black" href="{% url 'gift-certificates' %}">Подарить другу</a>
+      {% endif %}
+  </div>
+</div>

apps/school/templates/summer/online.html

@@ -1,9 +1,7 @@
 {% load static %}
-<a class="online" target="_blank" href="https://www.youtube.com/watch?v=PhZ8qQbIej0" style="background-image: url({% static 'img/video-1.jpg' %});">
+<a class="online" target="_blank" href="https://www.youtube.com/watch?v=PhZ8qQbIej0">
   <div class="online__center center">
-    <div class="online__type">ВИДЕОУРОКИ</div>
+    <div class="online__title">Каждый день в 17:00 (мск)</div>
-    <div class="online__title">В 17.00 (по Мск) </div>
+    <div class="online__text text">Онлайн-школа это ежедневные видео-уроки на разные темы. Уроки хранятся 7 дней.</div>
-    <div class="online__text text">Каждый день</div>
-    <div class="online__action"></div>
   </div>
 </a>

apps/school/templates/summer/schedule_purchased.html

@@ -1,7 +1,7 @@
 {% load static %} {% load thumbnail %}
 <div class="section" id="schedule">
   <div class="section__center center">
-    {% include 'templates/blocks/messages.html' %}
+    <div class="title title_center">Расписание</div>
     <div class="casing">
       <div class="casing__col">
         <div class="casing__subscribe">
@@ -55,4 +55,3 @@
     </div>
   </div>
 </div>
-{% include './last_courses.html' %}

apps/school/views.py

@@ -14,6 +14,7 @@ from django.utils.timezone import now
 from django.views.generic import ListView, UpdateView, TemplateView, DetailView
 from django.conf import settings
 
+from apps.content.models import Banner
 from apps.course.models import Course
 from apps.payment.models import SchoolPayment, DrawingCampPayment
 from .models import LiveLesson, SchoolSchedule
@@ -233,7 +234,9 @@ class SchoolView(TemplateView):
                 school_schedules_dict[0] = school_schedules_dict.get(7)
                 for ll in prev_live_lessons:
                     ll.school_schedule = school_schedules_dict.get(ll.date.isoweekday())
+
         context.update({
+            'banners': Banner.get_for_page(Banner.PAGE_SCHOOL),
             'online': online,
             'prev_live_lessons': prev_live_lessons,
             'prev_live_lessons_exists': prev_live_lessons_exists,

project/templates/blocks/about.html

@@ -1,7 +1,5 @@
-{% load static %}
-{% load ruplural from plural %}
 <div class="anchor" id="about"></div>
-<div class="section section_school" style="padding-top: 0;">
+<div class="section section_school">
   <div class="section__center center">
     <div class="text text_lg">
       <p>Вы житель мегаполиса и&nbsp;у&nbsp;вас нет времени дополнительно развивать своего ребенка?
@@ -12,38 +10,3 @@
     </div>
   </div>
 </div>
-
-<div class="section section_school">
-  <div class="section__center center">
-    <div class="text text_only_curve">
-      <img class="text__curve text__curve_five" src="{% static 'img/curve-2.svg' %}" width="210">
-      <div class="title">Lil School в цифрах</div>
-    </div>
-    <div class="school school_main">
-      <div class="school__col">
-        <div class="school__preview">> {{ config.NUMBER_OF_STUDENTS }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_STUDENTS|ruplural:'ученик,ученика,учеников' }}</div>
-        <div class="school__text">прошли обучение в&nbsp;Lil&nbsp;School</div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ works_count }}</div>
-        <div class="school__title">{{ works_count|ruplural:'работа,работы,работ' }}</div>
-        <div class="school__text">
-          создано учениками Lil&nbsp;School.<br>
-          Большую часть из&nbsp;них легко найти в&nbsp;<a href="{{ config.SERVICE_INSTAGRAM_URL }}">инстаграм</a>
-        </div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ config.NUMBER_OF_COUNTRIES }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_COUNTRIES|ruplural:'страна,страны,стран' }}</div>
-        <div class="school__text">где живут талантливые ученики Lil&nbsp;School</div>
-      </div>
-      <div class="school__col">
-        <div class="school__preview">{{ config.NUMBER_OF_CITIES }}</div>
-        <div class="school__title">{{ config.NUMBER_OF_CITIES|ruplural:'город,города,городов' }}</div>
-        <div class="school__text">со&nbsp;всего мира со&nbsp;счастливыми учениками Lil&nbsp;School</div>
-      </div>
-    </div>
-    <div style="margin: 50px 0; text-align: center;"><a class="btn" href="/faq">Часто задаваемые вопросы</a></div>
-  </div>
-</div>

project/templates/blocks/banners.html

@@ -1,4 +1,12 @@
-<swiper class="banners" :options="{effect: 'slide', speed: 700, loop: true, autoplay: {delay: 5000} }">
+<swiper class="banners" :options="{
+  effect: 'slide',
+  speed: 700,
+  loop: true,
+  autoplay: {delay: 5000},
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  }}">
   {% for banner in banners %}
   <swiper-slide>
     <div class="banner"

project/templates/blocks/buy.html

@@ -0,0 +1,15 @@
+{% if True or not is_purchased and not is_purchased_future %}
+<div class="section" style="padding-bottom: 0px;">
+  <div class="section__center center text-center">
+    <a
+        data-popup=".js-popup-buy"
+        class="main__btn btn"
+        data-is-camp="1"
+        href="#"
+    >
+      купить доступ от {{ camp_price }} руб./месяц
+    </a>
+    <a class="main__btn btn btn_stroke-black" href="{% url 'gift-certificates' %}">Подарить другу</a>
+  </div>
+</div>
+{% endif %}

project/templates/blocks/counters.html

@@ -0,0 +1,37 @@
+{% load static %}
+{% load ruplural from plural %}
+
+<div class="section section_school">
+  <div class="section__center center">
+    <div class="text text_only_curve">
+      <img class="text__curve text__curve_five" src="{% static 'img/curve-2.svg' %}" width="210">
+      <div class="title">Lil School в цифрах</div>
+    </div>
+    <div class="school school_main">
+      <div class="school__col">
+        <div class="school__preview">> {{ config.NUMBER_OF_STUDENTS }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_STUDENTS|ruplural:'ученик,ученика,учеников' }}</div>
+        <div class="school__text">прошли обучение в&nbsp;Lil&nbsp;School</div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ works_count }}</div>
+        <div class="school__title">{{ works_count|ruplural:'работа,работы,работ' }}</div>
+        <div class="school__text">
+          создано учениками Lil&nbsp;School.<br>
+          Большую часть из&nbsp;них легко найти в&nbsp;<a href="{{ config.SERVICE_INSTAGRAM_URL }}">инстаграм</a>
+        </div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ config.NUMBER_OF_COUNTRIES }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_COUNTRIES|ruplural:'страна,страны,стран' }}</div>
+        <div class="school__text">где живут талантливые ученики Lil&nbsp;School</div>
+      </div>
+      <div class="school__col">
+        <div class="school__preview">{{ config.NUMBER_OF_CITIES }}</div>
+        <div class="school__title">{{ config.NUMBER_OF_CITIES|ruplural:'город,города,городов' }}</div>
+        <div class="school__text">со&nbsp;всего мира со&nbsp;счастливыми учениками Lil&nbsp;School</div>
+      </div>
+    </div>
+    <div style="margin: 50px 0; text-align: center;"><a class="btn" href="/faq">Часто задаваемые вопросы</a></div>
+  </div>
+</div>

project/templates/lilcity/home.html

@@ -12,17 +12,13 @@
 
 {% block title %}School LIL.CITY{% endblock title %}
 {% block content %}
-  {% include "templates/blocks/promo.html" %}
   {% include "templates/blocks/messages.html" %}
-  {% include "templates/blocks/arts.html" %}
+  {% include "templates/blocks/buy.html" %}
-  {% include "templates/blocks/video.html" %}
   {% include "templates/blocks/about.html" %}
-  {% include "templates/blocks/gallery.html" %}
+  {% include "templates/blocks/video.html" %}
-  {% include "templates/blocks/mobile_apps.html" %}
+  {% include "templates/blocks/counters.html" %}
-  {% include "templates/blocks/online_school.html" %}
   {% include "templates/blocks/reviews.html" %}
+  {% include "templates/blocks/online_school.html" %}
   {% include "templates/blocks/teachers.html" %}
-  {% include "templates/blocks/last_courses.html" %}
   {% include "templates/blocks/partners.html" %}
-  {% include "templates/blocks/game.html" %}
 {% endblock content %}

project/templates/lilcity/index.html

@@ -35,6 +35,9 @@
     <div class="outer js-outer">
       {% include "templates/blocks/header.html" %}
       <div id="lilcity-vue-app" class="container">
+        {% if banners %}
+          {% include "templates/blocks/banners.html" %}
+        {% endif %}
         {% block content %}{% endblock content %}
       </div>
       {% include "templates/blocks/footer.html" %}

project/views.py

@@ -99,10 +99,8 @@ class IndexView(TemplateView):
         review_images = list(map(str, range(1, 107)))
         shuffle(review_images)
 
-        banners = Banner.objects.filter(use=True)
-
         context.update({
-            'banners': banners,
+            'banners': Banner.get_for_page(Banner.PAGE_INDEX),
             'is_drawing_camp': True,
             'review_images': review_images,
             'gift_certificate': user_gift_certificate.gift_certificate if user_gift_certificate else None,

web/src/js/modules/common.js

@@ -23,13 +23,6 @@ $(document).ready(function () {
         }
     });
 
-    // Инициируем начальное состояние шапки
-    /* updateHeader();
-
-    $(window).on('scroll', function () {
-        updateHeader();
-    }); */
-
     //===========BANNERS===============
     const $banner = $('[data-banner]');
     const bannerId = $banner.data('banner') + '';
@@ -130,30 +123,3 @@ $(document).ready(function () {
     $popupAuth.find(authPopupActiveTab == 'login' ? '.js-auth-type_login' : '.js-auth-type_registration').addClass('active');
     $popupAuth.find(authPopupActiveTab == 'login' ? '.js-auth-tab_login' : '.js-auth-tab_registration').show();
 });
-
-function updateHeader() {
-    const scrollOffset = $(window).scrollTop();
-    const headerElement = $('header');
-    if (scrollOffset >= 130) {
-        headerElement.css('background-color', '#fff');
-    } else {
-        headerElement.css('background-color', `rgba(255, 255, 255, ${scrollOffset / 130})`);
-    }
-    if (scrollOffset >= 150) {
-        headerElement.addClass('header--shadow');
-    } else {
-        headerElement.removeClass('header--shadow');
-    }
-
-    if($('.banner').is(':visible')) {
-        if(scrollOffset > 0) {
-            if(scrollOffset <= 140) {
-                headerElement.css('top', (140-scrollOffset)+'px');
-            } else {
-                headerElement.css('top', '0px');
-            }
-        } else {
-            headerElement.css('top', '');
-        }
-    }
-}

web/src/sass/_common.sass

@@ -120,6 +120,9 @@ button
   &_xs
     max-width: 540px
 
+.text-center
+  text-align: center
+
 .btn
   position: relative
   padding: 13px 24px 12px
@@ -980,11 +983,7 @@ a[name]
   &_confirm
     padding: 30px 0 50px
   &_school
-    padding: 85px 0 20px
+    padding-bottom: 0px
-    +t
-      padding: 65px 0 55px
-    +m
-      padding: 45px 0
   &_benefits
     padding: 95px 0 100px
     background: $bg
@@ -1204,26 +1203,17 @@ a[name]
 .online
   display: block
   position: relative
-  padding: 55px 0 50px
+  padding-top: 55px
   background-position: 50% 50%
   background-repeat: no-repeat
   background-size: cover
-  color: white
+  color: black
   text-align: center
   z-index: 4
   +t
-    padding: 30px 0
+    padding-top: 30px
   +m
-    padding: 20px 0
+    padding-top: 20px
-  &:before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background-image: linear-gradient(-1deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%)
-    z-index: -2
   &__type
     margin-bottom: 85px
     // +fb
@@ -1236,20 +1226,19 @@ a[name]
     +m
       margin-bottom: 40px
   &__title
-    margin-bottom: 2px
+    margin-bottom: 20px
-    // +fb
+    font-size: 35px
-    font-size: 50px
     line-height: (6/5)
     +t
-      margin-bottom: 6px
+      margin-bottom: 15px
       font-size: 24px
   &__text
     max-width: 600px
-    +t
+    font-size: 20px
-      margin-bottom: 65px
+    font-family: 'ProximaNova-Regular', sans-serif
+    margin-bottom: 0
     +m
       max-width: 80%
-      margin-bottom: 40px
   &__action
     +fb
     font-size: 10px