fix: course home, course cards and course outline cleanup

school/www/courses/course.html

@@ -2,15 +2,16 @@
 {% block title %}{{ course.title }}
 {% endblock %}
 {% block head_include %}
+{% include "public/icons/symbol-defs.svg" %}
 <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 {% endblock %}
 {% block content %}
 <div class="common-page-style pt-0">
   <div class="course-home-top-container">
     {{ CourseHomeHeader(course) }}
-    {{ CourseHeaderOverlay(course) }}
     <div class="container course-home-page">
       <div class="course-body-container">
+        {{ CourseHeaderOverlay(course) }}
         {{ Description(course) }}
         {{ widgets.CourseOutline(course=course, membership=membership) }}
         {{ widgets.Reviews(course=course, membership=membership) }}
@@ -23,28 +24,32 @@
 
 {% macro CourseHomeHeader(course) %}
 <div class="course-head-container"
-  style=" {% if course.image %} background-position: center; background-size: cover; background-image: url({{ course.image }});
+  style=" {% if course.image %}
+  background-position: center;
+  background-size: cover;
+  background-image:  url({{ course.image }});
   {% else %} background-color: var(--gray-200) {% endif %}">
-  <div class="container pt-10 pb-10">
-    {{ BreadCrumb(course) }}
-    {{ CourseCardWide(course) }}
+  <div class="container pt-5 pb-5">
+    <div class="course-card-wide" style="">
+      {{ BreadCrumb(course) }}
+      {{ CourseCardWide(course) }}
+    </div>
   </div>
 </div>
-
 {% endmacro %}
 <!-- BreadCrumb -->
 
 {% macro BreadCrumb(course) %}
 <div class="breadcrumb">
   <a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
-  <img class="ml-2 mr-2" src="/assets/school/icons/chevron-right.svg">
+  <img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
   <span class="breadcrumb-destination">{{ course.title }}</span>
 </div>
 {% endmacro %}
 <!-- Course Card -->
 
 {% macro CourseCardWide(course) %}
-<div class="course-card-wide">
+<div class="">
   <div class="d-flex align-items-center">
     {% for tag in get_tags(course.name) %}
     <div class="course-card-pills">{{ tag }}</div>
@@ -58,33 +63,27 @@
   </div>
 
   <div class="course-intructor-rating-section">
-    <div class="d-flex align-items-center">
-      {% set instructors = get_instructors(course.name) %}
-      {% set ins_len = instructors | length %}
-      {% for instructor in instructors %}
-      {% if ins_len > 1 and loop.index == 1 %}
-      <div class="avatar-group overlap">
-      {% endif %}
-      {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
 
-      {% if ins_len > 1 and loop.index == ins_len %}
-      </div>
-      {% endif %}
-      {% endfor %}
-      <a class="button-links" href="{{ get_profile_url(instructors[0].username) }}">
-        <span class="course-instructor">
-        {% if ins_len == 1 %}
-          {{ instructors[0].full_name }}
-        {% else %}
-          {% set suffix = "other" if ins_len - 1 == 1 else "others"  %}
-          {{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
-        {% endif %}
-        </span>
-      </a>
+    <div class="vertically-center">
+      <svg class="icon icon-md mr-1">
+        <use class="" href="#icon-users">
+      </svg>
+      {{ get_students(course.name) | length }} {{ _("Enrolled") }}
     </div>
 
     <span class="seperator"></span>
 
+    {% if get_lessons(course.name) | length %}
+    <div class="vertically-center">
+      <svg class="icon icon-md mr-1">
+        <use href="#icon-education"></use>
+      </svg>
+      {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
+    </div>
+    {% endif %}
+
+    <span class="seperator"></span>
+
     {% set avg_rating = get_average_rating(course.name) %}
     {% if avg_rating %}
     <div class="rating mr-2">
@@ -96,19 +95,30 @@
     </div>
     <span> {{ avg_rating }} {{ _(" Rating ") }} </span>
     {% endif %}
+
   </div>
 
   {% if membership %}
   {% set progress = frappe.utils.cint(membership.progress) %}
-  <div class="progress">
+  <div class="progress" title="{{ progress }}% Completed">
     <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
     aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
-      <span class="sr-only"> {{ progress }} Complete</span>
     </div>
   </div>
-  <div class="progress-percent">{{ progress }}% Completed</div>
   {% endif %}
 
+  <div class="mt-3">
+    <div class="bold-heading">Instructors:</div>
+    {% for instructor in get_instructors(course.name) %}
+      <div class="mt-1">
+       {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
+        <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
+          <span class="course-instructor"> {{ instructor.full_name }} </span>
+        </a>
+      </div>
+    {% endfor %}
+  </div>
+
 </div>
 
 {% endmacro%}
@@ -127,31 +137,25 @@
       You have opted to be notified for this course. You will receive an email when the course becomes available.
     </div>
 
-    {% if get_lessons(course.name) | length %}
-    <div class="mt-3 mb-4">
-      <img class="mr-3" src="/assets/school/icons/book.svg">
-      {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
-    </div>
-    {% endif %}
+    <div class="d-flex align-items-center mb-2">
+      <div class="">
+        <svg class="icon icon-md mr-1">
+          <use class="" href="#icon-users">
+        </svg>
+        {{ get_students(course.name) | length }} {{ _("Enrolled") }}
+      </div>
 
-    {% if get_students(course.name) | length %}
-    {% set initial_members = get_initial_members(course.name) %}
-    <div class="overlay-student-count">
-      {% for member in initial_members %}
-      {% if initial_members | length > 1 and loop.index == 1 %}
-      <div class="avatar-group overlap">
-      {% endif %}
-      {{ widgets.Avatar(member=member, avatar_class="avatar-small") }}
+      <span class="seperator"></span>
 
-      {% if initial_members | length > 1 and loop.index == initial_members | length %}
+      {% if get_lessons(course.name) | length %}
+      <div class="">
+        <svg class="icon icon-md mr-1">
+          <use href="#icon-education"></use>
+        </svg>
+        {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
       </div>
       {% endif %}
-      {% endfor %}
-
-      <div class="course-meta ml-2">{{ get_students(course.name) | length }} {{ _("Enrolled") }} </div>
     </div>
-    {% endif %}
-
 
     {% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %}
     <div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">