diff --git a/project/templates/blocks/banners.html b/project/templates/blocks/banners.html
new file mode 100644
index 00000000..4c3df84d
--- /dev/null
+++ b/project/templates/blocks/banners.html
@@ -0,0 +1,46 @@
+
diff --git a/project/templates/blocks/buy.html b/project/templates/blocks/buy.html
new file mode 100644
index 00000000..c46d6f26
--- /dev/null
+++ b/project/templates/blocks/buy.html
@@ -0,0 +1,15 @@
+{% if True or not is_purchased and not is_purchased_future %}
+
+{% endif %}
diff --git a/project/templates/blocks/counters.html b/project/templates/blocks/counters.html
new file mode 100644
index 00000000..40198a07
--- /dev/null
+++ b/project/templates/blocks/counters.html
@@ -0,0 +1,37 @@
+{% load static %}
+{% load ruplural from plural %}
+
+
diff --git a/project/templates/lilcity/main.html b/project/templates/lilcity/home.html
similarity index 78%
rename from project/templates/lilcity/main.html
rename to project/templates/lilcity/home.html
index 2bd38646..e052e724 100644
--- a/project/templates/lilcity/main.html
+++ b/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/video.html" %}
+ {% include "templates/blocks/buy.html" %}
{% include "templates/blocks/about.html" %}
- {% include "templates/blocks/gallery.html" %}
- {% include "templates/blocks/mobile_apps.html" %}
- {% include "templates/blocks/online_school.html" %}
+ {% include "templates/blocks/video.html" %}
+ {% include "templates/blocks/counters.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 %}
diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html
index cca2d6fd..222f57ca 100644
--- a/project/templates/lilcity/index.html
+++ b/project/templates/lilcity/index.html
@@ -32,10 +32,12 @@
{% block layer_body %}
{% include "templates/blocks/social.html" %}
- {% include "templates/blocks/banner.html" %}
{% include "templates/blocks/header.html" %}
+ {% if banners %}
+ {% include "templates/blocks/banners.html" %}
+ {% endif %}
{% block content %}{% endblock content %}
{% include "templates/blocks/footer.html" %}
diff --git a/project/views.py b/project/views.py
index 93a87f39..4eac0b91 100644
--- a/project/views.py
+++ b/project/views.py
@@ -11,6 +11,7 @@ from paymentwall.pingback import Pingback
from apps.course.models import Course
from apps.school.models import SchoolSchedule
from apps.payment.models import SchoolPayment, UserGiftCertificate, Payment, DrawingCampPayment
+from apps.content.models import Banner
User = get_user_model()
@@ -20,7 +21,7 @@ class AboutView(TemplateView):
class IndexView(TemplateView):
- template_name = 'templates/lilcity/main.html'
+ template_name = 'templates/lilcity/home.html'
def get_context_data(self):
referrer = self.request.GET.get('referrer')
@@ -99,6 +100,7 @@ class IndexView(TemplateView):
shuffle(review_images)
context.update({
+ '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,
diff --git a/web/package.json b/web/package.json
index eaa18164..9c71cc60 100755
--- a/web/package.json
+++ b/web/package.json
@@ -61,6 +61,7 @@
"validator": "^9.2.0",
"vue": "^2.5.13",
"vue-autosize": "^1.0.2",
+ "vue-awesome-swiper": "^3.1.3",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "^0.9.25",
"vuelidate": "^0.6.1"
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 14e66e65..a59403d6 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -3,6 +3,7 @@
*/
import 'ilyabirman-likely/release/likely.js';
import 'ilyabirman-likely/release/likely.css';
+import 'swiper/dist/css/swiper.css';
import "./modules/common";
import "./modules/header";
import "./modules/search";
@@ -27,6 +28,7 @@ import Comments from '../components/Comments';
import Likes from '../components/blocks/Likes.vue';
import FAQ from '../components/FAQ.vue';
import Countdown from '../components/blocks/Countdown.vue';
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
Vue.use(Vuelidate);
Vue.use(VueAutosize);
@@ -41,6 +43,9 @@ const components = {
'comments': Comments,
'faq': FAQ,
'vue-datepicker': DatePicker,
+ 'countdown': Countdown,
+ swiper,
+ swiperSlide,
};
Object.assign(components, window.LIL_STORE.components);
@@ -54,13 +59,3 @@ const app = new Vue({
},
components: components
});
-
-const bannerApp = new Vue({
- el: '.banner',
- data() {
- return {
- store: window.LIL_STORE,
- }
- },
- components: {'countdown': Countdown,}
-});
diff --git a/web/src/js/modules/common.js b/web/src/js/modules/common.js
index 5faffb0b..961fecce 100644
--- a/web/src/js/modules/common.js
+++ b/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', '');
- }
- }
-}
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index 0e8435db..34d7af8c 100755
--- a/web/src/sass/_common.sass
+++ b/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
@@ -334,7 +337,7 @@ a.btn
width: 100%
.header
- position: fixed
+ position: absolute
left: 0
right: 0
z-index: 100
@@ -664,7 +667,6 @@ a.btn
display: flex
position: relative
min-height: 500px
- margin-top: -100px
padding: 120px 0 50px
background-position: 50% 50%
background-repeat: no-repeat
@@ -981,11 +983,7 @@ a[name]
&_confirm
padding: 30px 0 50px
&_school
- padding: 85px 0 20px
- +t
- padding: 65px 0 55px
- +m
- padding: 45px 0
+ padding-bottom: 0px
&_benefits
padding: 95px 0 100px
background: $bg
@@ -1205,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
- &: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
+ padding-top: 20px
&__type
margin-bottom: 85px
// +fb
@@ -1237,20 +1226,19 @@ a[name]
+m
margin-bottom: 40px
&__title
- margin-bottom: 2px
- // +fb
- font-size: 50px
+ margin-bottom: 20px
+ font-size: 35px
line-height: (6/5)
+t
- margin-bottom: 6px
+ margin-bottom: 15px
font-size: 24px
&__text
max-width: 600px
- +t
- margin-bottom: 65px
+ font-size: 20px
+ font-family: 'ProximaNova-Regular', sans-serif
+ margin-bottom: 0
+m
max-width: 80%
- margin-bottom: 40px
&__action
+fb
font-size: 10px
@@ -4379,142 +4367,83 @@ a
width: 640px;
height: 360px;
+.banners
+ margin-top: -100px
.banner
- height: 140px
+ padding-top: 100px
text-align: center
color: #fff
position: relative
- +m
- height: auto
- &__bg
- background-repeat: no-repeat
- position: absolute
- width: 100%
- height: 100%
- left: 0
- top: 0
- &_countdown
- +m
- height: 140px
- &__image-wrap
- background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(159,159,159,0) 72%, rgba(221,221,221,0.65) 100%)
- background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6dddddd',GradientType=0 )
- width: 100%
- height: 100%
- &__image
- +m
- width: 100%
- display: block
- margin: 0 auto
- &_colored &__image
- +m
- max-width: 100%
- width: auto
- opactiy: 0.8
&__content
- position: absolute
- width: 100%
- margin-top: 50px
- +m
- margin-top: 0px
- top: 0
- &_countdown &__content
- margin-top: 15px
- +m
- margin-top: 5px
- &__content-center
width: 1024px
- margin: 0 auto
+ padding-top: 10px
display: flex
- padding: 0 40px
+ margin: 0 auto
+ height: 300px
+t
- width: 100%
+ width: calc(100% - 40px)
+ padding-top: 0
+m
- width: 100%
- padding: 0 10px
- &_countdown &__content-center
- +m
- display: block
+ height: 190px
&__text
font-size: 30px
- text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
- +m
- font-size: 16px
- &_countdown &__text
- font-size: 22px
text-shadow: none
color: black
- width: 300px
+ +t
+ font-size: 25px
+m
font-size: 16px
width: auto
font-weight: bold
&__link
- display: block
- color: #fff
- font-size: 20px
- text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
- margin-top: 20px
- +m
- margin-top: 0px
- font-size: 16px
- &_countdown &__link
font-size: 15px
color: black
text-shadow: none
background: white
- font-weight: bold
- padding: 7px 20px
- border-radius: 20px
+ padding: 12px 22px
+ border-radius: 25px
border: 1px solid #ddd
text-align: center
- margin-top: 10px
+ margin-top: 50px
display: inline-block
- +m
- margin-top: 25px
- &_countdown &__link:hover
- background: #ddd
- &__hide
- position: absolute
- right: 5px
- top: 5px
- display: block
- color: #fff
- text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
text-transform: uppercase
- border-bottom: 1px dotted #fff
- opacity: 0.3
+ font-family: 'ProximaNova-Bold'
+ box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(33, 74, 211, 0.1)
+m
- font-size: 11px
+ margin-top: 20px
+ font-size: 10px
+ padding: 10px 14px
+ &__link:hover
+ background: #ddd
+ &__image-column
+ flex: 50%
+ text-align: center
+ position: relative
+ padding-right: 20px
+ & img
+ position: absolute
+ bottom: 0
+ transform: translateX(-50%)
+ left: 50%
+ max-width: 100%
+ max-height: 100%
&__text-column
- flex: 1
- &_countdown &__text-column
+ flex: 50%
text-align: left
- +m
- text-align: center
- &__countdown-column
- padding: 0 20px
- +m
- padding: 0
- display: flex
- & > div:nth-child(1)
- +m
- padding: 0 10px
- border-radius: 3px
- background: rgba(255, 255, 255, 0.3)
- margin-right: 10px
- & > div:nth-child(2)
- +m
- flex: 1
+ padding-bottom: 20px
+ padding-right: 10px
+ padding-top: 40px
&__countdown-title
color: black
font-size: 15px
margin-bottom: 5px
+m
font-size: 15px
+ &__countdown-wrap
+ position: absolute
+ transform: translateX(-50%)
+ left: 50%
&__countdown
display: flex
color: black