diff --git a/api/v1/serializers/__init__.py b/api/v1/serializers/__init__.py index cf7d67f7..48cfa911 100644 --- a/api/v1/serializers/__init__.py +++ b/api/v1/serializers/__init__.py @@ -3,13 +3,13 @@ import base64 import six import uuid +from django.conf import settings from django.core.files.base import ContentFile from rest_framework import serializers - class Base64ImageField(serializers.ImageField): - + use_url = False def to_internal_value(self, data): if isinstance(data, six.string_types): if 'data:' in data and ';base64,' in data: @@ -30,3 +30,8 @@ class Base64ImageField(serializers.ImageField): extension = imghdr.what(file_name, decoded_file) extension = "jpg" if extension == "jpeg" else extension return extension + + def to_representation(self, value): + file = "%s%s" % (settings.MEDIA_URL, super().to_representation(value),) + + return file diff --git a/api/v1/serializers/course.py b/api/v1/serializers/course.py index 7f45c7a2..55272f85 100644 --- a/api/v1/serializers/course.py +++ b/api/v1/serializers/course.py @@ -203,6 +203,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): t.title = cdata['title'] t.lesson = lesson t.txt = cdata['txt'] + t.uuid = cdata['uuid'] t.save() else: t = Text.objects.create( @@ -210,6 +211,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): title=cdata['title'], lesson=lesson, txt=cdata['txt'], + uuid=cdata['uuid'], ) elif ctype == 'image': if 'id' in cdata and cdata['id']: @@ -218,6 +220,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): image.title = cdata['title'] image.lesson = lesson image.img = ImageObject.objects.get(id=cdata['img']) + image.uuid = cdata['uuid'] image.save() else: image = Image.objects.create( @@ -225,6 +228,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): title=cdata['title'], lesson=lesson, img=ImageObject.objects.get(id=cdata['img']), + uuid=cdata['uuid'], ) elif ctype == 'image-text': if 'id' in cdata and cdata['id']: @@ -234,6 +238,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): it.lesson = lesson it.img = ImageObject.objects.get(id=cdata['img']) it.txt = cdata['txt'] + it.uuid = cdata['uuid'] it.save() else: it = ImageText.objects.create( @@ -242,6 +247,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): lesson=lesson, img=ImageObject.objects.get(id=cdata['img']), txt=cdata['txt'], + uuid=cdata['uuid'], ) elif ctype == 'video': if 'id' in cdata and cdata['id']: @@ -250,6 +256,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): v.title = cdata['title'] v.lesson = lesson v.url = cdata['url'] + v.uuid = cdata['uuid'] v.save() else: v = Video.objects.create( @@ -257,6 +264,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): title=cdata['title'], lesson=lesson, url=cdata['url'], + uuid=cdata['uuid'], ) elif ctype == 'images': if 'id' in cdata and cdata['id']: @@ -264,6 +272,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): g.position = cdata['position'] g.title = cdata['title'] g.lesson = lesson + g.uuid = cdata['uuid'] g.save() if 'images' in cdata: for image in cdata['images']: @@ -276,6 +285,7 @@ class LessonCreateSerializer(serializers.ModelSerializer): lesson=lesson, position=cdata['position'], title=cdata['title'], + uuid=cdata['uuid'], ) if 'images' in cdata: for image in cdata['images']: diff --git a/api/v1/serializers/mixins.py b/api/v1/serializers/mixins.py index 73854170..b98f98f4 100644 --- a/api/v1/serializers/mixins.py +++ b/api/v1/serializers/mixins.py @@ -22,6 +22,7 @@ class DispatchContentMixin(object): t.title = cdata['title'] t.course = course t.txt = cdata['txt'] + t.uuid = cdata['uuid'] t.save() else: t = Text.objects.create( @@ -30,6 +31,7 @@ class DispatchContentMixin(object): title=cdata['title'], course=course, txt=cdata['txt'], + uuid=cdata['uuid'], ) elif ctype == 'image': if 'id' in cdata and cdata['id']: @@ -38,7 +40,15 @@ class DispatchContentMixin(object): image.position = cdata['position'] image.title = cdata['title'] image.course = course - image.img = ImageObject.objects.get(id=cdata['img']) + + try: + image_object = ImageObject.objects.get(id=cdata['img']) + image.img = image_object + image.save() + except ImageObject.DoesNotExist: + pass + + image.uuid = cdata['uuid'] image.save() else: image = Image.objects.create( @@ -46,8 +56,15 @@ class DispatchContentMixin(object): position=cdata['position'], title=cdata['title'], course=course, - img=ImageObject.objects.get(id=cdata['img']), + uuid=cdata['uuid'], ) + try: + image_object = ImageObject.objects.get(id=cdata['img']) + image.img = image_object + image.save() + except ImageObject.DoesNotExist: + pass + elif ctype == 'image-text': if 'id' in cdata and cdata['id']: it = ImageText.objects.get(id=cdata['id']) @@ -55,8 +72,16 @@ class DispatchContentMixin(object): it.position = cdata['position'] it.title = cdata['title'] it.course = course - it.img = ImageObject.objects.get(id=cdata['img']) + + try: + image_object = ImageObject.objects.get(id=cdata['img']) + it.img = image_object + it.save() + except ImageObject.DoesNotExist: + pass + it.txt = cdata['txt'] + it.uuid = cdata['uuid'] it.save() else: it = ImageText.objects.create( @@ -64,9 +89,15 @@ class DispatchContentMixin(object): position=cdata['position'], title=cdata['title'], course=course, - img=ImageObject.objects.get(id=cdata['img']), txt=cdata['txt'], + uuid=cdata['uuid'], ) + try: + image_object = ImageObject.objects.get(id=cdata['img']) + it.img = image_object + it.save() + except ImageObject.DoesNotExist: + pass elif ctype == 'video': if 'id' in cdata and cdata['id']: v = Video.objects.get(id=cdata['id']) @@ -75,6 +106,7 @@ class DispatchContentMixin(object): v.title = cdata['title'] v.course = course v.url = cdata['url'] + v.uuid = cdata['uuid'] v.save() else: v = Video.objects.create( @@ -83,6 +115,7 @@ class DispatchContentMixin(object): title=cdata['title'], course=course, url=cdata['url'], + uuid=cdata['uuid'], ) elif ctype == 'images': if 'id' in cdata and cdata['id']: @@ -91,6 +124,7 @@ class DispatchContentMixin(object): g.course = course g.position = cdata['position'] g.title = cdata['title'] + g.uuid = cdata['uuid'] g.save() if 'images' in cdata: for image in cdata['images']: @@ -109,6 +143,7 @@ class DispatchContentMixin(object): course=course, position=cdata['position'], title=cdata['title'], + uuid=cdata['uuid'], ) if 'images' in cdata: for image in cdata['images']: diff --git a/api/v1/views.py b/api/v1/views.py index c47ce413..2782830b 100644 --- a/api/v1/views.py +++ b/api/v1/views.py @@ -341,11 +341,13 @@ class CommentViewSet(ExtendedModelViewSet): queryset = self.queryset is_deactivated = self.request.query_params.get('is_deactivated', '0') if is_deactivated == '0': - return queryset + queryset = queryset elif is_deactivated == '1': - return queryset.filter(deactivated_at__isnull=True) + queryset = queryset.filter(deactivated_at__isnull=True) elif is_deactivated == '2': - return queryset.filter(deactivated_at__isnull=False) + queryset = queryset.filter(deactivated_at__isnull=False) + + return queryset class AuthorRequestViewSet(ExtendedModelViewSet): diff --git a/apps/content/migrations/0016_auto_20180406_1816.py b/apps/content/migrations/0016_auto_20180406_1816.py new file mode 100644 index 00000000..178b4ec3 --- /dev/null +++ b/apps/content/migrations/0016_auto_20180406_1816.py @@ -0,0 +1,19 @@ +# Generated by Django 2.0.3 on 2018-04-06 18:16 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0015_content_uuid'), + ] + + operations = [ + migrations.AlterField( + model_name='image', + name='img', + field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='content_images', to='content.ImageObject', verbose_name='Объект изображения'), + ), + ] diff --git a/apps/content/migrations/0017_auto_20180406_1847.py b/apps/content/migrations/0017_auto_20180406_1847.py new file mode 100644 index 00000000..0007af09 --- /dev/null +++ b/apps/content/migrations/0017_auto_20180406_1847.py @@ -0,0 +1,19 @@ +# Generated by Django 2.0.3 on 2018-04-06 18:47 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0016_auto_20180406_1816'), + ] + + operations = [ + migrations.AlterField( + model_name='imagetext', + name='img', + field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='content_imagetexts', to='content.ImageObject', verbose_name='Объект изображения'), + ), + ] diff --git a/apps/content/models.py b/apps/content/models.py index 5c0b9b66..f82e3bd5 100644 --- a/apps/content/models.py +++ b/apps/content/models.py @@ -52,6 +52,7 @@ class Image(Content): img = models.ForeignKey( ImageObject, related_name='content_images', verbose_name='Объект изображения', on_delete=models.CASCADE, + null=True ) @@ -63,6 +64,7 @@ class ImageText(Content): img = models.ForeignKey( ImageObject, related_name='content_imagetexts', verbose_name='Объект изображения', on_delete=models.CASCADE, + null=True ) txt = models.TextField('Текст', default='') diff --git a/apps/course/templates/course/_items.html b/apps/course/templates/course/_items.html index 33312e53..f7b7d666 100644 --- a/apps/course/templates/course/_items.html +++ b/apps/course/templates/course/_items.html @@ -33,6 +33,16 @@
ЧЕРНОВИК
+ {% elif course.status == 3 %} +
+
В АРХИВЕ
+
+
+ {% elif course.status == 4 %} +
+
ОТКЛОНЕН
+
+
{% endif %}
diff --git a/apps/course/templates/course/blocks/comment.html b/apps/course/templates/course/blocks/comment.html index 497c398d..096d0175 100644 --- a/apps/course/templates/course/blocks/comment.html +++ b/apps/course/templates/course/blocks/comment.html @@ -1,7 +1,7 @@ {% load static %} {% if not node.deactivated_at %} -
+
{% if node.author.photo %}
diff --git a/apps/course/templates/course/content/gallery.html b/apps/course/templates/course/content/gallery.html index 0d751dc6..41fbf409 100644 --- a/apps/course/templates/course/content/gallery.html +++ b/apps/course/templates/course/content/gallery.html @@ -1,28 +1,32 @@ {% load thumbnail %} {% if results %} -
Галерея итогов обучения
-
- {% for image in course.gallery.gallery_images.all %} -
- - {% thumbnail image.img.image "140x140" crop="center" as im %} - - {% endthumbnail %} - +
Галерея итогов обучения
+
+ {% for image in course.gallery.gallery_images.all %} +
+ + {% thumbnail image.img.image "140x140" crop="center" as im %} + + {% endthumbnail %} + +
+ {% endfor %}
- {% endfor %} -
{% else %} -
{{ content.title }}
-
- {% for image in content.gallery_images.all %} -
- - {% thumbnail image.img.image "140x140" crop="center" as im %} - - {% endthumbnail %} - +
+
+
{{ content.title }}
+
+ {% for image in content.gallery_images.all %} +
+ + {% thumbnail image.img.image "140x140" crop="center" as im %} + + {% endthumbnail %} + +
+ {% endfor %} +
+
- {% endfor %} -
{% endif %} diff --git a/apps/course/templates/course/content/image.html b/apps/course/templates/course/content/image.html index 1117d434..4ab24601 100644 --- a/apps/course/templates/course/content/image.html +++ b/apps/course/templates/course/content/image.html @@ -1,8 +1,10 @@ -
- {{ content.title }} -
-
- - - +
+
+
+ {{ content.title }} +
+
+ +
+
diff --git a/apps/course/templates/course/content/imagetext.html b/apps/course/templates/course/content/imagetext.html index 0b3301cc..62ec511b 100644 --- a/apps/course/templates/course/content/imagetext.html +++ b/apps/course/templates/course/content/imagetext.html @@ -1,11 +1,13 @@ -
- {{ content.title }} -
-
- {{ content.txt | safe }} -
-
- - - -
\ No newline at end of file +
+
+
{{ content.title }}
+ +
+
+
+
{{ content.txt | safe }}
+
+
+ +
+
diff --git a/apps/course/templates/course/content/text.html b/apps/course/templates/course/content/text.html index c362b529..18ce2235 100644 --- a/apps/course/templates/course/content/text.html +++ b/apps/course/templates/course/content/text.html @@ -1,6 +1,10 @@ -
-{{ content.title }} +
+
+
+ {{ content.title }} +
+
+ {{ content.txt | safe }}
-
-{{ content.txt | safe }} +
\ No newline at end of file diff --git a/apps/course/templates/course/content/video.html b/apps/course/templates/course/content/video.html index df9893f6..ae3afa1b 100644 --- a/apps/course/templates/course/content/video.html +++ b/apps/course/templates/course/content/video.html @@ -1,13 +1,17 @@ -
- {{ content.title }} -
-
- {% if 'youtube.com' in content.url or 'youtu.be' in content.url %} - - {% elif 'vimeo.com' in content.url %} - - {% endif %} +
+
+
+ {{ content.title }} +
+
+ {% if 'youtube.com' in content.url or 'youtu.be' in content.url %} + + {% elif 'vimeo.com' in content.url %} + + {% endif %} +
+
\ No newline at end of file diff --git a/apps/course/templates/course/course.html b/apps/course/templates/course/course.html index 0a3c2ce4..f3069394 100644 --- a/apps/course/templates/course/course.html +++ b/apps/course/templates/course/course.html @@ -174,7 +174,7 @@ {% if course.is_deferred_start %}
Курс начнется:
-
{{ course.deferred_start_at_humanize }}
+
{{ course.deferred_start_at_humanize }}
{% else %} {% comment %} @@ -240,13 +240,11 @@ {% endif %}
{% for content in course.content.all %} -
-
+ {% with template="course/content/"|add:content.ctype|add:".html" %} {% include template %} {% endwith %} -
-
+ {% endfor %} {% if user.is_authenticated and course.lessons.exists %}
@@ -304,7 +302,7 @@
{% endcomment %} {% endif %} -{% if course.gallery %} +{% if False %}
{% include "course/content/gallery.html" with results=True %} diff --git a/apps/course/templates/course/course_edit.html b/apps/course/templates/course/course_edit.html index 5858e4c3..d27f5c6c 100644 --- a/apps/course/templates/course/course_edit.html +++ b/apps/course/templates/course/course_edit.html @@ -1,13 +1,19 @@ {% extends "templates/lilcity/edit_index.html" %} {% load static %} -{% block title %}{% if course %}Редактирование курса {{ course.title }}{% else %}Создание курса{% endif %}{% endblock title%} +{% block title %} + {% if course %} + Редактирование {% if not live %}курса{% else %}стрима{% endif %} {{ course.title }} + {% else %} + Создание {% if not live %}курса{% else %}стрима{% endif %} + {% endif %} +{% endblock title%} {% block content %} - {% endblock content %} {% block foot %} - - + + {% endblock foot %} \ No newline at end of file diff --git a/apps/course/templates/course/course_only_lessons.html b/apps/course/templates/course/course_only_lessons.html index 357284f3..342b03ca 100644 --- a/apps/course/templates/course/course_only_lessons.html +++ b/apps/course/templates/course/course_only_lessons.html @@ -172,10 +172,6 @@
- {% else %} -
- -
{% endif %}
{{ lesson.short_description | safe }}
diff --git a/apps/course/templates/course/lesson.html b/apps/course/templates/course/lesson.html index 480d7d33..9150710d 100644 --- a/apps/course/templates/course/lesson.html +++ b/apps/course/templates/course/lesson.html @@ -3,7 +3,7 @@ {% block title %}{{ lesson.title }} - {{ block.super }}{% endblock title %} {% block content %} -
+
@@ -42,13 +42,11 @@
{% for content in lesson.content.all %} -
-
+ {% with template="course/content/"|add:content.ctype|add:".html" %} {% include template %} {% endwith %} -
-
+ {% endfor %} {% comment %}
diff --git a/apps/course/views.py b/apps/course/views.py index 42235e27..ffb28759 100644 --- a/apps/course/views.py +++ b/apps/course/views.py @@ -155,7 +155,7 @@ class CourseOnModerationView(TemplateView): class CourseEditView(TemplateView): template_name = 'course/course_edit.html' - def get(self, request, pk=None): + def get(self, request, pk=None, lesson=None): drafts = Course.objects.filter( author=request.user, status=Course.DRAFT ) @@ -171,11 +171,37 @@ class CourseEditView(TemplateView): def get_context_data(self): context = super().get_context_data() + context['live'] = 'false' if self.object: context['course'] = self.object return context +@method_decorator(login_required, name='dispatch') +class CourseLiveEditView(TemplateView): + template_name = 'course/course_edit.html' + + def get(self, request, pk=None): + drafts = Course.objects.filter( + author=request.user, status=Course.DRAFT + ) + if pk: + self.object = get_object_or_404(Course, pk=pk) + elif drafts.exists(): + self.object = drafts.last() + else: + self.object = Course.objects.create() + if request.user != self.object.author and request.user.role not in [User.ADMIN_ROLE, User.AUTHOR_ROLE]: + raise Http404 + return super().get(request) + + def get_context_data(self): + context = super().get_context_data() + context['live'] = 'true' + if self.object: + context['course'] = self.object + return context + # @method_decorator(login_required, name='dispatch') class CourseView(DetailView): model = Course diff --git a/apps/notification/templates/notification/email/_base.html b/apps/notification/templates/notification/email/_base.html index b4ce1c89..7ae29045 100644 --- a/apps/notification/templates/notification/email/_base.html +++ b/apps/notification/templates/notification/email/_base.html @@ -45,7 +45,7 @@ - +
2017 © Lil City, UAB. {% now "Y" %} © Lil City, UAB. diff --git a/apps/payment/views.py b/apps/payment/views.py index e7490ad9..7f68a963 100644 --- a/apps/payment/views.py +++ b/apps/payment/views.py @@ -46,7 +46,7 @@ class CourseBuyView(TemplateView): host = request.scheme + '://' + request.get_host() course = Course.objects.get(id=pk) if request.user == course.author: - messages.error('Вы не можете приобрести свой курс.') + messages.error(request, 'Вы не можете приобрести свой курс.') return redirect(reverse_lazy('course', args=[course.id])) course_payment = CoursePayment.objects.create( user=request.user, diff --git a/apps/user/templates/user/notification-settings.html b/apps/user/templates/user/notification-settings.html index 3a486926..f2688060 100644 --- a/apps/user/templates/user/notification-settings.html +++ b/apps/user/templates/user/notification-settings.html @@ -16,7 +16,7 @@
На электронный адрес {{ user.email }} отправлено письмо для подтверждения.
Если письмо где-то затерялось, вы можете повторить отправку письма для подтверждения. Отправить?
- ОТПРАВИТЬ + ОТПРАВИТЬ ПИСЬМО diff --git a/apps/user/templates/user/payment-history.html b/apps/user/templates/user/payment-history.html index af251c80..63de99bd 100644 --- a/apps/user/templates/user/payment-history.html +++ b/apps/user/templates/user/payment-history.html @@ -16,7 +16,7 @@
На электронный адрес {{ user.email }} отправлено письмо для подтверждения.
Если письмо где-то затерялось, вы можете повторить отправку письма для подтверждения. Отправить?
- ОТПРАВИТЬ + ОТПРАВИТЬ ПИСЬМО diff --git a/apps/user/templates/user/profile-settings.html b/apps/user/templates/user/profile-settings.html index f5f2e9fe..8228c2ff 100644 --- a/apps/user/templates/user/profile-settings.html +++ b/apps/user/templates/user/profile-settings.html @@ -16,7 +16,7 @@
На электронный адрес {{ user.email }} отправлено письмо для подтверждения.
Если письмо где-то затерялось, вы можете повторить отправку письма для подтверждения. Отправить?
- ОТПРАВИТЬ + ОТПРАВИТЬ ПИСЬМО diff --git a/project/settings.py b/project/settings.py index 2934c1de..b12c100d 100644 --- a/project/settings.py +++ b/project/settings.py @@ -254,6 +254,8 @@ RAVEN_CONFIG = { INSTAGRAM_RESULTS_PATH = 'media/instagram/results/' +DATA_UPLOAD_MAX_MEMORY_SIZE = 20242880 + try: from .local_settings import * except ImportError: diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html index 0c2fc067..b5e79164 100644 --- a/project/templates/lilcity/edit_index.html +++ b/project/templates/lilcity/edit_index.html @@ -278,7 +278,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
При записи на 5 уроков скидка 10%.
@@ -345,6 +345,10 @@
+ {% block foot %}{% endblock foot %} diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html index dbdbcfe2..a39fb3b8 100644 --- a/project/templates/lilcity/index.html +++ b/project/templates/lilcity/index.html @@ -131,7 +131,7 @@ {% endcomment %} -
ВИДЕО-КУРСЫ +
ВИДЕОКУРСЫ
{% category_menu_items category %}
@@ -248,7 +248,7 @@
-
2017 © Lil City, UAB.
+
{% now "Y" %} © Lil City, UAB.
Договор-оферта
|
@@ -439,7 +439,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
diff --git a/project/urls.py b/project/urls.py index bdcfc266..9f34b8c4 100644 --- a/project/urls.py +++ b/project/urls.py @@ -23,7 +23,7 @@ from apps.course.views import ( CoursesView, likes, coursecomment, CourseView, LessonView, SearchView, lessoncomment, CourseEditView, - CourseOnModerationView, + CourseOnModerationView, CourseLiveEditView, ) from apps.user.views import ( AuthorRequestView, UserView, @@ -46,6 +46,10 @@ urlpatterns = [ path('author-request/success/', TemplateView.as_view(template_name='user/become-author-success.html'), name='author-request-success'), path('courses/', CoursesView.as_view(), name='courses'), path('course/create', CourseEditView.as_view(), name='course_create'), + path('course/create/lessons', CourseEditView.as_view(), name='course_create_lessons'), + path('course/create/lessons/new', CourseEditView.as_view(), name='course_create_lessons_new'), + path('course/create/lessons/edit/', CourseEditView.as_view(), name='course_create_lessons_edit'), + path('course/create/live', CourseLiveEditView.as_view(), name='course_create_live'), path('course/on-moderation', CourseOnModerationView.as_view(), name='course-on-moderation'), path('course//', CourseView.as_view(), name='course'), path('course//', CourseView.as_view(), name='course'), diff --git a/web/build/img/sprite.svg b/web/build/img/sprite.svg index 2853f1c8..01c98f63 100644 --- a/web/build/img/sprite.svg +++ b/web/build/img/sprite.svg @@ -1,4 +1,6 @@ + + @@ -24,6 +26,11 @@ + + + + + diff --git a/web/build/index.html b/web/build/index.html index 38f1efe0..a1dbb725 100755 --- a/web/build/index.html +++ b/web/build/index.html @@ -87,7 +87,7 @@
-
ВИДЕО-КУРСЫ +
ВИДЕОКУРСЫ
ПЕРСОНАЖ
@@ -264,7 +264,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
При записи на 5 уроков скидка 10%.
diff --git a/web/build/ui-kit.html b/web/build/ui-kit.html index a30145eb..2a429bba 100755 --- a/web/build/ui-kit.html +++ b/web/build/ui-kit.html @@ -87,7 +87,7 @@
-
ВИДЕО-КУРСЫ +
ВИДЕОКУРСЫ
ПЕРСОНАЖ
@@ -352,7 +352,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
При записи на 5 уроков скидка 10%.
diff --git a/web/package.json b/web/package.json index ba9de0b4..0c6971bf 100755 --- a/web/package.json +++ b/web/package.json @@ -65,9 +65,12 @@ "owl.carousel": "^2.2.0", "slugify": "^1.2.9", "smooth-scroll": "^12.1.5", + "sortablejs": "^1.7.0", + "uuid": "^3.2.1", "validator": "^9.2.0", "vue": "^2.5.13", "vue-autosize": "^1.0.2", + "vuedraggable": "^2.16.0", "vuejs-datepicker": "^0.9.25", "vuelidate": "^0.6.1" } diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index d173f8cf..9ea3c4f2 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -35,8 +35,20 @@ v-model="course.title">
+
+
КРАТКО О КУРСЕ
+
+ +
+
-
+
КАТЕГОРИЯ
@@ -72,7 +84,22 @@
{{ courseFullUrl }}
-
+ +
+
ССЫЛКА НА VIMEO
+
+ +
+
+ +
+
ДАТА
+
+ +
+
+ +
ДОСТУП
-
-
+
ЗАПУСК
@@ -123,23 +150,10 @@
-
-
-
- -
-
-
-
+
-
- - - - +
+ - -
+ + + + +
+ @@ -257,10 +273,15 @@ import $ from 'jquery'; import {required, minValue, numeric } from 'vuelidate/lib/validators' import slugify from 'slugify'; + import Draggable from 'vuedraggable'; + import {showNotification} from "../js/modules/notification"; + import createHistory from "history/createBrowserHistory"; + + const history = createHistory(); export default { name: "course-redactor", - props: ["authorName", "authorPicture", "accessToken", "courseId"], + props: ["authorName", "authorPicture", "accessToken", "courseId", "live"], data() { return { viewSection: 'course', @@ -295,7 +316,11 @@ lessons: [], lessonsLoading: false, lessonSaving: false, - currentLesson: null, + currentLesson: { + title: '', + short_description: '', + content: [], + }, is_adding_block: false, timeOptions: [ { @@ -335,6 +360,25 @@ 'value': '18:00', } ], + + dateOptions: [ + { + 'title': 'Акварельс (Понедельник, 2 апр)', + 'value': 'Акварельс (Понедельник, 2 апр)', + }, + { + 'title': 'Рельсотрон (Вторник, 3 апр)', + 'value': 'Рельсотрон (Вторник, 3 апр)', + }, + { + 'title': 'Коломёт (Среда, 4 апр)', + 'value': 'Коломёт (Среда, 4 апр)', + }, + { + 'title': 'Зиккурат (Четверг, 5 апр)', + 'value': 'Зиккурат (Четверг, 5 апр)', + }, + ], showErrors: false, savingTimeout: null, savingDebounceTimeout: null, @@ -422,18 +466,30 @@ }, editLesson(lessonIndex) { this.currentLesson = this.lessons[lessonIndex]; + history.push("/course/create/lessons/edit/"+this.currentLesson.id); this.viewSection = 'lessons-edit'; }, + showCourse() { + if (this.viewSection !== 'course') { + history.push("/course/create"); + } + this.viewSection = 'course' + }, showLessons() { + if (this.viewSection !== 'lessons') { + history.push("/course/create/lessons"); + } this.viewSection = 'lessons'; }, addLesson() { this.currentLesson = { title: '', short_description: '', - course_id: this.course.id, content: [], }; + if (this.viewSection !== 'lessons-edit') { + history.push("/course/create/lessons/new"); + } this.viewSection = 'lessons-edit'; window.scrollTo(0, 0); }, @@ -451,6 +507,7 @@ onLessonSubmit() { this.lessonSaving = true; const currentLessonId = this.currentLesson.id; + this.currentLesson.course_id = this.course.id; api.saveLesson(this.currentLesson, this.accessToken) .then((response) => { this.lessonSaving = false; @@ -473,6 +530,7 @@ }); }, goToLessons() { + history.push("/course/create/lessons"); this.viewSection = 'lessons'; this.$nextTick(() => { const elementTop = $('#course-redactor__nav').position().top - 130; @@ -481,7 +539,9 @@ }, loadCourseDraft() { this.courseLoading = true; - api.getCourseDraft(this.accessToken) + let response = api.getCourseDraft(this.accessToken); + + response .then((response) => { this.courseLoading = false; this.course = api.convertCourseJson(response.data); @@ -493,10 +553,13 @@ this.courseLoading = false; console.log('error course loading', err); }); + + return response; }, loadCourse() { this.courseLoading = true; - api.loadCourse(this.courseId, this.accessToken) + let response = api.loadCourse(this.courseId, this.accessToken) + response .then((response) => { this.courseLoading = false; this.course = api.convertCourseJson(response.data); @@ -508,6 +571,8 @@ this.courseLoading = false; console.log('error course loading', err); }); + + return response; }, loadLessons(courseId) { @@ -515,6 +580,7 @@ onCoursePublish() { this.showErrors = true; if (this.$v.$invalid) { + showNotification("error", "Заполните все необходимые поля"); return; } const publishButton = $('#course-redactor__publish-button'); @@ -549,7 +615,7 @@ this.savingDebounceTimeout = setTimeout(() => { this.courseSaving = true; clearTimeout(this.savingTimeout); - document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНИЕ'; + document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНИЕ...'; const courseObject = this.course; courseObject.url = (courseObject.url) ? slugify(courseObject.url):courseObject.url; api.saveCourse(courseObject, this.accessToken) @@ -567,7 +633,17 @@ if (this.course.is_deferred) { courseData.is_deferred = true; } - this.course = courseData; + let remoteUUIDMapper = {} + if (courseData.content) { + courseData.content.forEach((contentElement) => { + remoteUUIDMapper[contentElement.uuid] = contentElement.data.id + }) + } + this.course.content.forEach((contentElement, index) => { + if (!contentElement.data.id) { + this.$set(this.course.content[index].data, 'id', remoteUUIDMapper[contentElement.uuid]) + } + }) if (courseData.url) { this.slugChanged = true; } @@ -578,11 +654,37 @@ .catch((err) => { this.courseSyncHook = false; this.courseSaving = false; + console.error(err); + document.getElementById('course-redactor__saving-status').innerText = 'ОШИБКА'; + this.savingTimeout = setTimeout(() => { + document.getElementById('course-redactor__saving-status').innerText = ''; + }, 2000); + alert('Произошло что-то страшное: '+err.toString()); }); - }, 2000); + }, 500); + }, + updateViewSection(location, action) { + console.log('updateViewSection[action]', action); + if (location.pathname === '/course/create/lessons') { + this.viewSection = 'lessons'; + } else if (location.pathname === '/course/create') { + this.viewSection = 'course'; + } else if (location.pathname === '/course/create/lessons/new') { + this.viewSection = 'lessons-edit'; + } else if (location.pathname.indexOf('/course/create/lessons/edit') !== -1) { + let lessonId = parseInt(location.pathname.split('/').pop()); + console.log('lessonId', lessonId, this.lessons.toString()); + console.log('lessod edit', this.lessons.find((i)=>{return i.id === lessonId})); + this.currentLesson = this.lessons.find((i)=>{return i.id === lessonId}); + this.viewSection = 'lessons-edit'; + } } }, mounted() { + console.log('mounted'); + // Listen for changes to the current location. + this.unlisten = history.listen(this.updateViewSection); + api.getCategories(this.accessToken) .then((response) => { if (response.data) { @@ -618,10 +720,13 @@ }); if (this.courseId) { - this.loadCourse() + this.loadCourse().then(()=>{this.updateViewSection(window.location, 'load')}) } else { - this.loadCourseDraft(); + this.loadCourseDraft().then(()=>{this.updateViewSection(window.location, 'load draft')}); } + + console.log('mounted end'); + // this.updateViewSection(window.location); }, computed: { coverBackgroundStyle() { @@ -629,10 +734,10 @@ }, displayPrice: { get: function () { - return this.course.is_paid ? this.course.price : 0; + return this.course.is_paid ? (this.course.price || 0) : 0; }, set: function (value) { - this.course.price = value; + this.course.price = value || 0; } }, categorySelect: { @@ -677,6 +782,9 @@ return `https://lil.city/course/${suffix}`; }, }, + beforeDestroy() { + this.unlisten(); + }, watch: { 'course': { handler: function (newValue, oldValue) { @@ -707,6 +815,7 @@ 'block-images': BlockImages, 'block-video': BlockVideo, 'lesson-redactor': LessonRedactor, + 'vue-draggable': Draggable, } } @@ -776,4 +885,23 @@ width: 140px; height: 140px; } - \ No newline at end of file + + .kit__section-remove { + button.sortable__handle { + margin-right: 10px; + cursor: -webkit-grab; + cursor: grab; + + svg.icon-hamburger { + width: 1em; + height: 1em; + } + } + } + + .sortable-ghost, .sortable-chosen { + background: white; + border-radius: 10px; + } + + diff --git a/web/src/components/LessonRedactor.vue b/web/src/components/LessonRedactor.vue index d82affb5..c43a0242 100644 --- a/web/src/components/LessonRedactor.vue +++ b/web/src/components/LessonRedactor.vue @@ -1,6 +1,6 @@ \ No newline at end of file + diff --git a/web/src/icons/hamburger.svg b/web/src/icons/hamburger.svg new file mode 100644 index 00000000..b5866b36 --- /dev/null +++ b/web/src/icons/hamburger.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/web/src/js/app.js b/web/src/js/app.js index 9d0023d9..16651100 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -13,6 +13,7 @@ import "./modules/courses"; import "./modules/comments"; import "./modules/password-show"; import "./modules/profile"; +import "./modules/notification"; import "./modules/mixpanel"; import "../sass/app.sass"; diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js index 2cfc5385..de620ac0 100644 --- a/web/src/js/modules/api.js +++ b/web/src/js/modules/api.js @@ -83,6 +83,7 @@ export const api = { 'type': 'text', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'txt': block.data.text, @@ -93,6 +94,7 @@ export const api = { 'type': 'image', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -103,6 +105,7 @@ export const api = { 'type': 'image-text', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -114,6 +117,7 @@ export const api = { 'type': 'images', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'images': block.data.images.map((galleryImage) => { @@ -129,6 +133,7 @@ export const api = { 'type': 'video', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'url': block.data.video_url, @@ -160,6 +165,7 @@ export const api = { 'position': ++index, 'title': block.data.title, 'txt': block.data.text, + 'uuid': block.uuid, } } } else if (block.type === 'image') { @@ -170,6 +176,7 @@ export const api = { 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, + 'uuid': block.uuid, } } } else if (block.type === 'image-text') { @@ -181,6 +188,7 @@ export const api = { 'title': block.data.title, 'img': block.data.image_id, 'txt': block.data.text, + 'uuid': block.uuid, } } } else if (block.type === 'images') { @@ -196,6 +204,7 @@ export const api = { 'img': galleryImage.img, } }), + 'uuid': block.uuid, } } } else if (block.type === 'video') { @@ -206,6 +215,7 @@ export const api = { 'position': ++index, 'title': block.data.title, 'url': block.data.video_url, + 'uuid': block.uuid, } } } @@ -254,6 +264,7 @@ export const api = { coverImageId: courseJSON.cover && courseJSON.cover.id ? courseJSON.cover.id : null, coverImage: courseJSON.cover && courseJSON.cover.image ? courseJSON.cover.image : null, content: api.convertContentResponse(courseJSON.content), + gallery: {images: (courseJSON.gallery) ? courseJSON.gallery.gallery_images:[]}, } }, convertContentResponse: (contentJson) => { @@ -269,6 +280,7 @@ export const api = { if (contentItem.type === 'text') { return { 'type': 'text', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, 'title': contentItem.title, @@ -278,27 +290,30 @@ export const api = { } else if (contentItem.type === 'image') { return { 'type': 'image', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, 'title': contentItem.title, - 'image_id': contentItem.img.id, - 'image_url': contentItem.img.image, + 'image_id': (contentItem.img) ? contentItem.img.id:null, + 'image_url': (contentItem.img) ? contentItem.img.image:null, } } } else if (contentItem.type === 'image-text') { return { 'type': 'image-text', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, 'title': contentItem.title, - 'image_id': contentItem.img.id, - 'image_url': contentItem.img.image, + 'image_id': (contentItem.img) ? contentItem.img.id:null, + 'image_url': (contentItem.img) ? contentItem.img.image:null, 'text': contentItem.txt, } } } else if (contentItem.type === 'images') { return { 'type': 'images', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, 'title': contentItem.title, @@ -314,6 +329,7 @@ export const api = { } else if (contentItem.type === 'video') { return { 'type': 'video', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, 'title': contentItem.title, @@ -407,4 +423,4 @@ export const api = { } }); } -}; \ No newline at end of file +}; diff --git a/web/src/js/modules/comments.js b/web/src/js/modules/comments.js index 83f810ab..30b0a815 100644 --- a/web/src/js/modules/comments.js +++ b/web/src/js/modules/comments.js @@ -22,7 +22,7 @@ $(document).ready(function () { .done(function (data) { if (data.success === true) { if (replyToValue > 0) { - $(`#question__${replyToValue}`).after(data.comment); + $(`#question__replyto__${replyToValue}`).after(data.comment); } else { $('.questions__list').append(data.comment); } diff --git a/web/src/js/modules/courses.js b/web/src/js/modules/courses.js index 90ffeb97..2581df46 100644 --- a/web/src/js/modules/courses.js +++ b/web/src/js/modules/courses.js @@ -17,7 +17,9 @@ $(document).ready(function () { $('div[data-future-course]').each((_, element) => { const courseTime = parseInt($(element).attr('data-future-course-time')) + LIL_SERVER_TIME_DIFF; const relativeTimeString = moment(courseTime, 'X').fromNow(); + $(element).find('div.courses__time').text(relativeTimeString); + $(element).find('div.video__time').text(relativeTimeString); }); }, 1000); @@ -31,7 +33,7 @@ $(document).ready(function () { e.preventDefault(); const currentCategory = $(this).attr('data-category-name'); $('[data-category-name]').removeClass('active'); - $(`[data-category-name=${currentCategory}]`).addClass('active'); + $(`[data-category-name='${currentCategory}']`).addClass('active'); history.replace($(this).attr('data-category-url')); load_courses($(this).attr('data-category-url'), true); }); diff --git a/web/src/js/modules/mixpanel.js b/web/src/js/modules/mixpanel.js index d6c0626f..bfa7040e 100644 --- a/web/src/js/modules/mixpanel.js +++ b/web/src/js/modules/mixpanel.js @@ -1,34 +1,36 @@ import $ from 'jquery'; $(document).ready(function (e) { - mixpanel.identify(USER_ID); - let body = $('body'), - cource = $('.course'); + if (typeof mixpanel != 'undefined') { + mixpanel.identify(USER_ID); + let body = $('body'), + cource = $('.course'); - if (cource.length) { - mixpanel.track( - 'Open course', - { 'course_id': COURSE_ID } - ); - }; - - body.on('click', '[data-popup]', function (e) { - let data = $(this).data('popup'); - if (data === '.js-popup-buy') { + if (cource.length) { mixpanel.track( - 'Open school buy popup' + 'Open course', + { 'course_id': COURSE_ID } ); - } - }); - body.on('click', '[data-course-buy]', function (e) { - e.preventDefault(); - let href = $(this).attr('href'); - let t = mixpanel.track( - 'Click course buy button', - { 'course_id': COURSE_ID }, - function () { - window.location = href; + }; + + body.on('click', '[data-popup]', function (e) { + let data = $(this).data('popup'); + if (data === '.js-popup-buy') { + mixpanel.track( + 'Open school buy popup' + ); } - ); - }); + }); + body.on('click', '[data-course-buy]', function (e) { + e.preventDefault(); + let href = $(this).attr('href'); + let t = mixpanel.track( + 'Click course buy button', + { 'course_id': COURSE_ID }, + function () { + window.location = href; + } + ); + }); + } }); diff --git a/web/src/js/modules/notification.js b/web/src/js/modules/notification.js new file mode 100644 index 00000000..7e614802 --- /dev/null +++ b/web/src/js/modules/notification.js @@ -0,0 +1,14 @@ +import $ from 'jquery'; +import '../../sass/components/notification.scss'; + +export function showNotification(style, text) { + let htmlNode = document.createElement('div'); + let htmlElement = $(htmlNode).addClass('notification').addClass(`notification--${style}`).text(text).appendTo($('body')); + + setTimeout(() => { + htmlElement.fadeOut(400, () => { + htmlElement.remove(); + }) + }, 3500); +} + diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass index e1279091..f924962a 100755 --- a/web/src/sass/_common.sass +++ b/web/src/sass/_common.sass @@ -24,7 +24,7 @@ =fl font-family: 'ProximaNova-Light', serif -$pink: #FF9393 +$pink: #FF9393linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%) $pink-light: #FDF8F9 $purple: #B995D9 $green: #8ECFC0 @@ -37,14 +37,14 @@ $border: #E6E6E6 $cl: #191919 body - min-width: 360px + min-width: 360px +f font-size: 15px - color: $cl + color: $cl line-height: 1.333 +t font-size: 14px - line-height: 1.57 + line-height: 1.57 &.no-scroll overflow: hidden button, @@ -54,9 +54,9 @@ select +f font-size: 15px button - background: none + background: none a - color: $pink + color: $pink text-decoration: none input, textarea @@ -68,11 +68,11 @@ textarea strong, b +fb - + * &::selection background: $pink - color: white + color: white // box-shadow: 0 0 0 1px red button @@ -81,7 +81,7 @@ button .outer display: flex - min-height: 100vh + min-height: 100vh flex-direction: column .container @@ -96,11 +96,11 @@ button +t padding: 0 15px &_md - max-width: 860px + max-width: 860px &_sm - max-width: 700px + max-width: 700px &_xs - max-width: 540px + max-width: 540px .btn position: relative @@ -114,9 +114,9 @@ button letter-spacing: 2px text-align: center transition: all .2s - z-index: 2 + z-index: 2 +t - line-height: 1.33 + line-height: 1.33 &:hover box-shadow: 0 5px 20px 0 rgba(0,0,0,0.11) &:disabled @@ -136,7 +136,7 @@ button .icon position: relative top: -1px - margin-right: 15px + margin-right: 15px fill: $cl transition: fill .2s &_dark @@ -145,14 +145,14 @@ button &:hover background: #545454 &:active - color: rgba(white,.1) + color: rgba(white,.1) &_light background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%) &_stroke &:hover, &:active &:before - opacity: 0 + opacity: 0 &:before content: '' position: absolute @@ -162,12 +162,12 @@ button bottom: 1px background: white border-radius: 2px - transition: opacity .2s + transition: opacity .2s z-index: -2 &_gray - background: $bg + background: $bg &_md - padding: 18px 24px 17px + padding: 18px 24px 17px +m padding: 13px 24px 12px &_lg @@ -181,13 +181,13 @@ button &_icon padding-left: 9px padding-right: 9px - background: transparent + background: transparent border: 1px solid $border font-size: 0 .icon margin: 0 font-size: 13px - fill: $cl + fill: $cl &.loading box-shadow: none color: transparent @@ -203,7 +203,7 @@ button margin: -12px 0 0 -12px border: 3px solid $cl border-left: 3px solid transparent - border-radius: 50% + border-radius: 50% animation: loading .6s infinite linear &_fb background: #3957A7 @@ -250,7 +250,7 @@ a.btn background: url(../img/school-lil-city.svg) no-repeat 0 0 / contain +t width: 124px - height: 40px + height: 40px .search position: relative @@ -267,8 +267,8 @@ a.btn padding: 0 15px background: rgba($cl,.1) border-radius: 20px - color: rgba($cl,.8) - transition: width .4s + color: rgba($cl,.8) + transition: width .4s +m width: 100% &__btn @@ -278,7 +278,7 @@ a.btn bottom: 0 width: 40px .icon - font-size: 17px + font-size: 17px fill: rgba($cl,.5) transform: translate(0,2px) &.open &__input @@ -296,7 +296,7 @@ a.btn &__container display: flex height: 100px - border-bottom: 1px solid $border + border-bottom: 1px solid $border align-items: center +t height: 65px @@ -318,9 +318,9 @@ a.btn bottom: 0 background: white flex-direction: column - z-index: 20 + z-index: 20 &.visible - display: block + display: block &__actions display: flex margin: auto @@ -332,7 +332,7 @@ a.btn left: 0 right: 0 padding: 10px 15px - background: white + background: white &__status width: 100px margin-right: 5px @@ -346,7 +346,7 @@ a.btn +m display: flex height: 70px - border-bottom: 1px solid $border + border-bottom: 1px solid $border align-items: center &__search +m @@ -357,29 +357,29 @@ a.btn margin: auto +m display: block - height: calc(100vh - 71px) + height: calc(100vh - 71px) margin: 0 padding: 15px 0 overflow: auto &__group position: relative &__group:hover &__section - color: $cl + color: $cl +m - color: $pink + color: $pink &__group:hover &__list - opacity: 1 + opacity: 1 visibility: visible &__section display: block height: 100px margin: 0 15px border-bottom: 1px solid transparent - +fb + +fb font-size: 12px color: #8C8C8C line-height: 100px - transition: color .2s + transition: color .2s +t height: 65px font-size: 10px @@ -391,17 +391,17 @@ a.btn padding: 15px 40px 15px 20px border: none font-size: 14px - color: $pink - letter-spacing: 2.5px + color: $pink + letter-spacing: 2.5px line-height: 1.33 &_sub +m - &:before, + &:before, &:after content: '' position: absolute top: 50% - background: $gray + background: $gray transform: translateY(-50%) &:before right: 20px @@ -410,7 +410,7 @@ a.btn &:after right: 25px width: 2px - height: 12px + height: 12px &.active border-color: $cl color: $cl @@ -419,7 +419,7 @@ a.btn &.open +m &:after - opacity: 0 + opacity: 0 &__list, &__drop position: absolute @@ -433,7 +433,7 @@ a.btn border-radius: 2px opacity: 0 visibility: hidden - transform: translate3d(0,0,0) + transform: translate3d(0,0,0) transition: opacity .2s, visibility .2s overflow: hidden &__list @@ -460,7 +460,7 @@ a.btn &__balance margin-bottom: 10px padding: 0 20px 10px - border-bottom: 1px solid $border + border-bottom: 1px solid $border &__link display: block position: relative @@ -479,7 +479,7 @@ a.btn &_green color: $green-light +m - color: $green-light + color: $green-light &:hover color: darken($green-light,10) &_gray @@ -489,7 +489,7 @@ a.btn &_border margin-bottom: 5px padding: 2px 20px 10px - border-bottom: 1px solid $border + border-bottom: 1px solid $border color: $cl &__link.active &__title &:after @@ -529,19 +529,19 @@ a.btn +fb font-size: 12px color: #8C8C8C - line-height: 100px - transition: color .2s + line-height: 100px + transition: color .2s +t height: 65px margin-left: 25px font-size: 10px - line-height: 65px + line-height: 65px +m margin: 0 font-size: 0 - line-height: 1 + line-height: 1 &:hover - color: $cl + color: $cl .icon display: none +m @@ -560,7 +560,7 @@ a.btn padding: 15px 20px &__login:hover &__drop opacity: 1 - visibility: visible + visibility: visible &__ava height: 40px &_bg &__container @@ -573,15 +573,15 @@ a.btn margin-top: -100px padding: 120px 0 50px background-position: 50% 50% - background-repeat: no-repeat - background-size: cover + background-repeat: no-repeat + background-size: cover text-align: center - z-index: 4 + z-index: 4 +t - min-height: 350px - padding: 137px 0 40px + min-height: 350px + padding: 137px 0 40px +m - min-height: 400px + min-height: 400px &:before content: '' position: absolute @@ -590,20 +590,20 @@ a.btn right: 0 bottom: 0 background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%) - opacity: .8 + opacity: .8 z-index: -2 &__center margin: auto &__title max-width: 780px - margin: 0 auto 40px + margin: 0 auto 40px +fb font-size: 50px - line-height: (6/5) + line-height: (6/5) +t - max-width: 400px + max-width: 400px font-size: 24px - line-height: 1.33 + line-height: 1.33 +m margin-bottom: 50px &__content @@ -618,12 +618,12 @@ a.btn &:before background-image: linear-gradient(-225deg, #E2E2E2 0%, #E2FFDF 100%) &_sm - min-height: 0 + min-height: 0 padding: 135px 0 55px +t min-height: 0 +m - min-height: 0 + min-height: 0 &_sm &__title margin-bottom: 0 @@ -646,7 +646,7 @@ a[name] text-align: center &_sm margin-bottom: 20px - font-size: 25px + font-size: 25px .subtitle margin-bottom: 25px @@ -671,7 +671,7 @@ a[name] text-align: center z-index: 2 +t - max-width: 400px + max-width: 400px margin-bottom: 40px font-size: 14px line-height: 1.5 @@ -741,7 +741,7 @@ a[name] +m padding: 30px 0 &_review - background: url(../img/bg-elephants.jpg) 0 0 / 100px 102px + background: url(../img/bg-elephants.jpg) 0 0 / 100px 102px &_gray background: $bg &_pink-light @@ -756,10 +756,10 @@ a[name] width: 100% max-width: 944px height: 1px - background: $border + background: $border transform: translateX(-50%) +t - max-width: calc(100% - 30px) + max-width: calc(100% - 30px) &_gradient background-image: linear-gradient(-225deg, #F8F8F8 0%, #FFF2F2 100%) &_tabs @@ -780,6 +780,7 @@ a[name] width: 100% height: 100% border-radius: 50% + object-fit: cover &__input position: absolute top: 0 @@ -835,7 +836,7 @@ a[name] align-items: center &__ava height: 40px - margin-right: 10px + margin-right: 10px flex: 0 0 40px &__ava height: 40px @@ -863,7 +864,7 @@ a[name] font-size: 15px &_white &__date - color: white + color: white .video display: block @@ -886,9 +887,9 @@ a[name] top: 0 left: 0 width: 100% - height: 100% + height: 100% padding: 20px - background: rgba($cl,.5) + background: rgba($cl,.5) align-items: center justify-content: center flex-direction: column @@ -929,7 +930,7 @@ a[name] +t max-width: calc(100% - 55px) +m - max-width: 100% + max-width: 100% &__more text-align: center +t @@ -940,10 +941,10 @@ a[name] position: relative padding: 55px 0 50px background-position: 50% 50% - background-repeat: no-repeat + background-repeat: no-repeat background-size: cover color: white - text-align: center + text-align: center z-index: 4 +t padding: 30px 0 @@ -962,11 +963,11 @@ a[name] margin-bottom: 85px +fb font-size: 20px - letter-spacing: 4px + letter-spacing: 4px +t margin-bottom: 30px font-size: 12px - letter-spacing: 2px + letter-spacing: 2px +m margin-bottom: 40px &__title @@ -982,7 +983,7 @@ a[name] +t margin-bottom: 65px +m - max-width: 80% + max-width: 80% margin-bottom: 40px &__action +fb @@ -1002,7 +1003,7 @@ a[name] text-align: center flex-wrap: wrap justify-content: center - z-index: 4 + z-index: 4 +t margin: 0 +m @@ -1035,17 +1036,17 @@ a[name] font-size: 37px &__title display: flex - min-height: 38px + min-height: 38px margin-bottom: 10px +fb font-size: 14px letter-spacing: 2.5px - line-height: 1.42 + line-height: 1.42 text-transform: uppercase align-items: center justify-content: center +m - min-height: 0 + min-height: 0 &__content +t font-size: 12px @@ -1064,7 +1065,7 @@ a[name] margin-bottom: 40px &__ava height: 60px - margin-right: 20px + margin-right: 20px flex: 0 0 60px +t height: 45px @@ -1081,7 +1082,7 @@ a[name] &__name +fb font-size: 15px - line-height: 1.33 + line-height: 1.33 .gallery display: flex @@ -1117,11 +1118,11 @@ a[name] margin: 0 10px 20px +m width: calc(33.33% - 10px) - margin: 0 5px 10px + margin: 0 5px 10px &_lg width: calc(66.66% - 20px) +m - width: calc(66.66% - 10px) + width: calc(66.66% - 10px) &:nth-child(4) clear: both &__pic @@ -1145,7 +1146,7 @@ a[name] padding: 50px 0 60px flex: 0 0 49% text-align: center - z-index: 2 + z-index: 2 +t padding: 30px 0 35px flex: 0 0 47% @@ -1202,9 +1203,9 @@ a[name] &__pic display: block max-width: 100% - max-height: 277px + max-height: 277px +m - max-height: 185px + max-height: 185px a.grey-link color: #A7A7A7 @@ -1226,7 +1227,7 @@ a.grey-link &__wrap max-width: 375px +t - max-width: 220px + max-width: 220px +m max-width: 180px &__theme @@ -1244,28 +1245,28 @@ a.grey-link margin-bottom: 30px +fs font-size: 18px - line-height: 1.33 + line-height: 1.33 +m margin-bottom: 15px font-size: 14px &__btn - background: transparent + background: transparent padding: 11px 24px 10px border: 2px solid $cl - color: $cl + color: $cl &:hover - background: $cl + background: $cl border-color: $cl color: white &:active - color: rgba(white,.1) + color: rgba(white,.1) &__preview position: absolute top: 0 left: calc(50% - 145px) bottom: 0 +t - left: calc(50% - 110px) + left: calc(50% - 110px) +m left: 50% &__pic @@ -1300,31 +1301,31 @@ a.grey-link letter-spacing: 4px +t font-size: 12px - letter-spacing: 2px + letter-spacing: 2px &__name margin-bottom: 20px +fb &__content font-size: 16px - line-height: (22/16) + line-height: (22/16) .toggle font-size: 14px &__head - color: $pink + color: $pink .icon position: relative top: -1px margin-left: 10px font-size: 6px - transition: transform .2s + transition: transform .2s &.active .icon transform: rotate(-180deg) &__body display: none padding-top: 10px - color: #888 + color: #888 .schedule margin-bottom: 70px @@ -1379,7 +1380,7 @@ a.grey-link &__item display: block margin: 0 10px 60px - color: $cl + color: $cl flex: 0 0 calc(33.33% - 20px) +t margin-bottom: 40px @@ -1389,7 +1390,7 @@ a.grey-link display: block position: relative margin-bottom: 15px - color: $cl + color: $cl +t margin-bottom: 10px &__preview:hover &__view @@ -1408,13 +1409,13 @@ a.grey-link height: 30px right: 10px &_fav - background-image: url(../img/fav.svg) + background-image: url(../img/fav.svg) &_clock - background-image: url(../img/clock.svg) + background-image: url(../img/clock.svg) &__pic display: block width: 100% - border-radius: 2px + border-radius: 2px &__view display: flex position: absolute @@ -1423,13 +1424,13 @@ a.grey-link width: 100% height: 100% background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%) - border-radius: 2px + border-radius: 2px opacity: 0 font-size: 18px align-items: center justify-content: center transition: opacity .2s - z-index: 4 + z-index: 4 &__soon display: flex position: absolute @@ -1439,7 +1440,7 @@ a.grey-link bottom: 0 padding: 10px background: rgba(black,.4) - color: white + color: white flex-direction: column justify-content: center text-align: center @@ -1455,7 +1456,7 @@ a.grey-link letter-spacing: 3px +t font-size: 12px - letter-spacing: 1px + letter-spacing: 1px &__details display: flex margin-bottom: 10px @@ -1464,13 +1465,13 @@ a.grey-link +fb font-size: 12px letter-spacing: 2px - color: $cl + color: $cl &__title display: block margin-bottom: 10px +fs font-size: 18px - color: $cl + color: $cl +t line-height: 1.33 &__user @@ -1513,14 +1514,14 @@ a.grey-link margin-top: 30px &__btn position: relative - min-width: 300px + min-width: 300px padding: 19px 24px 18px - border-radius: 28px - letter-spacing: 2px + border-radius: 28px + letter-spacing: 2px z-index: 4 &:hover &:before - opacity: 0 + opacity: 0 &:before content: '' position: absolute @@ -1529,9 +1530,9 @@ a.grey-link right: 5px bottom: 5px background: white - border-radius: 24px - transition: opacity .2s - z-index: -2 + border-radius: 24px + transition: opacity .2s + z-index: -2 .partners display: flex @@ -1555,7 +1556,7 @@ a.grey-link display: block position: relative font-size: 13px - user-select: none + user-select: none cursor: pointer &__input position: absolute @@ -1564,7 +1565,7 @@ a.grey-link opacity: 0 &__input:checked + &__content &:after - opacity: 1 + opacity: 1 &__content display: block padding: 3px 0 3px 30px @@ -1613,18 +1614,18 @@ a.grey-link text-align: right &_blue &__content &:after - background: #4A90E2 + background: #4A90E2 &_lesson &__content display: flex padding: 19px 0 19px 50px border-bottom: 1px solid $border font-size: 16px - color: $gray + color: $gray transition: color .2s +t padding: 10px 0 10px 40px flex-wrap: wrap - line-height: 1.33 + line-height: 1.33 &:before, &:after transform: translateY(18px) @@ -1637,7 +1638,7 @@ a.grey-link &_circle &__content &:before, &:after - border-radius: 50% + border-radius: 50% &_lg &__content padding: 0 0 0 30px font-size: 16px @@ -1647,7 +1648,7 @@ a.grey-link .footer padding: 50px 0 30px - background: $bg + background: $bg +t padding: 30px 0 35px &__row @@ -1719,9 +1720,9 @@ a.grey-link max-width: 200px font-size: 18px +t - max-width: 250px + max-width: 250px font-size: 14px - line-height: 1.33 + line-height: 1.33 &__title padding: 20px 0 50px +fb @@ -1730,12 +1731,12 @@ a.grey-link text-transform: uppercase +t padding: 0 0 20px - letter-spacing: 2px + letter-spacing: 2px &__link, &__contact display: table font-size: 14px - color: $cl + color: $cl line-height: (20/14) +t padding: 5px 0 @@ -1757,7 +1758,7 @@ a.grey-link +t display: none &__links &__link - color: #888 + color: #888 &__divider margin: 0 10px @@ -1785,7 +1786,7 @@ a.grey-link &:not(:last-child) margin-right: 20px .icon - &-instagram + &-instagram font-size: 18px &-twitter font-size: 17px @@ -1796,8 +1797,8 @@ a.grey-link .select position: relative - user-select: none - z-index: 4 + user-select: none + z-index: 4 &__head position: relative height: 36px @@ -1807,7 +1808,7 @@ a.grey-link line-height: 36px white-space: nowrap text-overflow: ellipsis - color: $gray + color: $gray cursor: pointer transition: border-color .2s padding-right: 15px @@ -1817,12 +1818,12 @@ a.grey-link position: absolute top: 14px right: 0 - +arr(8,8,$cl,b) + +arr(8,8,$cl,b) &__drop position: absolute left: 0 right: 0 - top: calc(100% + 10px) + top: calc(100% + 10px) padding: 10px 0 background: white box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10) @@ -1845,7 +1846,7 @@ a.grey-link +m padding: 11px 20px font-size: 12px - color: $cl + color: $cl &:hover color: $cl &__option.active @@ -1858,13 +1859,13 @@ a.grey-link left: -10px right: -10px height: 2px - margin-top: 5px + margin-top: -2px background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%) &__title display: table position: relative &.active - z-index: 99 + z-index: 99 &.active &__head border-color: $cl &:after @@ -1873,7 +1874,7 @@ a.grey-link opacity: 1 visibility: visible &.selected &__head - color: $cl + color: $cl .error.info__field--light .select @@ -1905,14 +1906,14 @@ a.grey-link &_gray color: $gray &__link - margin-left: auto + margin-left: auto &__wrap position: relative &__input, &__textarea width: 100% border-bottom: 1px solid $border - background: transparent + background: transparent font-size: 18px transition: border-color .2s &:focus @@ -1930,7 +1931,7 @@ a.grey-link &_bg height: 50px padding: 0 20px - &__textarea + &__textarea display: block height: auto padding: 7px 0 @@ -1963,7 +1964,7 @@ a.grey-link &_info &__input, &_info &__textarea border-color: rgba($border,.2) - color: white + color: white &:focus border-color: white &.error &__input, @@ -1983,7 +1984,7 @@ a.grey-link margin-top: 11px .field__wrap &--title - margin-right: 25px + margin-right: 60px &--additional margin-top: 10px svg.icon-password-eye @@ -2013,14 +2014,14 @@ a.grey-link +fb font-size: 12px letter-spacing: 2px - line-height: 60px - color: $gray + line-height: 60px + color: $gray text-transform: uppercase text-align: center flex: 1 0 50% - transition: border-color .2s, color .2s + transition: border-color .2s, color .2s &.active - border-color: $cl + border-color: $cl color: $cl &__tab display: none @@ -2038,12 +2039,12 @@ a.grey-link font-size: 12px color: $cl text-decoration: underline - line-height: 1.5 + line-height: 1.5 &__foot margin-top: 30px &__btn width: 100% - padding: 18px 24px 17px + padding: 18px 24px 17px &__or padding: 10px 0 font-size: 14px @@ -2063,7 +2064,7 @@ a.grey-link left: 0 right: 0 bottom: 0 - min-width: 360px + min-width: 360px padding: 15px background: rgba($cl,.7) opacity: 0 @@ -2078,12 +2079,12 @@ a.grey-link background: white box-shadow: 0 2px 20px rgba(0,0,0,0.10) border-radius: 3px - transform: scale(.9) + transform: scale(.9) transition: transform .2s &_md - max-width: 620px + max-width: 620px &_lg - max-width: 1000px + max-width: 1000px &__close position: absolute top: -15px @@ -2091,18 +2092,18 @@ a.grey-link padding: 10px background: $cl border-radius: 50% - box-shadow: 0 2px 20px rgba(0,0,0,0.10) + box-shadow: 0 2px 20px rgba(0,0,0,0.10) font-size: 0 .icon font-size: 14px fill: white &.open - display: flex + display: flex &.visible opacity: 1 &.visible &__wrap - transform: scale(1) - + transform: scale(1) + .head display: flex margin-bottom: 50px @@ -2122,7 +2123,7 @@ a.grey-link margin: 0 padding: 0 20px 0 260px flex: 0 0 calc(100% - 220px) - z-index: 4 + z-index: 4 +t margin: 0 0 15px padding: 0 @@ -2133,7 +2134,7 @@ a.grey-link left: calc(50% - 60px) transform: translateY(-50%) z-index: -2 - + .layout display: flex margin: 0 -10px @@ -2171,7 +2172,7 @@ a.grey-link &__pic display: block width: 100% - border-radius: 2px + border-radius: 2px &__wrap flex: 0 0 calc(100% - 95px) &__title @@ -2190,9 +2191,9 @@ a.grey-link margin-bottom: 30px &__item display: flex - max-width: calc(50% - 20px) + max-width: calc(50% - 20px) align-items: center - color: $cl + color: $cl &__arrow margin-right: 15px font-size: 0 @@ -2205,7 +2206,7 @@ a.grey-link font-size: 12px &__title font-size: 18px - line-height: 1.33 + line-height: 1.33 +t font-size: 14px &__title + &__arrow @@ -2247,7 +2248,7 @@ a.grey-link margin-bottom: 60px &__head display: flex - min-height: 40px + min-height: 40px margin-bottom: 30px align-items: center justify-content: space-between @@ -2276,15 +2277,15 @@ a.grey-link background: rgba(black,.3) &__pic display: block - width: 100% + width: 100% &__btn position: absolute top: 50% left: 50% - min-width: 200px - background: transparent + min-width: 200px + background: transparent border: 2px solid white - color: white + color: white transform: translate(-50%,-50%) overflow: hidden &:active @@ -2299,7 +2300,7 @@ a.grey-link +m display: block &__buy - width: 220px + width: 220px margin-left: auto +m width: auto @@ -2313,7 +2314,7 @@ a.grey-link margin-bottom: 25px &__metas &__meta +m - margin-bottom: 20px + margin-bottom: 20px &__actions display: flex margin: 0 -10px 50px @@ -2340,8 +2341,8 @@ a.grey-link padding: 100px 0 110px background-size: cover background-position: 50% 50% - background-repeat: no-repeat - color: white + background-repeat: no-repeat + color: white z-index: 4 +t padding: 60px 0 @@ -2356,7 +2357,7 @@ a.grey-link left: 0 width: 100% height: 100% - background-image: linear-gradient(0deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.64) 100%) + background-image: linear-gradient(0deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.64) 100%) z-index: -2 &:after left: 50% @@ -2367,7 +2368,7 @@ a.grey-link color: white .icon fill: white - + .lessons &__list margin-bottom: 60px @@ -2376,12 +2377,12 @@ a.grey-link &__item position: relative margin-bottom: 40px - transition: box-shadow .2s + transition: box-shadow .2s +m margin-bottom: 30px &__item:hover &__actions opacity: 1 - visibility: visible + visibility: visible &__subtitle margin-bottom: 20px &__row @@ -2389,7 +2390,7 @@ a.grey-link +m display: block &__preview - margin-right: 25px + margin-right: 25px flex: 0 0 140px +m display: none @@ -2405,7 +2406,7 @@ a.grey-link right: 10px opacity: 0 visibility: hidden - transition: opacity .2s, visibility .2s + transition: opacity .2s, visibility .2s &__action margin-left: 10px padding: 10px @@ -2416,7 +2417,7 @@ a.grey-link .icon font-size: 20px fill: #C8C8C8 - transition: fill .2s + transition: fill .2s &__foot text-align: center &__btn @@ -2426,10 +2427,10 @@ a.grey-link padding: 20px &:hover box-shadow: 0 10px 50px 0 rgba(0,0,0,0.06) - border-radius: 10px + border-radius: 10px &_kit &__content flex: 0 0 100% - + .lesson &__subtitle margin-bottom: 10px @@ -2445,7 +2446,7 @@ a.grey-link &__content margin-bottom: 30px color: #191919 - + .materials &__item display: flex @@ -2486,7 +2487,7 @@ a.grey-link &__pic display: block width: 100% - + .questions &__anchor display: block; @@ -2516,7 +2517,7 @@ a.grey-link background: white border-radius: 0 10px 10px 10px +m - padding: 10px + padding: 10px &__ava height: 60px margin-right: 20px @@ -2539,15 +2540,15 @@ a.grey-link width: 100% height: 70px padding: 11px 15px - border-radius: 2px + border-radius: 2px font-size: 16px - resize: vertical + resize: vertical +m height: 64px &__btn display: block margin: 0 auto - border-radius: 20px + border-radius: 20px &__details margin-bottom: 5px &__head, @@ -2562,7 +2563,7 @@ a.grey-link margin-bottom: 5px &__action, &__date - color: $gray + color: $gray &__author margin-right: 15px &__date @@ -2592,7 +2593,7 @@ a.grey-link span:first-child display: none; &_sm &__title - margin-bottom: 15px + margin-bottom: 15px &_sm &__item &:not(:last-child) margin-right: 10px @@ -2628,7 +2629,7 @@ a.grey-link +m flex: 0 0 100% &__head_main - padding-top: 25px + padding-top: 25px +t padding-top: 21px &__label @@ -2659,7 +2660,7 @@ a.grey-link &__wrap padding: 20px 30px 30px background: white - border-radius: 6px + border-radius: 6px +t padding: 15px 20px 20px &__title @@ -2681,7 +2682,7 @@ a.grey-link display: flex margin: 30px -30px -10px padding: 20px 30px 0 - border-top: 1px solid $border + border-top: 1px solid $border +fb font-size: 16px +t @@ -2723,7 +2724,7 @@ a.grey-link padding: 0 &__btn padding: 10px 15px - background: transparent + background: transparent border: 1px solid $gray color: $gray &_edit @@ -2756,12 +2757,12 @@ a.grey-link +fb font-size: 24px letter-spacing: 0 - text-transform: none + text-transform: none &__share margin-bottom: 35px &__content max-width: 760px - margin: 0 auto + margin: 0 auto &__foot display: none margin-top: 30px @@ -2781,7 +2782,7 @@ a.grey-link margin: 0 -15px 30px &__btn height: 56px - border-bottom: 1px solid $border + border-bottom: 1px solid $border +fb font-size: 12px color: $gray @@ -2794,7 +2795,7 @@ a.grey-link +m margin: 0 &:hover - color: $cl + color: $cl &.active border-color: $cl color: $cl @@ -2811,11 +2812,11 @@ a.grey-link margin-right: 30px &.active +fb - color: $cl - + color: $cl + .confirm &__title - margin-bottom: 20px + margin-bottom: 20px font-size: 24px &__form display: flex @@ -2830,7 +2831,7 @@ a.grey-link &__field +m margin-bottom: 20px - + .form position: relative &__ava @@ -2841,7 +2842,7 @@ a.grey-link +t position: relative left: 0 - margin-bottom: 40px + margin-bottom: 40px &__group position: relative margin-bottom: 40px @@ -2923,8 +2924,8 @@ a.grey-link margin-top: 40px &__btn width: 100% - max-width: 300px - + max-width: 300px + .author &__row display: flex @@ -2950,38 +2951,38 @@ a.grey-link font-size: 12px letter-spacing: 2px +m - margin-bottom: 10px + margin-bottom: 10px &__name font-size: 10px letter-spacing: 1.66px &__content - margin-bottom: 30px + margin-bottom: 30px +m margin-bottom: 10px .upload position: relative font-size: 18px - color: $blue + color: $blue overflow: hidden &__file position: absolute top: 0 right: 0 - opacity: 0 + opacity: 0 cursor: pointer .info display: flex - background: $bg + background: $bg +m display: block margin-top: 60px &__section display: flex position: relative - background-position: 50% 50% - background-size: cover + background-position: 50% 50% + background-size: cover flex: 0 0 calc(50% + 169px) justify-content: flex-end z-index: 4 @@ -3005,7 +3006,7 @@ a.grey-link flex-grow: 1 +t width: 100% - max-width: 100% + max-width: 100% padding: 30px 15px 50px &__head display: flex @@ -3030,7 +3031,7 @@ a.grey-link &__upload margin-left: auto font-size: 16px - color: rgba(white,.7) + color: rgba(white,.7) &__foot display: flex margin-top: auto @@ -3041,11 +3042,11 @@ a.grey-link flex: 0 0 140px flex-grow: 1 &__wrap - max-width: 349px + max-width: 349px height: 550px padding: 30px 40px 30px 30px +t - max-width: 100% + max-width: 100% height: auto padding: 30px 15px 30px &__wrap @@ -3073,7 +3074,7 @@ a.grey-link margin-right: 10px padding: 19px border: 1px solid $border - border-radius: 50% + border-radius: 50% .icon font-size: 20px fill: #B5B5B5 @@ -3174,7 +3175,7 @@ a.grey-link top: 0 right: 0 font-size: 100px - opacity: 0 + opacity: 0 cursor: pointer &__fieldset flex: 0 0 calc(100% - 160px) @@ -3206,14 +3207,14 @@ a.grey-link .editor position: relative - + .fontstyle position: absolute top: -40px left: 40px padding: 0 15px background: $cl - border-radius: 35px + border-radius: 35px font-size: 0 white-space: nowrap &__regular, @@ -3222,12 +3223,12 @@ a.grey-link width: 28px height: 35px font-size: 16px - color: white + color: white &__bold +fb &__italic font-style: italic - + .ui-datepicker display: none width: 240px @@ -3235,7 +3236,7 @@ a.grey-link padding: 5px background: white box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10) - z-index: 99!important + z-index: 99!important &-header display: flex margin-bottom: 5px @@ -3251,11 +3252,11 @@ a.grey-link width: 10px height: 10px border: solid $border - border-width: 2px 2px 0 0 + border-width: 2px 2px 0 0 &-prev order: 1 &:before - transform: rotate(-135deg) + transform: rotate(-135deg) &-title text-align: center order: 2 @@ -3278,12 +3279,12 @@ a.grey-link display: block padding: 7px color: #8C8C8C - transition: color .2s + transition: color .2s &:hover - color: $cl + color: $cl &.ui-state-active - background: $bg - color: $pink + background: $bg + color: $pink .form__common-error margin-top: 15px @@ -3304,7 +3305,7 @@ a.grey-link background: $pink &_info background: $green - + .mobile-hide +m @@ -3317,14 +3318,14 @@ a.grey-link height: 40px padding: 0 10px border: 1px solid $border - border-radius: 3px 0 0 3px + border-radius: 3px 0 0 3px font-size: 18px transition: border-color .2s &:focus border-color: $cl flex: 0 0 calc(100% - 100px) &__btn - border-radius: 0 3px 3px 0 + border-radius: 0 3px 3px 0 flex: 0 0 100px a diff --git a/web/src/sass/components/notification.scss b/web/src/sass/components/notification.scss new file mode 100644 index 00000000..38773913 --- /dev/null +++ b/web/src/sass/components/notification.scss @@ -0,0 +1,33 @@ +.notification { + min-width: 380px; + box-sizing: border-box; + border-radius: 4px; + border-width: 1px; + border-style: solid; + border-color: #ebeef5; + position: fixed; + left: 50%; + top: 20px; + transform: translateX(-50%); + background-color: #edf2fc; + transition: opacity 0.3s, transform .4s; + overflow: hidden; + padding: 15px 15px 15px 20px; + display: flex; + align-items: center; + z-index: 1000; + + &--success { + background: #53CF86; + color: #fff; + border: none; + box-shadow: 0 4px 15px rgba(0, 196, 83, 0.31); + } + + &--error { + background: #D12424; + color: #fff; + border: none; + box-shadow: 0 4px 15px rgba(255, 36, 36, 0.51); + } +} diff --git a/web/src/sass/generated/_sprite-svg.scss b/web/src/sass/generated/_sprite-svg.scss index 88817d5d..729565d4 100755 --- a/web/src/sass/generated/_sprite-svg.scss +++ b/web/src/sass/generated/_sprite-svg.scss @@ -53,6 +53,11 @@ height: 1em; fill: #1C2635; } +.icon-hamburger { + width: 1.25em; + height: 1em; + fill: #C8C8C8; +} .icon-image-text { width: 2.07em; height: 1em; diff --git a/web/src/templates/partials/_header.pug b/web/src/templates/partials/_header.pug index 569cfa92..67422350 100755 --- a/web/src/templates/partials/_header.pug +++ b/web/src/templates/partials/_header.pug @@ -65,7 +65,7 @@ else a.header__link(href='#') div.header__title Контакты .header__group - a.header__section.header__section_sub.js-header-section(href='#') ВИДЕО-КУРСЫ + a.header__section.header__section_sub.js-header-section(href='#') ВИДЕОКУРСЫ .header__list.js-header-list a.header__link(href='#') .header__title ПЕРСОНАЖ diff --git a/web/src/templates/partials/_popups.pug b/web/src/templates/partials/_popups.pug index 743ad542..3fe4f9af 100755 --- a/web/src/templates/partials/_popups.pug +++ b/web/src/templates/partials/_popups.pug @@ -71,7 +71,7 @@ .buy__row .buy__col .buy__head.buy__head_main - .buy__title Выбор урока/дня + .buy__title Выбор курса/дня .buy__content При записи на 5 уроков скидка 10%. .buy__col .buy__head