Add previous live lesson logic & templates & fix styles

apps/school/templates/blocks/_schedule_purchased_item.html

@@ -0,0 +1,75 @@
+{% load static %} {% load thumbnail %}
+<div class="timing__item{% if not live_lesson %} timing__item_bg{% endif %} js-timing-item">
+  <div class="timing__cell">
+    {% if school_schedule.is_purchased %}
+    <div class="timing__info">
+      <div class="timing__day{% if school_schedule.is_online %} active{% endif %}">
+        {{ school_schedule }}
+      </div>
+      {% if live_lesson %}
+      <div class="timing__date">{{ live_lesson.date }}</div>
+      {% endif %}
+    </div>
+    <div class="timing__buy">
+      <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
+      {% if live_lesson %}
+      {% include './open_lesson.html' %}
+      {% endif %}
+    </div>
+    {% else %}
+    {% include './pay_btn.html' %}
+    {% endif %}
+  </div>
+  <div class="timing__cell">
+    <div class="timing__preview">
+      {% thumbnail live_lesson.cover.image "70x70" crop="center" as im %}
+      <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+      {% empty %}
+      <img class="timing__pic" src="{% static 'img/no_cover.png' %}" width="70px" height="70px" />
+      {% endthumbnail %}
+    </div>
+  </div>
+  <div class="timing__cell">
+    <div class="timing__title">{{ school_schedule.title }}{% if live_lesson %},
+      <span class="bold">{{ live_lesson.title }}</span>
+      {% endif %}
+    </div>
+    {% if live_lesson %}
+    <div class="timing__content">{{ live_lesson.short_description }}</div>
+    {% endif %}
+    <div class="timing__more">
+      <div class="timing__head">Материалы</div>
+      <div class="timing__row">
+        <div class="timing__col">
+          <div class="timing__text">
+            <p>{{ school_schedule.description }}</p>
+          </div>
+        </div>
+        <div class="timing__col">
+          <div class="timing__text">
+            {{ school_schedule.materials }}
+          </div>
+        </div>
+      </div>
+      {% if school_schedule.schoolschedule_images.exists %}
+      <div class="timing__head">Результаты прошлых уроков</div>
+      <div class="timing__works">
+        {% for image in school_schedule.schoolschedule_images.all %}
+        <a class="timing__work" href="#">
+          {% thumbnail image.img.image "48x48" crop="center" as im %}
+          <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+          {% endthumbnail %}
+        </a>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  <div class="timing__cell">
+    <button class="timing__toggle js-timing-toggle">
+      <svg class="icon icon-arrow-down">
+        <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
+      </svg>
+    </button>
+  </div>
+</div>

apps/school/templates/blocks/open_lesson.html

@@ -1,4 +1,4 @@
 <a
   class="timing__btn btn"
-  href="{% url 'school:lesson-detail' current_live_lesson.id %}"
+  href="{% url 'school:lesson-detail' live_lesson.id %}"
 >смотреть урок</a>

apps/school/templates/blocks/schedule_purchased.html

@@ -21,92 +21,20 @@
         <div class="casing__head">
           <div class="casing__title title">Новые уроки</div>
           <label class="casing__switcher switcher">
-            <input class="switcher__input" type="checkbox">
             <span class="switcher__wrap">
-              <span class="switcher__item">запись уроков</span>
+              <a href="{% url 'school:school' %}?is_previous=true" class="switcher__item{% if is_previous %} active{% endif %}">запись уроков</a>
-              <span class="switcher__item">новые уроки</span>
+              <a href="{% url 'school:school' %}" class="switcher__item{% if not is_previous %} active{% endif %}">новые уроки</a>
             </span>
           </label>
         </div>
         <div class="casing__timing timing js-timing">
           <div class="timing__week">
             {% for school_schedule in school_schedules %}
-            {% with current_live_lesson=school_schedule.current_live_lesson %}
+            {% if is_previous %}
-            <div class="timing__item{% if not current_live_lesson %} timing__item_bg{% endif %} js-timing-item">
+            {% include './_schedule_purchased_item.html' with school_schedule=school_schedule live_lesson=school_schedule.previous_live_lesson %}
-              <div class="timing__cell">
+            {% else %}
-                {% if school_schedule.is_purchased %}
+            {% include './_schedule_purchased_item.html' with school_schedule=school_schedule live_lesson=school_schedule.current_live_lesson %}
-                <div class="timing__info">
+            {% endif %}
-                  <div class="timing__day{% if school_schedule.is_online %} active{% endif %}">
-                    {{ school_schedule }}
-                  </div>
-                  {% if current_live_lesson %}
-                  <div class="timing__date">{{ current_live_lesson.date }}</div>
-                  {% endif %}
-                </div>
-                <div class="timing__buy">
-                  <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
-                  {% if current_live_lesson %}
-                  {% include './open_lesson.html' %}
-                  {% endif %}
-                </div>
-                {% else %}
-                {% include './pay_btn.html' %}
-                {% endif %}
-              </div>
-              <div class="timing__cell">
-                <div class="timing__preview">
-                  {% thumbnail current_live_lesson.cover.image "70x70" crop="center" as im %}
-                  <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
-                  {% empty %}
-                  <img class="timing__pic" src="{% static 'img/no_cover.png' %}" width="70px" height="70px" />
-                  {% endthumbnail %}
-                </div>
-              </div>
-              <div class="timing__cell">
-                <div class="timing__title">{{ school_schedule.title }}{% if current_live_lesson %},
-                  <span class="bold">{{ current_live_lesson.title }}</span>
-                  {% endif %}
-                </div>
-                {% if current_live_lesson %}
-                <div class="timing__content">{{ current_live_lesson.short_description }}</div>
-                {% endif %}
-                <div class="timing__more">
-                  <div class="timing__head">Материалы</div>
-                  <div class="timing__row">
-                    <div class="timing__col">
-                      <div class="timing__text">
-                        <p>{{ school_schedule.description }}</p>
-                      </div>
-                    </div>
-                    <div class="timing__col">
-                      <div class="timing__text">
-                        {{ school_schedule.materials }}
-                      </div>
-                    </div>
-                  </div>
-                  {% if school_schedule.schoolschedule_images.exists %}
-                  <div class="timing__head">Результаты прошлых уроков</div>
-                  <div class="timing__works">
-                    {% for image in school_schedule.schoolschedule_images.all %}
-                    <a class="timing__work" href="#">
-                      {% thumbnail image.img.image "48x48" crop="center" as im %}
-                      <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
-                      {% endthumbnail %}
-                    </a>
-                    {% endfor %}
-                  </div>
-                  {% endif %}
-                </div>
-              </div>
-              <div class="timing__cell">
-                <button class="timing__toggle js-timing-toggle">
-                  <svg class="icon icon-arrow-down">
-                    <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            {% endwith %}
             {% endfor %}
           </div>
           <div class="timing__week">

apps/school/views.py

@@ -76,10 +76,12 @@ class SchoolView(TemplateView):
 
     def get_context_data(self):
         context = super().get_context_data()
+        is_previous = 'is_previous' in self.request.GET
         date_now = now().date()
         school_payment = SchoolPayment.objects.filter(date_start__lte=date_now, date_end__gte=date_now)
         school_payment_exists = school_payment.exists()
         context.update({
+            'is_previous': is_previous,
             'course_items': Course.objects.filter(status=Course.PUBLISHED)[:6],
             'is_purchased': school_payment_exists,
             'min_school_price': SchoolSchedule.objects.aggregate(Min('month_price'))['month_price__min'],

web/src/sass/_common.sass

@@ -3836,11 +3836,11 @@ a.grey-link
     top: 0
     left: 0
     opacity: 0
-  &__input:checked + &__wrap &__item
+  // &__input:checked + &__wrap &__item
-    &:first-child
+  //   &:first-child
-      background: #f8f8f8
+  //     background: #f8f8f8
-    &:last-child
+  //   &:last-child
-      background: transparent
+  //     background: transparent
   &__wrap
     display: flex
     background: linear-gradient(to right, #cdff82, #5efff4)
@@ -3849,13 +3849,17 @@ a.grey-link
   &__item
     padding: 11px 20px
     border-radius: 23px
+    color: black
     +fb
     font-size: 12px
     text-transform: uppercase
     user-select: none
     cursor: pointer
-    &:last-child
+    &.active
       background: #f8f8f8
+    // &:last-child
+    //   background: #f8f8f8
+
 
 .casing
   display: flex