LIL-95 Работа лайков на странице курса + розовый цвет

apps/course/templates/course/course.html

@@ -1,5 +1,6 @@
 {% extends "templates/lilcity/index.html" %}
 {% load static %}
+{% load data_liked from data_liked %}
 
 {% block title %}{{ course.title }} - {{ block.super }}{% endblock title %}
 {% block content %}
@@ -7,15 +8,25 @@
   <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 %}>
       <div class="course__head">
         <div class="course__theme theme theme_green">{{ course.category.title | upper }}</div>
-        <a class="course__likes likes" href="#">
+        {% 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="#">
           <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="{% static '/img/sprite.svg' %}#icon-like-fill-bold"></use></svg></div>
         </a>
       </div>
       <div class="course__title title">{{ course.title }}</div>

web/build/css/app.css

@@ -1229,14 +1229,6 @@ a.btn {
   font-size: 15px;
 }
 
-.user__likes .icon {
-  fill: #A7A7A7;
-}
-
-.user__likes .icon-fill {
-  fill: #FF9393;
-}
-
 .user_white .user__date {
   color: white;
 }

web/src/js/modules/courses.js

@@ -30,7 +30,7 @@ $(document).ready(function () {
     });
 
     // Обработчик лайков
-    $('.courses').on('click', 'a[data-course-likes]', function (e) {
+    $('.container').on('click', 'a[data-course-likes]', function (e) {
         e.preventDefault();
 
         const likedCourseElement = $(this);

web/src/sass/_common.sass

@@ -836,10 +836,7 @@ a.btn
     margin: -5px 0 -5px auto
     +f
     font-size: 15px
-    .icon
-      fill: $gray
-      &-fill
-        fill: $pink
+
   &_white &__date
     color: white