From 534b69394d42ad5d85cb09a7809559f5efb66e27 Mon Sep 17 00:00:00 2001
From: Ivlev Denis <di-erz@yandex.ru>
Date: Wed, 31 Jan 2018 16:21:42 +0300
Subject: [PATCH] Reformat course template

---
 apps/course/templates/course/course.html | 337 +++++++++++++++++------
 1 file changed, 247 insertions(+), 90 deletions(-)

diff --git a/apps/course/templates/course/course.html b/apps/course/templates/course/course.html
index 5f60ce30..8965b125 100644
--- a/apps/course/templates/course/course.html
+++ b/apps/course/templates/course/course.html
@@ -1,41 +1,61 @@
-{% extends "templates/lilcity/index.html" %}
-{% load static %}
-{% load data_liked from data_liked %}
-
-{% block title %}{{ course.title }} - {{ block.super }}{% endblock title %}
+{% extends "templates/lilcity/index.html" %} 
+{% load static %} 
+{% load data_liked from data_liked %} 
+{% load rupluralize from plural %} 
+{% block title %}{{ course.title }} - {{ block.super }}{% endblock title %} 
 {% block content %}
 <div class="section section_border">
   <div class="section__center center center_sm">
     <div class="go">
       <a class="go__item" href="#">
-        <div class="go__arrow"><svg class="icon icon-arrow-left"><use xlink:href="{% static '/img/sprite.svg' %}#icon-arrow-left"></use></svg></div>
+        <div class="go__arrow">
+          <svg class="icon icon-arrow-left">
+            <use xlink:href="{% static '/img/sprite.svg' %}#icon-arrow-left"></use>
+          </svg>
+        </div>
         <div class="go__title">Вернуться</div>
-      </a><button class="go__btn btn btn_md" data-popup=".js-popup-buy">КУПИТЬ КУРС</button></div>
-    <div class="course" data-course data-course-id={{ course.id }} data-likes-count={{ course.likes.count }} {% if course.is_deferred_start %}data-future-course data-future-course-time={{ course.deferred_start_at.timestamp }}{% endif %}>
+      </a>
+      <button class="go__btn btn btn_md" data-popup=".js-popup-buy">КУПИТЬ КУРС</button>
+    </div>
+    <div 
+      class="course"
+      data-course data-course-id={{ course.id }} 
+      data-likes-count={{ course.likes.count }}
+      {% if course.is_deferred_start %}data-future-course data-future-course-time={{ course.deferred_start_at.timestamp }}{% endif %}
+      >
       <div class="course__head">
         <div class="course__theme theme theme_green">{{ course.category.title | upper }}</div>
         {% data_liked user course as liked %}
-        <a class="course__likes likes{% if liked %} active{% endif %}"
-           data-course-likes
-            {% if liked %}
-           data-liked=1
-            {% else %}
-           data-liked=0
-            {% endif %}
-           data-course-likes-count="{{ course.likes.count }}"
-           data-course-id="{{ course.id }}"
-           href="#">
+        <a 
+          class="course__likes likes{% if liked %} active{% endif %}" 
+          data-course-likes 
+          {% if liked %} data-liked=1 {% else %} data-liked=0 {% endif %}
+          data-course-likes-count="{{ course.likes.count }}" 
+          data-course-id="{{ course.id }}" 
+          href="#"
+          >
           <div class="likes__counter">{{ course.likes.count }}</div>
-          <div class="likes__icon"><svg class="icon icon-like-bold"><use xlink:href="{% static 'img/sprite.svg' %}#icon-like-bold"></use></svg><svg class="icon icon-like-fill-bold"><use xlink:href="{% static '/img/sprite.svg' %}#icon-like-fill-bold"></use></svg></div>
+          <div class="likes__icon">
+            <svg class="icon icon-like-bold">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-like-bold"></use>
+            </svg>
+            <svg class="icon icon-like-fill-bold">
+              <use xlink:href="{% static '/img/sprite.svg' %}#icon-like-fill-bold"></use>
+            </svg>
+          </div>
         </a>
       </div>
       <div class="course__title title">{{ course.title }}</div>
       <div class="course__content">{{ course.short_description }}</div>
       <div class="course__user user">
         {% if course.author.photo %}
-        <div class="user__ava ava"><img class="ava__pic" src="{{ course.author.photo.url }}"></div>
+        <div class="user__ava ava">
+          <img class="ava__pic" src="{{ course.author.photo.url }}">
+        </div>
         {% else %}
-        <div class="user__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+        <div class="user__ava ava">
+          <img class="ava__pic" src="{% static 'img/user.jpg' %}">
+        </div>
         {% endif %}
         <div class="user__info">
           <div class="user__name">{{ course.author.get_full_name }}</div>
@@ -47,79 +67,142 @@
       <div class="course__metas">
         <div class="course__meta meta">
           <div class="meta__item">
-            <div class="meta__icon"><svg class="icon icon-time"><use xlink:href="{% static 'img/sprite.svg' %}#icon-time"></use></svg></div>
-            <div class="meta__title">{{ course.duration }}</div>
+            <div class="meta__icon">
+              <svg class="icon icon-time">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-time"></use>
+              </svg>
+            </div>
+            <div class="meta__title">{{ course.duration | rupluralize:"день,дня,дней" }}</div>
           </div>
           <div class="meta__item">
-            <div class="meta__icon"><svg class="icon icon-date"><use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use></svg></div>
+            <div class="meta__icon">
+              <svg class="icon icon-date">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use>
+              </svg>
+            </div>
             <div class="meta__title">15 ноября</div>
           </div>
           <div class="meta__item">
-            <div class="meta__icon"><svg class="icon icon-money"><use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use></svg></div>
-            <div class="meta__title">{{ course.price|floatformat:"-2" }}$</div>
+            <div class="meta__icon">
+              <svg class="icon icon-money">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use>
+              </svg>
+            </div>
+            <div class="meta__title">{{ course.price|floatformat:"-2" }}₽</div>
           </div>
         </div>
         <div class="course__meta meta">
           <div class="meta__item">
-            <div class="meta__icon"><svg class="icon icon-showcase"><use xlink:href="{% static 'img/sprite.svg' %}#icon-showcase"></use></svg></div>
-            <div class="meta__title">{{ course.lessons.count }}</div>
+            <div class="meta__icon">
+              <svg class="icon icon-showcase">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-showcase"></use>
+              </svg>
+            </div>
+            <div class="meta__title">{{ course.lessons.count | rupluralize:"урок,урока,уроков" }}</div>
           </div>
           <div class="meta__item">
-            <div class="meta__icon"><svg class="icon icon-video"><use xlink:href="{% static 'img/sprite.svg' %}#icon-video"></use></svg></div>
+            <div class="meta__icon">
+              <svg class="icon icon-video">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-video"></use>
+              </svg>
+            </div>
             <div class="meta__title">12 видео</div>
           </div>
         </div>
       </div>
-      <div class="course__actions"><button class="course__action btn btn_lg btn_stroke">Описание курса</button><button class="course__action btn btn_lg btn_gray">УРОКИ<svg class="icon icon-lock"><use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use></svg></button></div><a class="course__video video"
-        href="#"><img class="video__pic" src="{% static 'img/video-1.jpg' %}"><svg class="icon icon-play"><use xlink:href="{% static 'img/sprite.svg' %}#icon-play"></use></svg></a>
+      <div class="course__actions">
+        <button class="course__action btn btn_lg btn_stroke">Описание курса</button>
+        <button class="course__action btn btn_lg btn_gray">УРОКИ
+          <svg class="icon icon-lock">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use>
+          </svg>
+        </button>
+      </div>
+      <a class="course__video video" href="#">
+        <img class="video__pic" src="{% static 'img/video-1.jpg' %}">
+        <svg class="icon icon-play">
+          <use xlink:href="{% static 'img/sprite.svg' %}#icon-play"></use>
+        </svg>
+      </a>
       <div class="course__share share share_sm">
         <div class="share__title">Поделиться курсом</div>
-        <div class="share__list"><a class="share__item" href="#"><svg class="icon icon-share-facebook"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use></svg></a><a class="share__item" href="#"><svg class="icon icon-share-twitter"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use></svg></a>
-          <a
-            class="share__item" href="#"><svg class="icon icon-share-google"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use></svg></a><a class="share__item" href="#"><svg class="icon icon-share-pinterest"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use></svg></a></div>
+        <div class="share__list">
+          <a class="share__item" href="#">
+            <svg class="icon icon-share-facebook">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use>
+            </svg>
+          </a>
+          <a class="share__item" href="#">
+            <svg class="icon icon-share-twitter">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use>
+            </svg>
+          </a>
+          <a class="share__item" href="#">
+            <svg class="icon icon-share-google">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use>
+            </svg>
+          </a>
+          <a class="share__item" href="#">
+            <svg class="icon icon-share-pinterest">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use>
+            </svg>
+          </a>
+        </div>
       </div>
     </div>
-    {% if course.from_author %}    
+    {% if course.from_author %}
     <div class="author">
       <div class="author__title title">От автора</div>
       <div class="author__row">
         {% if course.author.photo %}
-        <div class="author__ava ava"><img class="ava__pic" src="{{ course.author.photo.url }}"></div>
+        <div class="author__ava ava">
+          <img class="ava__pic" src="{{ course.author.photo.url }}">
+        </div>
         {% else %}
-        <div class="author__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+        <div class="author__ava ava">
+          <img class="ava__pic" src="{% static 'img/user.jpg' %}">
+        </div>
         {% endif %}
         <div class="author__wrap">
           <div class="author__hi">Привет всем!</div>
           <div class="author__content">
             {{ course.from_author }}
-          </div><a class="author__name" href="#">{{ course.author.get_full_name }}</a></div>
+          </div>
+          <a class="author__name" href="#">{{ course.author.get_full_name }}</a>
         </div>
       </div>
     </div>
-    {% endif %}
+  </div>
+  {% endif %}
 </div>
 <div class="section">
   <div class="section__center center center_sm">
     <div class="lessons">
       <div class="lessons__title title">Содержание курса</div>
       <div class="lessons__list">
-        {% for lesson in course.lessons.all  %}
-          <a href="{% url 'lesson' pk=lesson.id %}">
-            <div class="lessons__item">
-              <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
-              <div class="lessons__row">
-                {% if lesson.cover %}
-                  <div class="lessons__preview"><img class="lessons__pic" src="{{ lesson.cover.url }}"></div>
-                {% else %}
-                  <div class="lessons__preview"><img class="lessons__pic" src="{% static 'img/pic-3.jpg' %}"></div>
-                {% endif %}
-                <div class="lessons__content">{{ lesson.short_description | safe }}</div>
+        {% for lesson in course.lessons.all %}
+        <a href="{% url 'lesson' pk=lesson.id %}">
+          <div class="lessons__item">
+            <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
+            <div class="lessons__row">
+              {% if lesson.cover %}
+              <div class="lessons__preview">
+                <img class="lessons__pic" src="{{ lesson.cover.url }}">
+              </div>
+              {% else %}
+              <div class="lessons__preview">
+                <img class="lessons__pic" src="{% static 'img/pic-3.jpg' %}">
               </div>
+              {% endif %}
+              <div class="lessons__content">{{ lesson.short_description | safe }}</div>
             </div>
-          </a>
+          </div>
+        </a>
         {% endfor %}
       </div>
-      <div class="lessons__load load"><button class="load__btn btn">еще</button></div>
+      <div class="lessons__load load">
+        <button class="load__btn btn">еще</button>
+      </div>
     </div>
   </div>
 </div>
@@ -127,13 +210,17 @@
   <div class="section__center center center_sm">
     <div class="title">Материалы, которые понадобятся</div>
     <div class="materials">
-      {% for material in course.materials.all  %}
+      {% for material in course.materials.all %}
       <div class="materials__item">
         {% if material.cover %}
-        <div class="materials__preview"><img class="materials__pic" src="{{ material.cover.url }}"></div>
+        <div class="materials__preview">
+          <img class="materials__pic" src="{{ material.cover.url }}">
+        </div>
         {% else %}
-        <div class="materials__preview"><img class="materials__pic" src="{% static 'img/pic-3.jpg' %}"></div>
-        {% endif %}        
+        <div class="materials__preview">
+          <img class="materials__pic" src="{% static 'img/pic-3.jpg' %}">
+        </div>
+        {% endif %}
         <div class="materials__wrap">
           <div class="materials__title">{{ material.title }}</div>
           <div class="materials__content">{{ material.short_description }}</div>
@@ -147,18 +234,42 @@
   <div class="section__center center center_sm">
     <div class="title">Галерея итогов обучения</div>
     <div class="examples">
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
-      <div class="examples__item"><img class="examples__pic" src="{% static 'img/box.jpg' %}"></div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
+      <div class="examples__item">
+        <img class="examples__pic" src="{% static 'img/box.jpg' %}">
+      </div>
     </div>
   </div>
 </div>
@@ -168,16 +279,27 @@
       <div class="course__theme theme theme_green">ПЕРСОНАЖИ</div>
       <a class="course__likes likes" href="#">
         <div class="likes__counter">{{ course.likes.count }}</div>
-        <div class="likes__icon"><svg class="icon icon-like-bold"><use xlink:href="{% static 'img/sprite.svg' %}#icon-like-bold"></use></svg><svg class="icon icon-like-fill-bold"><use xlink:href="img/sprite.svg#icon-like-fill-bold"></use></svg></div>
+        <div class="likes__icon">
+          <svg class="icon icon-like-bold">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-like-bold"></use>
+          </svg>
+          <svg class="icon icon-like-fill-bold">
+            <use xlink:href="img/sprite.svg#icon-like-fill-bold"></use>
+          </svg>
+        </div>
       </a>
     </div>
     <div class="course__title title">Как просто научиться рисовать простых персонажей.</div>
     <div class="course__content">Этот курс поможет детям узнать о том как из простых форм создавать веселый и харизматичных персонажей.</div>
     <div class="course__user user user_white">
       {% if course.author.photo %}
-      <div class="user__ava ava"><img class="ava__pic" src="{{ course.author.photo.url }}"></div>
+      <div class="user__ava ava">
+        <img class="ava__pic" src="{{ course.author.photo.url }}">
+      </div>
       {% else %}
-      <div class="user__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+      <div class="user__ava ava">
+        <img class="ava__pic" src="{% static 'img/user.jpg' %}">
+      </div>
       {% endif %}
       <div class="user__info">
         <div class="user__name">{{ course.author.get_full_name }}</div>
@@ -189,18 +311,32 @@
     <div class="course__info">
       <div class="course__meta meta meta_white">
         <div class="meta__item">
-          <div class="meta__icon"><svg class="icon icon-time"><use xlink:href="{% static 'img/sprite.svg' %}#icon-time"></use></svg></div>
+          <div class="meta__icon">
+            <svg class="icon icon-time">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-time"></use>
+            </svg>
+          </div>
           <div class="meta__title">{{ course.duration }}</div>
         </div>
         <div class="meta__item">
-          <div class="meta__icon"><svg class="icon icon-date"><use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use></svg></div>
+          <div class="meta__icon">
+            <svg class="icon icon-date">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use>
+            </svg>
+          </div>
           <div class="meta__title">15 ноября</div>
         </div>
         <div class="meta__item">
-          <div class="meta__icon"><svg class="icon icon-money"><use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use></svg></div>
+          <div class="meta__icon">
+            <svg class="icon icon-money">
+              <use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use>
+            </svg>
+          </div>
           <div class="meta__title">{{ course.price|floatformat:"-2" }}$</div>
         </div>
-      </div><button class="course__buy btn btn_md" data-popup=".js-popup-buy">КУПИТЬ КУРС</button></div>
+      </div>
+      <button class="course__buy btn btn_md" data-popup=".js-popup-buy">КУПИТЬ КУРС</button>
+    </div>
   </div>
 </div>
 <div class="section section_gray">
@@ -210,24 +346,26 @@
     <div class="questions">
       <form class="questions__form" method="post" action="{% url 'coursecomment' course_id=course.id %}">
         <input type="hidden" name="reply_id">
-        <div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+        <div class="questions__ava ava">
+          <img class="ava__pic" src="{% static 'img/user.jpg' %}">
+        </div>
         <div class="questions__wrap">
           {% if user.is_authenticated %}
-            <div class="questions__reply-info">В ответ на <a
-                href="" class="questions__reply-anchor">этот комментарий</a>. <a href="#"
-                                                                                 class="questions__reply-cancel grey-link">Отменить</a>
-            </div>
-            <div class="questions__field"><textarea class="questions__textarea"
-                                                    placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
-            </div>
-            <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
+          <div class="questions__reply-info">В ответ на
+            <a href="" class="questions__reply-anchor">этот комментарий</a>.
+            <a href="#" class="questions__reply-cancel grey-link">Отменить</a>
+          </div>
+          <div class="questions__field">
+            <textarea class="questions__textarea" placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
+          </div>
+          <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
           {% else %}
-            <div>Только зарегистрированные пользователи могут оставлять комментарии.</div>
+          <div>Только зарегистрированные пользователи могут оставлять комментарии.</div>
           {% endif %}
         </div>
       </form>
       <div class="questions__list">
-          {% include "./blocks/comments.html" with object=course %}
+        {% include "./blocks/comments.html" with object=course %}
       </div>
     </div>
   </div>
@@ -236,10 +374,29 @@
   <div class="section__center center center_sm">
     <div class="share">
       <div class="share__title">Поделиться курсом</div>
-      <div class="share__list"><a class="share__item" href="#"><svg class="icon icon-share-facebook"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use></svg></a><a class="share__item" href="#"><svg class="icon icon-share-twitter"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use></svg></a>
-        <a
-          class="share__item" href="#"><svg class="icon icon-share-google"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use></svg></a><a class="share__item" href="#"><svg class="icon icon-share-pinterest"><use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use></svg></a></div>
+      <div class="share__list">
+        <a class="share__item" href="#">
+          <svg class="icon icon-share-facebook">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use>
+          </svg>
+        </a>
+        <a class="share__item" href="#">
+          <svg class="icon icon-share-twitter">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use>
+          </svg>
+        </a>
+        <a class="share__item" href="#">
+          <svg class="icon icon-share-google">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use>
+          </svg>
+        </a>
+        <a class="share__item" href="#">
+          <svg class="icon icon-share-pinterest">
+            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use>
+          </svg>
+        </a>
+      </div>
     </div>
   </div>
 </div>
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file