Merge branch 'gzbender' into 'master'

Gzbender

See merge request lilcity/backend!52

apps/course/templates/course/content/imagetext.html

@@ -4,7 +4,11 @@
 
     <div class="lessons__item">
       <div class="lessons__row">
-        <div class="lessons__preview"><img class="lessons__pic" style="display: block;border-radius:50%;width:130px;height: 130px" src="{{ content.img.image.url }}"></div>
+        <div class="lessons__preview">
+          <div class="lessons__pic-wrapper">
+            <img class="lessons__pic" src="{{ content.img.image.url }}">
+          </div>
+        </div>
         <div class="lessons__content">{{ content.txt | safe }}</div>
       </div>
     </div>

apps/course/templates/course/course.html

@@ -9,7 +9,7 @@
 {% block ogtitle %}{{ course.title }} - {{ block.super }}{% endblock ogtitle %}
 {% block ogurl %}{{ request.build_absolute_uri }}{% endblock ogurl %}
 {% if course.cover and course.cover.image %}
-{% block ogimage %}http://{{request.META.HTTP_HOST}}{{ course.cover.image.url }}{% endblock ogimage %}
+{% block ogimage %}http://{{request.META.HTTP_HOST}}{% if course.cover %}{{ course.cover.image.url }}{% else %}{% static 'img/og_courses.jpg' %}{% endif %}{% endblock ogimage %}
 {% endif %}
 {% block ogdescription %}{{ course.short_description }}{% endblock ogdescription %}
 
@@ -141,37 +141,45 @@
       <div class="course__actions">
         <a href="{% url 'course' course.id %}" class="course__action btn btn_lg{% if not only_lessons %} btn_stroke{% else %} btn_gray{% endif %}">Описание курса</a>
         {% if request.user.is_authenticated %}
-        {% if course.author == request.user and request.user.role >= request.user.AUTHOR_ROLE %}
-        <a
-          href="{% url 'course-only-lessons' course.id %}"
-          class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
-          {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
-          >УРОКИ
-        </a>
-        {% elif request.user.role == request.user.ADMIN_ROLE %}
-        <a
-          href="{% url 'course-only-lessons' course.id %}"
-          class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
-          {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
-          >УРОКИ
-        </a>
+          {% if course.author == request.user and request.user.role >= request.user.AUTHOR_ROLE %}
+          <a
+            href="{% url 'course-only-lessons' course.id %}"
+            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
+            {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
+            >УРОКИ
+          </a>
+          {% elif request.user.role == request.user.ADMIN_ROLE %}
+          <a
+            href="{% url 'course-only-lessons' course.id %}"
+            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
+            {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
+            >УРОКИ
+          </a>
+          {% else %}
+          <a
+            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
+            {% if paid %}
+            href="{% url 'course-only-lessons' course.id %}"
+            {% else %}
+            data-popup=".js-popup-course-lock"
+            {% endif %}
+            >УРОКИ
+            {% if not paid %}
+            <svg class="icon icon-lock">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use>
+            </svg>
+            {% endif %}
+          </a>
+          {% endif %}
         {% else %}
         <a
           class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
-          {% if paid %}
-          href="{% url 'course-only-lessons' course.id %}"
-          {% else %}
-          data-popup=".js-popup-course-lock"
-          {% endif %}
-          >УРОКИ
-          {% if not paid %}
+          data-popup=".js-popup-auth">УРОКИ
           <svg class="icon icon-lock">
             <use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use>
           </svg>
-          {% endif %}
         </a>
         {% endif %}
-        {% endif %}
       </div>
       <a class="course__video video" href="#">
         {% if course.cover %}

apps/course/templates/course/course_only_lessons.html

@@ -9,7 +9,7 @@
 {% block ogtitle %}{{ course.title }} - {{ block.super }}{% endblock ogtitle %}
 {% block ogurl %}{{ request.build_absolute_uri }}{% endblock ogurl %}
 {% if course.cover %}
-{% block ogimage %}{{ request.build_absolute_uri }}{{ course.cover.url }}{% endblock ogimage %}
+{% block ogimage %}http://{{request.META.HTTP_HOST}}{% if course.cover %}{{ course.cover.image.url }}{% else %}{% static 'img/og_courses.jpg' %}{% endif %}{% endblock ogimage %}
 {% endif %}
 {% block ogdescription %}{{ course.short_description }}{% endblock ogdescription %}
 
@@ -184,10 +184,15 @@
             <div class="lessons__row">
               {% if lesson.cover %}
               <div class="lessons__preview">
-                <img class="lessons__pic" src="{{ lesson.cover.url }}">
+                <div class="lessons__pic-wrapper">
+                  <img class="lessons__pic" src="{{ lesson.cover.image.url }}">
+                </div>
               </div>
               {% endif %}
-              <div class="lessons__content">{{ lesson.short_description | safe }}</div>
+              <div class="lessons__content">{{ lesson.short_description | truncatechars_html:800 | safe }}</div>
+            </div>
+            <div class="lessons__row">
+              <a href="{% url 'lesson' pk=lesson.id %}" class="btn btn_stroke">Перейти к уроку</a>
             </div>
           </div>
         </a>

apps/course/templates/course/courses.html

@@ -2,6 +2,7 @@
 {% load static %}
 {% load category_items from lilcity_category %}
 
+{% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_courses.jpg' %}{% endblock ogimage %}
 {% block content %}
   <div class="main" style="background-image: url({% static 'img/bg-1.jpg' %});">
     <div class="main__center center">

apps/course/templates/course/lesson.html

@@ -2,6 +2,7 @@
 {% load static %}
 {% block title %}{{ lesson.title }} - {{ block.super }}{% endblock title %}
 
+{% block ogimage %}http://{{request.META.HTTP_HOST}}{% if lesson.course.cover %}{{ lesson.course.cover.image.url }}{% else %}{% static 'img/og_courses.jpg' %}{% endif %}{% endblock ogimage %}
 {% block content %}
 <div class="section" style="margin-bottom:0;padding-bottom:0">
   <div class="section__center center center_sm">
@@ -14,8 +15,8 @@
         </div>
         <div class="go__title">Вернуться к&nbsp;списку уроков</div>
       </a>
-      {% comment %} {% if next_lesson %}
-      <a class="go__item" href="{{ next_lesson }}">
+      {% if next_lesson %}
+      <a class="go__item" href="{% url 'lesson' pk=next_lesson %}">
         <div class="go__title">Перейти к&nbsp;следующему уроку</div>
         <div class="go__arrow">
           <svg class="icon icon-arrow-right">
@@ -23,7 +24,7 @@
           </svg>
         </div>
       </a>
-      {% endif %} {% endcomment %}
+      {% endif %}
     </div>
     <div class="lesson">
       <div class="lesson__subtitle subtitle">{{ lesson.title }}</div>
@@ -32,7 +33,7 @@
         {% if lesson.cover %}
         <img class="video__pic" src="{{ lesson.cover.image.url }}"/>
         {% else %}
-        
+
         {% endif %}
         <svg class="icon icon-play">
           <use xlink:href="{% static 'img/sprite.svg' %}#icon-play"></use>

apps/course/views.py

@@ -299,7 +299,9 @@ class LessonView(DetailView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['next'] = self.request.GET.get('next', None)
-        context['next_lesson'] = self.request.GET.get('next_lesson', None)
+        lessons = list(self.object.course.lessons.values_list('id', flat=True))
+        index = lessons.index(self.object.id)
+        context['next_lesson'] = lessons[index + 1] if index < len(lessons) - 1 else None
         return context
 
 

apps/school/templates/school/summer_school.html

@@ -1,5 +1,6 @@
 {% extends "templates/lilcity/index.html" %} {% load static %}
 {% block title %}Онлайн-школа LilCity{% endblock title%}
+{% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_summer_school.jpg' %}{% endblock %}
 {% block content %}
 {% if not is_purchased %}
 {% include "../summer/promo.html" %}

project/settings.py

@@ -54,6 +54,7 @@ INSTALLED_APPS = [
     'corsheaders',
     'sorl.thumbnail',
     'raven.contrib.django.raven_compat',
+    'django_user_agents',
 ] + [
     'apps.auth.apps',
     'apps.user',
@@ -67,6 +68,7 @@ INSTALLED_APPS = [
 
 MIDDLEWARE = [
     'corsheaders.middleware.CorsMiddleware',
+    'django_user_agents.middleware.UserAgentMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',

project/templates/blocks/user_menu.html

@@ -1,7 +1,7 @@
 {% load static %} {% load thumbnail %}
 {% if request.user.is_authenticated %}
 <div class="header__login">
-  <a class="header__ava ava" href="{% url 'user' request.user.id %}">
+  <a class="header__ava ava" href="{% if request.user_agent.is_touch_capable %}#{% else %}{% url 'user' request.user.id %}{% endif %}">
     {% thumbnail request.user.photo "48x48" crop="center" as im %}
     <img class="ava__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
     {% empty %}

project/templates/lilcity/index.html

@@ -23,7 +23,7 @@
     <meta property="og:title" content="{% block ogtitle %}Онлайн-курсы LilCity{% endblock ogtitle %}">
     {% comment %} <meta property="og:type" content="article"> {% endcomment %}
     <meta property="og:url" content="{% block ogurl %}{{ request.build_absolute_uri }}{% endblock ogurl %}">
-    <meta property="og:image" content="{% block ogimage %}{{ request.build_absolute_uri }}{% static 'img/video-1.jpg' %}{% endblock ogimage %}">
+    <meta property="og:image" content="{% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_main.jpg' %}{% endblock ogimage %}">
     <meta property="og:description" content="{% block ogdescription %}Онлайн-курсы LilCity{% endblock ogdescription %}">
     <meta property="og:site_name" content="Онлайн-курсы LilCity">
     <meta property="og:locale" content="ru_RU">

requirements.txt

@@ -25,3 +25,7 @@ twilio==6.12.1
 git+https://github.com/ivlevdenis/paymentwall-python.git
 # python-instagram==1.3.2
 git+https://github.com/ivlevdenis/python-instagram.git
+django-user-agents==0.3.2
+user-agents==1.1.0
+ua-parser==0.8.0
+

web/src/components/CourseRedactor.vue

@@ -84,13 +84,13 @@
                   </div>
                 </div>
 
-                <div v-if="live" class="info__field field"
+                <!-- <div v-if="live" class="info__field field"
                      v-bind:class="{ error: ($v.course.date.$dirty || showErrors) && $v.course.date.$invalid }">
                   <div class="field__label">ДАТА</div>
                   <div class="field__wrap">
                     <lil-select :value.sync="course.date" :options="scheduleOptions" placeholder="Выберите дату"/>
                   </div>
-                </div>
+                </div> -->
 
                 <div v-if="!live" class="info__field field">
                   <div class="field__label field__label_gray">ДОСТУП</div>
@@ -656,11 +656,11 @@
                         this.course = api.convertCourseJson(response.data);
                         this.course.live = this.live;
 
-                        if (this.live && this.course.date) {
+                        /* if (this.live && this.course.date) {
                             this.course.date = _.find(this.scheduleOptions, (item) => {
                                 return item.value == this.course.date;
                             })
-                        }
+                        } */
 
                         this.$nextTick(() => {
                             this.courseLoading = false;
@@ -841,11 +841,11 @@
                                 this.course.id = courseData.id;
                             }
 
-                            if(this.live && courseData.date) {
+                            /*if(this.live && courseData.date) {
                                 this.course.date = _.find(this.scheduleOptions, function(item){
                                     return item.value == courseData.date;
                                 });
-                            }
+                            }*/
                             this.$nextTick(() => {
                                 this.courseSyncHook = false;
                             });

web/src/components/LessonRedactor.vue

@@ -14,16 +14,22 @@
         </div>
         <div class="kit__title title">{{ title }}</div>
         <div class="kit__section">
-          <div class="kit__field field"
-               v-bind:class="{ error: $v.currentLesson.title.$invalid }">
-            <div class="field__wrap">
-              <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
-            </div>
-          </div>
-          <div class="kit__field field"
-               v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
-            <div class="field__wrap">
-              <textarea class="field__input" v-autosize="lesson.short_description" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
+          <div class="kit__row">
+            <lil-image :image-id.sync="lesson.coverImageId" :image-url.sync="lesson.coverImage"
+                 v-on:update:imageUrl="onUpdateCoverUrl" v-on:update:imageId="onUpdateCoverId" :access-token="accessToken"/>
+            <div class="kit__fieldset">
+              <div class="kit__field field"
+                   v-bind:class="{ error: $v.currentLesson.title.$invalid }">
+                <div class="field__wrap">
+                  <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
+                </div>
+              </div>
+              <div class="kit__field field"
+                   v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
+                <div class="field__wrap">
+                  <textarea class="field__input" v-autosize="lesson.short_description" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -81,6 +87,7 @@
     import BlockImages from './blocks/BlockImages'
     import BlockImageText from './blocks/BlockImageText'
     import BlockVideo from './blocks/BlockVideo'
+    import LilImage from "./blocks/Image"
     import {api} from "../js/modules/api";
     import Draggable from 'vuedraggable';
     import _ from 'lodash'
@@ -105,7 +112,13 @@
                 if (blockToRemove.data.id) {
                     api.removeContentBlock(blockToRemove, this.accessToken);
                 }
-            }
+            },
+            onUpdateCoverUrl(newValue) {
+                this.lesson.coverImage = newValue;
+            },
+            onUpdateCoverId(newValue) {
+                this.lesson.coverImageId = newValue;
+            },
         },
         computed: {
             title() {
@@ -120,10 +133,11 @@
             'block-images': BlockImages,
             'block-video': BlockVideo,
             'vue-draggable': Draggable,
+            'lil-image': LilImage,
         }
     }
 </script>
 
 <style scoped>
 
-</style>
+</style>

web/src/js/modules/api.js

@@ -204,6 +204,7 @@ export const api = {
         const isAdding = (!lessonObject.hasOwnProperty('id') || !lessonObject.hasOwnProperty('id'));
 
         const lessonJson = {
+            cover: lessonObject.coverImageId ? lessonObject.coverImageId : null,
             title: lessonObject.title,
             short_description: lessonObject.short_description,
             course: lessonObject.course_id,
@@ -284,6 +285,8 @@ export const api = {
             id: lessonJSON.id,
             title: lessonJSON.title,
             short_description: lessonJSON.short_description,
+            coverImageId: lessonJSON.cover && lessonJSON.cover.id ? lessonJSON.cover.id : null,
+            coverImage: lessonJSON.cover && lessonJSON.cover.image ? lessonJSON.cover.image : null,
             content: api.convertContentResponse(lessonJSON.content)
         }
     },

web/src/sass/_common.sass

@@ -2648,8 +2648,15 @@ a.grey-link
     flex: 0 0 140px
     +m
       display: none
+  &__pic-wrapper
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    overflow: hidden;
   &__pic
-    display: block
+    top: 50%;
+    position: relative;
+    transform: translateY(-50%);
     width: 100%
   &__content
     flex: 0 0 calc(100% - 165px)