LIL-601 Стилевые правки всего сайта

Добавление ссылок в краткое описание курса, уроков и их контент
Вертикальные отступы уменьшены на 10 пкс
На главной блок с приложениями ниже блока преподавателей
На главной только 3 курса и перестановка строк

apps/course/templates/course/_items.html

@@ -54,7 +54,7 @@
     {% endif %}
   </div>
   <a class="courses__title" href="{% url 'course' course.id %}?next={{ request.get_full_path }}">{{ course.title }}</a>
-  <div class="courses__content">{{ course.short_description }}
+  <div class="courses__content">{{ course.short_description | safe | linebreaks }}
   </div>
   <div class="courses__user user">
     <a href="{% if course.author %}{% url 'user' course.author.id %}{% endif %}">

apps/course/templates/course/course.html

@@ -4,14 +4,14 @@
 {% load rupluralize from plural %}
 {% block title %}{{ course.title }} - {{ block.super }}{% endblock title %}
 {% comment %} seo tags {% endcomment %}
-{% block description %}{{ course.short_description }}{% endblock description%}
+{% block description %}{{ course.short_description | striptags }}{% endblock description%}
 {% block twurl %}{{ request.build_absolute_uri }}{% endblock twurl %}
 {% 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}}{% if course.cover %}{{ course.cover.image.url }}{% else %}{% static 'img/og_courses.jpg' %}{% endif %}{% endblock ogimage %}
 {% endif %}
-{% block ogdescription %}{{ course.short_description }}{% endblock ogdescription %}
+{% block ogdescription %}{{ course.short_description | striptags }}{% endblock ogdescription %}
 
 {% block content %}
 <div class="section section_border course">
@@ -70,7 +70,7 @@
         </a>
       </div>
       <div class="course__title title">{{ course.title }}</div>
-      <div class="course__content">{{ course.short_description | linebreaks }}</div>
+      <div class="course__content">{{ course.short_description | safe | linebreaks }}</div>
       <a href="{% url 'user' course.author.id %}">
         <div class="course__user user">
           {% if course.author.photo %}
@@ -270,7 +270,7 @@
       </a>
     </div>
     <div class="course__title title">{{ course.title }}</div>
-    <div class="course__content">{{ course.short_description | linebreaks }}</div>
+    <div class="course__content">{{ course.short_description | safe | linebreaks }}</div>
     <a href="{% url 'user' course.author.id %}">
       <div class="course__user user user_white">
         {% if course.author.photo %}

apps/course/templates/course/course_only_lessons.html

@@ -4,14 +4,14 @@
 {% load rupluralize from plural %}
 {% block title %}{{ course.title }} - {{ block.super }}{% endblock title %}
 {% comment %} seo tags {% endcomment %}
-{% block description %}{{ course.short_description }}{% endblock description%}
+{% block description %}{{ course.short_description | striptags }}{% endblock description%}
 {% block twurl %}{{ request.build_absolute_uri }}{% endblock twurl %}
 {% block ogtitle %}{{ course.title }} - {{ block.super }}{% endblock ogtitle %}
 {% block ogurl %}{{ request.build_absolute_uri }}{% endblock ogurl %}
 {% if course.cover %}
 {% 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 %}
+{% block ogdescription %}{{ course.short_description | striptags }}{% endblock ogdescription %}
 
 {% block content %}
 <div class="section section_border">
@@ -68,7 +68,7 @@
         </a>
       </div>
       <div class="course__title title">{{ course.title }}</div>
-      <div class="course__content">{{ course.short_description }}</div>
+      <div class="course__content">{{ course.short_description | safe | linebreaks }}</div>
       <a href="{% url 'user' course.author.id %}">
         <div class="course__user user">
           {% if course.author.photo %}
@@ -174,11 +174,6 @@
       <div class="lessons__title title">Содержание курса</div>
       <div class="lessons__list">
         {% for lesson in lessons %}
-        {% if course.author == request.user or request.user.role >= request.user.TEACHER_ROLE or paid %}
-        <a href="{% url 'lesson' pk=lesson.id %}">
-        {% else %}
-        <a href="#">
-        {% endif %}
           <div class="lessons__item">
             <div class="lessons__subtitle subtitle">{{ forloop.counter }}. {{ lesson.title }}</div>
             <div class="lessons__row">
@@ -192,10 +187,11 @@
               <div class="lessons__content">{{ lesson.short_description | truncatechars_html:800 | safe | linebreaks }}</div>
             </div>
             <div class="lessons__row">
+              {% if course.author == request.user or request.user.role >= request.user.TEACHER_ROLE or paid %}
               <a href="{% url 'lesson' pk=lesson.id %}" class="btn btn_stroke">Перейти к уроку</a>
+              {% endif %}
             </div>
           </div>
-        </a>
         {% endfor %}
       </div>
     </div>

apps/course/templates/course/lesson.html

@@ -28,7 +28,7 @@
     </div>
     <div class="lesson">
       <div class="lesson__subtitle subtitle">{{ lesson.title }}</div>
-      <div class="lesson__content">{{ lesson.short_description }}</div>
+      <div class="lesson__content">{{ lesson.short_description | safe | linebreaks }}</div>
       {% comment %} <a class="lesson__video video" href="#">
         {% if lesson.cover %}
         <img class="video__pic" src="{{ lesson.cover.image.url }}"/>

project/templates/blocks/last_courses.html

@@ -3,9 +3,8 @@
   <div class="section__center center">
     <div class="title title_center">Видео-курсы без расписания</div>
     <div class="text text_courses">Если вам не совсем удобно заниматься с нами в прямом эфире каждый день как в нашей онлайн-школе, специально для вас мы
-      делаем отдельные уроки в записи, которые вы можете проходить когда вам будем удобно.</div>
-    <div class="head">
-      <div class="head__text">Учите и развивайте креативное мышление когда и где угодно</div>
+      делаем отдельные уроки в записи, которые вы можете проходить когда вам будем удобно.<br><br>
+      Учите и развивайте креативное мышление когда и где угодно
     </div>
     <div class="courses">
       <div class="courses__list">

project/templates/blocks/popup_course_lock.html

@@ -6,7 +6,7 @@
       <div class="lock">
         <div class="lock__label">ЧТОБЫ ПРОДОЛЖИТЬ ПРОСМОТР</div>
         <div class="lock__title title">{{ course.title }}</div>
-        <div class="lock__content">{{ course.short_description }}</div>
+        <div class="lock__content">{{ course.short_description | safe | linebreaks }}</div>
         <a href="{% url 'course-checkout' course.id %}" class="lock__btn btn">КУПИТЬ КУРС</a>
       </div>
     </div>

project/templates/lilcity/main.html

@@ -9,7 +9,7 @@
   {% include "templates/blocks/about.html" %}
   {% include "templates/blocks/last_courses.html" %}
   {% include "templates/blocks/gallery.html" %}
-  {% include "templates/blocks/game.html" %}
   {% include "templates/blocks/teachers.html" %}
+  {% include "templates/blocks/game.html" %}
   {% include "templates/blocks/partners.html" %}
 {% endblock content %}

project/views.py

@@ -74,7 +74,7 @@ class IndexView(TemplateView):
             'online': online,
             'online_coming_soon': online_coming_soon,
             'school_schedule': school_schedule,
-            'course_items': Course.objects.filter(status=Course.PUBLISHED)[:6],
+            'course_items': Course.objects.filter(status=Course.PUBLISHED)[:3],
             'is_purchased': school_payment_exists,
             'min_school_price': SchoolSchedule.objects.aggregate(Min('month_price'))['month_price__min'],
             'school_schedules': SchoolSchedule.objects.all(),

web/src/components/CourseRedactor.vue

@@ -37,10 +37,8 @@
                      v-bind:class="{ error: ($v.course.short_description.$dirty || showErrors) && $v.course.short_description.$invalid }">
                   <div class="field__label">{{titles.shortDescription}}</div>
                   <div class="field__wrap">
-                    <textarea class="field__textarea"
-                              v-autosize="course.short_description"
-                              @input="$v.course.short_description.$touch()"
-                              v-model="course.short_description"></textarea>
+                    <vue-redactor :value="course.short_description"
+                                  v-on:update:value="(value) => { this.course.short_description = value; }" />
                   </div>
                 </div>
               </div>
@@ -236,7 +234,7 @@
                         </div>
                         <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
                         <div class="lessons__row">
-                          <div class="lessons__content">{{ lesson.short_description | linebreaks }}</div>
+                          <div class="lessons__content" v-html="lesson.short_description"></div>
                         </div>
                       </div>
                   </vue-draggable>
@@ -274,6 +272,7 @@
     import BlockImages from './blocks/BlockImages'
     import BlockImageText from './blocks/BlockImageText'
     import BlockVideo from './blocks/BlockVideo'
+    import VueRedactor from './redactor/VueRedactor';
     import LilSelect from "./inputs/LilSelect";
     import LessonRedactor from "./LessonRedactor";
     import {api} from "../js/modules/api";
@@ -1140,6 +1139,7 @@
             'block-video': BlockVideo,
             'lesson-redactor': LessonRedactor,
             'vue-draggable': Draggable,
+            'vue-redactor': VueRedactor,
         }
     }
 </script>
@@ -1240,9 +1240,10 @@
     overflow: scroll;
   }
 
-  .field_short_description {
+  .field_short_description .redactor-box {
+    overflow-x: visible;
+    overflow-y: auto;
     max-height: 200px;
-    overflow: scroll;
   }
 </style>
 

web/src/components/LessonRedactor.vue

@@ -27,7 +27,8 @@
               <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>
+                  <vue-redactor :value="lesson.short_description"
+                                  v-on:update:value="(value) => { this.lesson.short_description = value; }" placeholder="Описание урока"/>
                 </div>
               </div>
             </div>
@@ -88,6 +89,7 @@
     import BlockImageText from './blocks/BlockImageText'
     import BlockVideo from './blocks/BlockVideo'
     import LilImage from "./blocks/Image"
+    import VueRedactor from './redactor/VueRedactor';
     import {api} from "../js/modules/api";
     import Draggable from 'vuedraggable';
     import _ from 'lodash'
@@ -134,6 +136,7 @@
             'block-video': BlockVideo,
             'vue-draggable': Draggable,
             'lil-image': LilImage,
+            'vue-redactor': VueRedactor,
         }
     }
 </script>

web/src/components/redactor/VueRedactor.vue

@@ -7,7 +7,7 @@
     import './redactor-full.js';
 
     export default {
-        props: ['value', 'placeholder'],
+        props: ['value', 'placeholder', 'air', 'buttonsHide'],
         name: "vue-redactor",
         data() {
             return {
@@ -18,7 +18,7 @@
             const me = this;
             $(me.$refs.input).redactor({
                 air: true,
-                buttonsHide: ['image', 'link', 'format'],
+                buttonsHide: this.buttonsHide || ['image', 'format'],
                 lang: 'ru',
                 placeholder: this.placeholder,
                 callbacks: {

web/src/sass/_common.sass

@@ -893,11 +893,11 @@ a[name]
     font-size: 20px
 
 .section
-  padding: 60px 0
+  padding: 50px 0
   +t
-    padding: 40px 0
-  +m
     padding: 30px 0
+  +m
+    padding: 20px 0
   &_review
     background: url(../img/bg-elephants.jpg) 0 0 / 100px 102px
   &_gray
@@ -2437,11 +2437,11 @@ a.grey-link
 
 .go
   display: flex
-  margin-bottom: 50px
+  margin-bottom: 40px
   justify-content: space-between
   align-items: center
   +t
-    margin-bottom: 30px
+    margin-bottom: 20px
   &__item
     display: flex
     max-width: calc(50% - 20px)
@@ -2498,11 +2498,11 @@ a.grey-link
       fill: white
 
 .course
-  margin-bottom: 60px
+  margin-bottom: 50px
   &__head
     display: flex
     min-height: 40px
-    margin-bottom: 30px
+    margin-bottom: 20px
     align-items: center
     justify-content: space-between
     +t
@@ -2512,9 +2512,9 @@ a.grey-link
     +t
       margin-bottom: 10px
   &__content
-    margin-bottom: 40px
+    margin-bottom: 30px
     +t
-      margin-bottom: 25px
+      margin-bottom: 15px
   &__about
     position: relative
     margin-bottom: 40px
@@ -2544,9 +2544,9 @@ a.grey-link
     &:active
       color: rgba(white,.4)
   &__user
-    margin-bottom: 40px
+    margin-bottom: 30px
     +t
-      margin-bottom: 30px
+      margin-bottom: 20px
   &__info
     display: flex
     align-items: center
@@ -2561,17 +2561,17 @@ a.grey-link
       margin: 20px 0 0
   &__metas
     display: flex
-    margin-bottom: 45px
+    margin-bottom: 35px
     justify-content: space-between
     +m
       display: block
-      margin-bottom: 25px
+      margin-bottom: 15px
   &__metas &__meta
     +m
       margin-bottom: 20px
   &__actions
     display: flex
-    margin: 0 -10px 50px
+    margin: 0 -10px 40px
   &__action
     position: relative
     margin: 0 10px
@@ -2639,6 +2639,7 @@ a.grey-link
     visibility: visible
   &__subtitle
     margin-bottom: 20px
+    text-transform: none
   &__row
     display: flex
     +m