Merge branch 'feature/school-layout' into 'dev'

[LIL-279] layout profile school page

See merge request lilcity/backend!6

apps/course/templates/course/school.html

@@ -0,0 +1,34 @@
+<div class="school__page">
+    <div class="school__block">
+        <div class="school__month">
+            <div class="school__month__wrap">
+                <div class="school__month__title">Январь</div>
+                <div class="school__month__subtitle">Осталось 14 дней</div>
+                <div class="school__month__image">
+                    <img class="school__month__image__pic" src="/static/img/order.jpg">
+                </div>
+            </div>
+        </div>
+        <div class="school__btn">
+            <a class="buy__btn btn btn_md" href="#" {% if user.is_authenticated %}
+               data-popup=".js-popup-buy"
+               {% else %}
+               data-popup=".js-popup-auth"
+               {% endif %}>ПРОДЛИТЬ ШКОЛУ</a>
+        </div>
+        <div class="school__btn__prev">
+            <a class="school__prev__btn btn" href="#">ПОСМОТРЕТЬ ПРЕДЫДУЩИЕ УРОКИ</a>
+        </div>
+    </div>
+    <div class="school__block school__list">
+        {% for course in course_items %}
+        <div class="school__item">
+            <div class="school__title">Понедельник</div>
+            <div class="school__subtitle">Пластилиновая живопись.</div>
+            <div class="school__content">
+                <p>Научимся смешивать цвета, получать красивые оттенки и создавать картины из пластилина разными техниками. Узнаем как хранить и ухаживать за такими работами.</p>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>

apps/user/templates/user/profile.html

@@ -71,6 +71,7 @@
         <button class="tabs__btn js-tabs-btn active">ОПУБЛИКОВАННЫЕ
           <span class="mobile-hide">КУРСЫ</span>
         </button>
+        <button class="tabs__btn js-tabs-btn">ШКОЛА</button>
         {% comment %} <button class="tabs__btn js-tabs-btn">
           <span class="mobile-hide">КУРСЫ</span>
           НА МОДЕРАЦИИ
@@ -94,6 +95,13 @@
             </div>
           </div>
         </div>
+        <div class="tabs__item js-tabs-item">
+          <div class="courses courses_scroll">
+            <div class="courses__list">
+              {% include "course/school.html" with course_items=published %}
+            </div>
+          </div>
+        </div>
         {% comment %} <div class="tabs__item js-tabs-item">
           <div class="courses courses_scroll">
             <div class="courses__list">

web/src/sass/_common.sass

@@ -3329,4 +3329,94 @@ a
     text-align: left
   &.pic
     position: relative
-    width: 100%
+    width: 100%
+
+
+.school
+  &__page
+    display: flex
+    margin: 0 0 0 10px
+    flex-wrap: wrap
+  &__block
+    flex: 0 0 calc(50% - 20px)
+  &__list
+    display: flex
+    margin: 0 -10px
+    flex-wrap: wrap
+  &__item
+    display: block
+    margin: 0 10px 40px 10px
+    flex: 0 0 calc(100% - 20px)
+  &__title
+    display: block
+    margin: 0 0 10px 0
+    font-weight: bold
+    letter-spacing: 2px
+    color: #ff9393
+  &__subtitle
+    display: block
+    margin: 0
+    color: #333333
+    font-family: 'ProximaNova-Bold', serif
+  &__content
+    font-size: 16px
+    line-height: 1.25
+    color: #333333
+  &__btn
+    margin-top: 20px
+    a
+      width: 70%
+  &__btn__prev
+    margin-top: 12px
+    a
+      width: 70%
+  &__month
+    margin-bottom: 20px
+    flex: 0 0 320px
+    border-radius: 8px
+    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
+    width: 70%
+    padding: 2px
+    &__wrap
+      padding: 5px 0 10px
+      background: white
+      border-radius: 6px
+    &__title
+      margin: 20px 0 0 20px
+      font-size: 36px
+      line-height: 0.97
+      color: #333333
+    &__subtitle
+      margin: 10px 0 0 20px
+      font-size: 16px
+      line-height: 0.88
+      color: #888888
+    &__image
+      margin: 40px 0 40px 0
+      &__pic
+        display: block
+        width: 100%
+  &__prev__btn
+    position: relative
+    padding: 19px 24px 18px
+    border-radius: 8px
+    z-index: 4
+    font-size: 12px
+    font-weight: bold
+    line-height: 1.67
+    letter-spacing: 1px
+    text-align: center
+    color: #333333
+    &:hover:before
+      opacity: 0
+    &:before
+      content: ''
+      position: absolute
+      top: 2px
+      left: 2px
+      right: 2px
+      bottom: 2px
+      background: #FDF8F9
+      border-radius: 8px
+      transition: opacity .2s
+      z-index: -2