LIL-576 Поправить верстку

apps/course/templates/course/course_only_lessons.html

@@ -180,19 +180,18 @@
         <a href="#">
         {% endif %}
           <div class="lessons__item">
-            <div class="lessons__subtitle subtitle">{{ forloop.counter }}. {{ lesson.title }}</div>
             <div class="lessons__row">
-              {% if lesson.cover %}
               <div class="lessons__preview">
                 <div class="lessons__pic-wrapper">
-                  <img class="lessons__pic" src="{{ lesson.cover.image.url }}">
+                  <img class="lessons__pic"
+                       src="{% if lesson.cover %}{{ lesson.cover.image.url }}{% else %}{% static 'img/no_cover.png' %}{% endif %}">
                 </div>
               </div>
-              {% endif %}
-              <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 class="lessons__subtitle subtitle">{{ forloop.counter }}. {{ lesson.title }}</div>
+                <div class="lessons__content">{{ lesson.short_description | truncatechars_html:800 | safe }}</div>
+                <a href="{% url 'lesson' pk=lesson.id %}" class="btn btn_stroke">Перейти к уроку</a>
+              </div>
             </div>
           </div>
         </a>

apps/course/templates/course/lesson.html

@@ -27,18 +27,18 @@
       {% endif %}
     </div>
     <div class="lesson">
-      <div class="lesson__subtitle subtitle">{{ lesson.title }}</div>
-      <div class="lesson__content">{{ lesson.short_description }}</div>
-      {% comment %} <a class="lesson__video video" href="#">
-        {% 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>
-        </svg>
-      </a> {% endcomment %}
+      <div class="lesson__row">
+        <div class="lesson__preview">
+          <div class="lesson__pic-wrapper">
+            <img class="lesson__pic"
+                 src="{% if lesson.cover %}{{ lesson.cover.image.url }}{% else %}{% static 'img/no_cover.png' %}{% endif %}">
+          </div>
+        </div>
+        <div>
+          <div class="lesson__subtitle subtitle">{{ lesson.title }}</div>
+          <div class="lesson__content">{{ lesson.short_description }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

web/src/sass/_common.sass

@@ -175,7 +175,7 @@ button
       top: 1px
       left: 1px
       right: 1px
-      bottom: 1px
+      bottom: 2px
       background: white
       border-radius: 2px
       transition: opacity .2s
@@ -2654,10 +2654,9 @@ a.grey-link
     border-radius: 50%;
     overflow: hidden;
   &__pic
-    top: 50%;
-    position: relative;
-    transform: translateY(-50%);
+    object-fit: cover
     width: 100%
+    height: 100%
   &__content
     flex: 0 0 calc(100% - 165px)
   &__actions
@@ -2700,7 +2699,7 @@ a.grey-link
     margin-bottom: 10px
     color: #191919
   &__content
-    margin-bottom: 30px
+    margin-bottom: 15px
     color: #191919
   &__video_frame
     width: 100%
@@ -2708,6 +2707,24 @@ a.grey-link
   &__chat_frame
     width: 100%
     height: 600px
+  &__row
+    display: flex
+    +m
+      display: block
+  &__preview
+    margin-right: 25px
+    flex: 0 0 140px
+    +m
+      display: none
+  &__pic-wrapper
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    overflow: hidden;
+  &__pic
+    object-fit: cover
+    width: 100%
+    height: 100%
 
 
 .lessons