From c23b9fcb777b9022f84c3d874a6f535e521dbdac Mon Sep 17 00:00:00 2001 From: nikita Date: Fri, 9 Mar 2018 23:01:30 +0300 Subject: [PATCH 01/24] Longread layout fixes --- .../templates/course/content/gallery.html | 30 ++++++++++++++----- .../templates/course/content/image.html | 14 +++++---- .../templates/course/content/imagetext.html | 22 ++++++++------ .../course/templates/course/content/text.html | 12 +++++--- .../templates/course/content/video.html | 28 +++++++++-------- apps/course/templates/course/course.html | 8 ++--- apps/course/templates/course/lesson.html | 8 ++--- .../templates/user/notification-settings.html | 2 +- apps/user/templates/user/payment-history.html | 2 +- .../user/templates/user/profile-settings.html | 2 +- project/templates/lilcity/main.html | 2 +- web/src/components/CourseRedactor.vue | 2 +- 12 files changed, 80 insertions(+), 52 deletions(-) diff --git a/apps/course/templates/course/content/gallery.html b/apps/course/templates/course/content/gallery.html index 771df8b6..5cae9613 100644 --- a/apps/course/templates/course/content/gallery.html +++ b/apps/course/templates/course/content/gallery.html @@ -8,12 +8,28 @@ {% endfor %} {% else %} -
{{ content.title }}
-
- {% for image in content.gallery_images.all %} -
- +
+
+
{{ content.title }}
+
+ {% for image in content.gallery_images.all %} +
+ +
+ {% endfor %} +
- {% endfor %} +
+{% endif %} + + + \ No newline at end of file diff --git a/apps/course/templates/course/content/image.html b/apps/course/templates/course/content/image.html index 5daeba4e..9a5e5e7a 100644 --- a/apps/course/templates/course/content/image.html +++ b/apps/course/templates/course/content/image.html @@ -1,6 +1,10 @@ -
- {{ content.title }} -
-
- +
+
+
+ {{ content.title }} +
+
+ +
+
\ No newline at end of file diff --git a/apps/course/templates/course/content/imagetext.html b/apps/course/templates/course/content/imagetext.html index 9849e357..9e59062c 100644 --- a/apps/course/templates/course/content/imagetext.html +++ b/apps/course/templates/course/content/imagetext.html @@ -1,9 +1,13 @@ -
- {{ content.title }} -
-
- {{ content.txt | safe }} -
-
- -
\ No newline at end of file +
+
+
{{ content.title }}
+ +
+
+
+
{{ content.txt | safe }}
+
+
+ +
+
\ No newline at end of file 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 5f7a00c8..4606e9b0 100644 --- a/apps/course/templates/course/course.html +++ b/apps/course/templates/course/course.html @@ -239,13 +239,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 %}
@@ -303,7 +301,7 @@
{% endcomment %} {% endif %} -{% if course.gallery %} +{% if False %}
{% include "course/content/gallery.html" with results=True %} diff --git a/apps/course/templates/course/lesson.html b/apps/course/templates/course/lesson.html index 9286f106..f2427d05 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/user/templates/user/notification-settings.html b/apps/user/templates/user/notification-settings.html index e15996e5..d66e7df2 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 68d41375..0b830d91 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/templates/lilcity/main.html b/project/templates/lilcity/main.html index 817a23f6..b92772e8 100644 --- a/project/templates/lilcity/main.html +++ b/project/templates/lilcity/main.html @@ -13,7 +13,7 @@ {% endif %} class="main__btn btn" href="#" - >КУПИТЬ ДОСТУП ОТ 2000р. в мес. + >КУПИТЬ ДОСТУП ОТ 500р. в мес.
{% if messages %} diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index 0f94eb3e..20bc474d 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -549,7 +549,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 = slugify(courseObject.url); api.saveCourse(courseObject, this.accessToken) From cf32370b6df02e637dc48d15d1eec1664e3fef8c Mon Sep 17 00:00:00 2001 From: Vitaly Baev Date: Thu, 29 Mar 2018 10:26:58 +0300 Subject: [PATCH 02/24] LIL-227 LIL-296 LIL-297 --- web/build/img/sprite.svg | 7 + web/package.json | 3 + web/src/components/CourseRedactor.vue | 116 ++++-- web/src/components/blocks/BlockAdd.vue | 5 +- web/src/components/blocks/BlockText.vue | 7 +- web/src/icons/hamburger.svg | 18 + web/src/js/app.js | 1 + web/src/js/modules/api.js | 13 +- web/src/js/modules/notification.js | 14 + web/src/sass/_common.sass | 472 +++++++++++----------- web/src/sass/components/notification.scss | 33 ++ web/src/sass/generated/_sprite-svg.scss | 5 + 12 files changed, 423 insertions(+), 271 deletions(-) create mode 100644 web/src/icons/hamburger.svg create mode 100644 web/src/js/modules/notification.js create mode 100644 web/src/sass/components/notification.scss 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/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..a9580dbd 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -139,7 +139,7 @@
-
- - - - +
+ - -
+ + + + +
+ @@ -257,6 +259,11 @@ 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", @@ -422,9 +429,21 @@ }, editLesson(lessonIndex) { this.currentLesson = this.lessons[lessonIndex]; + if (this.viewSection !== 'lessons-edit') { + history.push("/course/create/lessons/new"); + } 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() { @@ -434,6 +453,9 @@ 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); }, @@ -515,6 +537,7 @@ onCoursePublish() { this.showErrors = true; if (this.$v.$invalid) { + showNotification("error", "Заполните все необходимые поля"); return; } const publishButton = $('#course-redactor__publish-button'); @@ -583,6 +606,17 @@ } }, mounted() { + // Listen for changes to the current location. + this.unlisten = history.listen((location, 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'; + } + }); + api.getCategories(this.accessToken) .then((response) => { if (response.data) { @@ -677,6 +711,9 @@ return `https://lil.city/course/${suffix}`; }, }, + beforeDestroy() { + this.unlisten(); + }, watch: { 'course': { handler: function (newValue, oldValue) { @@ -707,6 +744,7 @@ 'block-images': BlockImages, 'block-video': BlockVideo, 'lesson-redactor': LessonRedactor, + 'vue-draggable': Draggable, } } @@ -776,4 +814,18 @@ 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; + } + } + } + + diff --git a/web/src/components/blocks/BlockAdd.vue b/web/src/components/blocks/BlockAdd.vue index 7c06a641..0090a8df 100644 --- a/web/src/components/blocks/BlockAdd.vue +++ b/web/src/components/blocks/BlockAdd.vue @@ -51,6 +51,8 @@ \ 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..ad06b7bf 100644 --- a/web/src/js/modules/api.js +++ b/web/src/js/modules/api.js @@ -81,8 +81,10 @@ export const api = { if (block.type === 'text') { return { 'type': 'text', + 'uuid': block.uuid, 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'txt': block.data.text, @@ -93,6 +95,7 @@ export const api = { 'type': 'image', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.data.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -103,6 +106,7 @@ export const api = { 'type': 'image-text', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.data.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -114,6 +118,7 @@ export const api = { 'type': 'images', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.data.uuid, 'position': ++index, 'title': block.data.title, 'images': block.data.images.map((galleryImage) => { @@ -129,6 +134,7 @@ export const api = { 'type': 'video', 'data': { 'id': block.data.id ? block.data.id : null, + 'uuid': block.data.uuid, 'position': ++index, 'title': block.data.title, 'url': block.data.video_url, @@ -271,6 +277,7 @@ export const api = { 'type': 'text', 'data': { 'id': contentItem.id ? contentItem.id : null, + 'uuid': contentItem.uuid, 'title': contentItem.title, 'text': contentItem.txt, } @@ -280,6 +287,7 @@ export const api = { 'type': 'image', 'data': { 'id': contentItem.id ? contentItem.id : null, + 'uuid': contentItem.uuid, 'title': contentItem.title, 'image_id': contentItem.img.id, 'image_url': contentItem.img.image, @@ -290,6 +298,7 @@ export const api = { 'type': 'image-text', 'data': { 'id': contentItem.id ? contentItem.id : null, + 'uuid': contentItem.uuid, 'title': contentItem.title, 'image_id': contentItem.img.id, 'image_url': contentItem.img.image, @@ -301,6 +310,7 @@ export const api = { 'type': 'images', 'data': { 'id': contentItem.id ? contentItem.id : null, + 'uuid': contentItem.uuid, 'title': contentItem.title, 'images': contentItem.gallery_images.map((galleryImage) => { return { @@ -316,6 +326,7 @@ export const api = { 'type': 'video', 'data': { 'id': contentItem.id ? contentItem.id : null, + 'uuid': contentItem.uuid, 'title': contentItem.title, 'video_url': contentItem.url, } @@ -407,4 +418,4 @@ export const api = { } }); } -}; \ No newline at end of file +}; 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..a6bf777f 100755 --- a/web/src/sass/_common.sass +++ b/web/src/sass/_common.sass @@ -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 @@ -835,7 +835,7 @@ a[name] align-items: center &__ava height: 40px - margin-right: 10px + margin-right: 10px flex: 0 0 40px &__ava height: 40px @@ -863,7 +863,7 @@ a[name] font-size: 15px &_white &__date - color: white + color: white .video display: block @@ -886,9 +886,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 +929,7 @@ a[name] +t max-width: calc(100% - 55px) +m - max-width: 100% + max-width: 100% &__more text-align: center +t @@ -940,10 +940,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 +962,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 +982,7 @@ a[name] +t margin-bottom: 65px +m - max-width: 80% + max-width: 80% margin-bottom: 40px &__action +fb @@ -1002,7 +1002,7 @@ a[name] text-align: center flex-wrap: wrap justify-content: center - z-index: 4 + z-index: 4 +t margin: 0 +m @@ -1035,17 +1035,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 +1064,7 @@ a[name] margin-bottom: 40px &__ava height: 60px - margin-right: 20px + margin-right: 20px flex: 0 0 60px +t height: 45px @@ -1081,7 +1081,7 @@ a[name] &__name +fb font-size: 15px - line-height: 1.33 + line-height: 1.33 .gallery display: flex @@ -1117,11 +1117,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 +1145,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 +1202,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 +1226,7 @@ a.grey-link &__wrap max-width: 375px +t - max-width: 220px + max-width: 220px +m max-width: 180px &__theme @@ -1244,28 +1244,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 +1300,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 +1379,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 +1389,7 @@ a.grey-link display: block position: relative margin-bottom: 15px - color: $cl + color: $cl +t margin-bottom: 10px &__preview:hover &__view @@ -1408,13 +1408,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 +1423,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 +1439,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 +1455,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 +1464,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 +1513,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 +1529,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 +1555,7 @@ a.grey-link display: block position: relative font-size: 13px - user-select: none + user-select: none cursor: pointer &__input position: absolute @@ -1564,7 +1564,7 @@ a.grey-link opacity: 0 &__input:checked + &__content &:after - opacity: 1 + opacity: 1 &__content display: block padding: 3px 0 3px 30px @@ -1613,18 +1613,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 +1637,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 +1647,7 @@ a.grey-link .footer padding: 50px 0 30px - background: $bg + background: $bg +t padding: 30px 0 35px &__row @@ -1719,9 +1719,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 +1730,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 +1757,7 @@ a.grey-link +t display: none &__links &__link - color: #888 + color: #888 &__divider margin: 0 10px @@ -1785,7 +1785,7 @@ a.grey-link &:not(:last-child) margin-right: 20px .icon - &-instagram + &-instagram font-size: 18px &-twitter font-size: 17px @@ -1796,8 +1796,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 +1807,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 +1817,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 +1845,7 @@ a.grey-link +m padding: 11px 20px font-size: 12px - color: $cl + color: $cl &:hover color: $cl &__option.active @@ -1864,7 +1864,7 @@ a.grey-link display: table position: relative &.active - z-index: 99 + z-index: 99 &.active &__head border-color: $cl &:after @@ -1873,7 +1873,7 @@ a.grey-link opacity: 1 visibility: visible &.selected &__head - color: $cl + color: $cl .error.info__field--light .select @@ -1905,14 +1905,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 +1930,7 @@ a.grey-link &_bg height: 50px padding: 0 20px - &__textarea + &__textarea display: block height: auto padding: 7px 0 @@ -1963,7 +1963,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 +1983,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 +2013,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 +2038,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 +2063,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 +2078,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 +2091,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 +2122,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 +2133,7 @@ a.grey-link left: calc(50% - 60px) transform: translateY(-50%) z-index: -2 - + .layout display: flex margin: 0 -10px @@ -2171,7 +2171,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 +2190,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 +2205,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 +2247,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 +2276,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 +2299,7 @@ a.grey-link +m display: block &__buy - width: 220px + width: 220px margin-left: auto +m width: auto @@ -2313,7 +2313,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 +2340,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 +2356,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 +2367,7 @@ a.grey-link color: white .icon fill: white - + .lessons &__list margin-bottom: 60px @@ -2376,12 +2376,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 +2389,7 @@ a.grey-link +m display: block &__preview - margin-right: 25px + margin-right: 25px flex: 0 0 140px +m display: none @@ -2405,7 +2405,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 +2416,7 @@ a.grey-link .icon font-size: 20px fill: #C8C8C8 - transition: fill .2s + transition: fill .2s &__foot text-align: center &__btn @@ -2426,10 +2426,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 +2445,7 @@ a.grey-link &__content margin-bottom: 30px color: #191919 - + .materials &__item display: flex @@ -2486,7 +2486,7 @@ a.grey-link &__pic display: block width: 100% - + .questions &__anchor display: block; @@ -2516,7 +2516,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 +2539,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 +2562,7 @@ a.grey-link margin-bottom: 5px &__action, &__date - color: $gray + color: $gray &__author margin-right: 15px &__date @@ -2592,7 +2592,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 +2628,7 @@ a.grey-link +m flex: 0 0 100% &__head_main - padding-top: 25px + padding-top: 25px +t padding-top: 21px &__label @@ -2659,7 +2659,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 +2681,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 +2723,7 @@ a.grey-link padding: 0 &__btn padding: 10px 15px - background: transparent + background: transparent border: 1px solid $gray color: $gray &_edit @@ -2756,12 +2756,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 +2781,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 +2794,7 @@ a.grey-link +m margin: 0 &:hover - color: $cl + color: $cl &.active border-color: $cl color: $cl @@ -2811,11 +2811,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 +2830,7 @@ a.grey-link &__field +m margin-bottom: 20px - + .form position: relative &__ava @@ -2841,7 +2841,7 @@ a.grey-link +t position: relative left: 0 - margin-bottom: 40px + margin-bottom: 40px &__group position: relative margin-bottom: 40px @@ -2923,8 +2923,8 @@ a.grey-link margin-top: 40px &__btn width: 100% - max-width: 300px - + max-width: 300px + .author &__row display: flex @@ -2950,38 +2950,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 +3005,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 +3030,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 +3041,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 +3073,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 +3174,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 +3206,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 +3222,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 +3235,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 +3251,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 +3278,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 +3304,7 @@ a.grey-link background: $pink &_info background: $green - + .mobile-hide +m @@ -3317,14 +3317,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; From 3944615195e7adfcb064edd8da9a3e47e49dddef Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 12:52:40 +0300 Subject: [PATCH 03/24] fix comments --- api/v1/views.py | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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): From 8157102c145a96086ada4879d6c31fe0de21f6d8 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 13:13:39 +0300 Subject: [PATCH 04/24] fix footer year --- project/templates/lilcity/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html index dbdbcfe2..4e3c17e2 100644 --- a/project/templates/lilcity/index.html +++ b/project/templates/lilcity/index.html @@ -248,7 +248,7 @@
-
2017 © Lil City, UAB.
+
{% now "Y" %} © Lil City, UAB.
Договор-оферта
|
From e8784cc7905f9384b0c74d803d6cffe04c917eb4 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 13:26:11 +0300 Subject: [PATCH 05/24] fix self course buy --- apps/payment/views.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, From 1db3d02d63fe9abbb49139faa492774f9f6a98c2 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 13:46:40 +0300 Subject: [PATCH 06/24] status markers --- apps/course/templates/course/_items.html | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 %}
From b37b14ea5d0795d45f46bc12448ccbe75743a1c9 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 14:27:40 +0300 Subject: [PATCH 07/24] fix price --- web/src/components/CourseRedactor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index a9580dbd..fde01f6e 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -663,7 +663,7 @@ }, displayPrice: { get: function () { - return this.course.is_paid ? this.course.price : 0; + return this.course.is_paid ? parseFloat(this.course.price) : 0; }, set: function (value) { this.course.price = value; From 1236fb58a73fee175b4ede7ea184503eb4ccf1b8 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 15:40:41 +0300 Subject: [PATCH 08/24] avatar fit --- web/src/sass/_common.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass index a6bf777f..d0e84a37 100755 --- a/web/src/sass/_common.sass +++ b/web/src/sass/_common.sass @@ -780,6 +780,7 @@ a[name] width: 100% height: 100% border-radius: 50% + object-fit: cover &__input position: absolute top: 0 From b7fe703a4b279ddad4925ca33a3115f14670d5d6 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 16:23:57 +0300 Subject: [PATCH 09/24] revert link strikethrough --- web/src/sass/_common.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass index d0e84a37..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 @@ -1859,7 +1859,7 @@ 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 From c21643cb00d66f66c5e967d383f13489bea5207c Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 17:00:54 +0300 Subject: [PATCH 10/24] comments reply fix --- apps/course/templates/course/blocks/comment.html | 2 +- web/src/js/modules/comments.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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); } From 15a58f77a2a33e630236943d2f1ca2ce93749d07 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 17:34:27 +0300 Subject: [PATCH 11/24] grammar nazi fixes, category filter --- project/templates/lilcity/edit_index.html | 2 +- project/templates/lilcity/index.html | 4 ++-- web/build/index.html | 4 ++-- web/build/ui-kit.html | 4 ++-- web/src/js/modules/courses.js | 2 +- web/src/templates/partials/_header.pug | 2 +- web/src/templates/partials/_popups.pug | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html index 0c2fc067..6f4dd487 100644 --- a/project/templates/lilcity/edit_index.html +++ b/project/templates/lilcity/edit_index.html @@ -278,7 +278,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
При записи на 5 уроков скидка 10%.
diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html index 4e3c17e2..a39fb3b8 100644 --- a/project/templates/lilcity/index.html +++ b/project/templates/lilcity/index.html @@ -131,7 +131,7 @@ {% endcomment %}
-
ВИДЕО-КУРСЫ +
ВИДЕОКУРСЫ
{% category_menu_items category %}
@@ -439,7 +439,7 @@
-
Выбор урока/дня
+
Выбор курса/дня
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/src/js/modules/courses.js b/web/src/js/modules/courses.js index 90ffeb97..49892540 100644 --- a/web/src/js/modules/courses.js +++ b/web/src/js/modules/courses.js @@ -31,7 +31,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/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 From 7cf0f4fd8607651ee555ea2565bae11183c99361 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 18:26:46 +0300 Subject: [PATCH 12/24] fix delayed courses countdown, some other fixes --- apps/course/templates/course/course.html | 2 +- project/templates/lilcity/edit_index.html | 4 ++ web/src/js/modules/courses.js | 2 + web/src/js/modules/mixpanel.js | 54 ++++++++++++----------- 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/apps/course/templates/course/course.html b/apps/course/templates/course/course.html index 0a3c2ce4..48105a1f 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 %} diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html index 6f4dd487..b5e79164 100644 --- a/project/templates/lilcity/edit_index.html +++ b/project/templates/lilcity/edit_index.html @@ -345,6 +345,10 @@
+ {% block foot %}{% endblock foot %} diff --git a/web/src/js/modules/courses.js b/web/src/js/modules/courses.js index 49892540..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); 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; + } + ); + }); + } }); From 42e33cd63478e5b14703fa93befd04241536bb03 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Mon, 2 Apr 2018 19:27:45 +0300 Subject: [PATCH 13/24] course NaN fix --- web/src/components/CourseRedactor.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index fde01f6e..c46fb75e 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -602,7 +602,7 @@ this.courseSyncHook = false; this.courseSaving = false; }); - }, 2000); + }, 3000); } }, mounted() { @@ -663,10 +663,10 @@ }, displayPrice: { get: function () { - return this.course.is_paid ? parseFloat(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: { From 5943f95fbc881a47991dfbaafd5722b475eba367 Mon Sep 17 00:00:00 2001 From: Sanasol Date: Tue, 3 Apr 2018 13:25:11 +0300 Subject: [PATCH 14/24] uuid save --- api/v1/serializers/course.py | 10 ++++++++++ api/v1/serializers/mixins.py | 10 ++++++++++ 2 files changed, 20 insertions(+) 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 71dd2029..cb19fafc 100644 --- a/api/v1/serializers/mixins.py +++ b/api/v1/serializers/mixins.py @@ -21,6 +21,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( @@ -28,6 +29,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']: @@ -36,6 +38,7 @@ class DispatchContentMixin(object): image.title = cdata['title'] image.course = course image.img = ImageObject.objects.get(id=cdata['img']) + image.uuid = cdata['uuid'] image.save() else: image = Image.objects.create( @@ -43,6 +46,7 @@ class DispatchContentMixin(object): title=cdata['title'], course=course, img=ImageObject.objects.get(id=cdata['img']), + uuid=cdata['uuid'], ) elif ctype == 'image-text': if 'id' in cdata and cdata['id']: @@ -52,6 +56,7 @@ class DispatchContentMixin(object): it.course = course it.img = ImageObject.objects.get(id=cdata['img']) it.txt = cdata['txt'] + it.uuid = cdata['uuid'] it.save() else: it = ImageText.objects.create( @@ -60,6 +65,7 @@ class DispatchContentMixin(object): course=course, img=ImageObject.objects.get(id=cdata['img']), txt=cdata['txt'], + uuid=cdata['uuid'], ) elif ctype == 'video': if 'id' in cdata and cdata['id']: @@ -68,6 +74,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( @@ -75,6 +82,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']: @@ -82,6 +90,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']: @@ -99,6 +108,7 @@ class DispatchContentMixin(object): course=course, position=cdata['position'], title=cdata['title'], + uuid=cdata['uuid'], ) if 'images' in cdata: for image in cdata['images']: From 2d60ef694e00c4f8f950892e281b394e9f8ce09c Mon Sep 17 00:00:00 2001 From: Sanasol Date: Tue, 3 Apr 2018 14:21:17 +0300 Subject: [PATCH 15/24] Email copyright year --- apps/notification/templates/notification/email/_base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From 176721b654bc46ed0373f668994442637cab194f Mon Sep 17 00:00:00 2001 From: Sanasol Date: Wed, 4 Apr 2018 12:47:52 +0300 Subject: [PATCH 16/24] create live route --- apps/course/templates/course/course_edit.html | 10 +++++-- apps/course/views.py | 26 +++++++++++++++++++ project/urls.py | 3 ++- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/apps/course/templates/course/course_edit.html b/apps/course/templates/course/course_edit.html index 5858e4c3..ddc6a285 100644 --- a/apps/course/templates/course/course_edit.html +++ b/apps/course/templates/course/course_edit.html @@ -1,8 +1,14 @@ {% 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 %} - diff --git a/apps/course/views.py b/apps/course/views.py index 42235e27..a7fb0abe 100644 --- a/apps/course/views.py +++ b/apps/course/views.py @@ -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/project/urls.py b/project/urls.py index bdcfc266..f1d97216 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,7 @@ 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/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'), From 024fc0faff313fcc4d2366ff0d3bb270d211cc43 Mon Sep 17 00:00:00 2001 From: Vitaly Baev Date: Wed, 4 Apr 2018 17:20:57 +0300 Subject: [PATCH 17/24] =?UTF-8?q?=D0=98=D1=81=D0=BF=D0=BE=D0=BB=D1=8C?= =?UTF-8?q?=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20UUID=20=D0=B1?= =?UTF-8?q?=D0=BB=D0=BE=D0=BA=D0=BE=D0=B2=20=D0=BD=D0=B0=20=D1=84=D1=80?= =?UTF-8?q?=D0=BE=D0=BD=D1=82=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/CourseRedactor.vue | 12 +++++++++++- web/src/js/modules/api.js | 19 +++++++++---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index c46fb75e..70af28fe 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -590,7 +590,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; } diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js index ad06b7bf..51f967be 100644 --- a/web/src/js/modules/api.js +++ b/web/src/js/modules/api.js @@ -81,7 +81,6 @@ export const api = { if (block.type === 'text') { return { 'type': 'text', - 'uuid': block.uuid, 'data': { 'id': block.data.id ? block.data.id : null, 'uuid': block.uuid, @@ -95,7 +94,7 @@ export const api = { 'type': 'image', 'data': { 'id': block.data.id ? block.data.id : null, - 'uuid': block.data.uuid, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -106,7 +105,7 @@ export const api = { 'type': 'image-text', 'data': { 'id': block.data.id ? block.data.id : null, - 'uuid': block.data.uuid, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'img': block.data.image_id, @@ -118,7 +117,7 @@ export const api = { 'type': 'images', 'data': { 'id': block.data.id ? block.data.id : null, - 'uuid': block.data.uuid, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'images': block.data.images.map((galleryImage) => { @@ -134,7 +133,7 @@ export const api = { 'type': 'video', 'data': { 'id': block.data.id ? block.data.id : null, - 'uuid': block.data.uuid, + 'uuid': block.uuid, 'position': ++index, 'title': block.data.title, 'url': block.data.video_url, @@ -275,9 +274,9 @@ export const api = { if (contentItem.type === 'text') { return { 'type': 'text', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, - 'uuid': contentItem.uuid, 'title': contentItem.title, 'text': contentItem.txt, } @@ -285,9 +284,9 @@ export const api = { } else if (contentItem.type === 'image') { return { 'type': 'image', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, - 'uuid': contentItem.uuid, 'title': contentItem.title, 'image_id': contentItem.img.id, 'image_url': contentItem.img.image, @@ -296,9 +295,9 @@ export const api = { } else if (contentItem.type === 'image-text') { return { 'type': 'image-text', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, - 'uuid': contentItem.uuid, 'title': contentItem.title, 'image_id': contentItem.img.id, 'image_url': contentItem.img.image, @@ -308,9 +307,9 @@ export const api = { } else if (contentItem.type === 'images') { return { 'type': 'images', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, - 'uuid': contentItem.uuid, 'title': contentItem.title, 'images': contentItem.gallery_images.map((galleryImage) => { return { @@ -324,9 +323,9 @@ export const api = { } else if (contentItem.type === 'video') { return { 'type': 'video', + 'uuid': contentItem.uuid, 'data': { 'id': contentItem.id ? contentItem.id : null, - 'uuid': contentItem.uuid, 'title': contentItem.title, 'video_url': contentItem.url, } From 521b6833882568533c14aaacb6d228d51574711c Mon Sep 17 00:00:00 2001 From: Sanasol Date: Wed, 4 Apr 2018 20:05:25 +0300 Subject: [PATCH 18/24] live template changes --- web/src/components/CourseRedactor.vue | 32 ++++++++++++++++++----- web/src/components/blocks/BlockImages.vue | 8 +++--- web/src/js/modules/api.js | 1 + 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index 70af28fe..54c78d5b 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -36,7 +36,7 @@ -
+
КАТЕГОРИЯ
@@ -72,7 +72,15 @@
{{ courseFullUrl }}
-
+ +
+
ССЫЛКА НА VIMEO
+
+ +
+
+ +
ДОСТУП
-
-
+
ЗАПУСК
@@ -135,8 +143,14 @@ v-model="course.short_description">
+
-
+