feat: profile page and other issues

community/lms/widgets/BreadCrumb.html

@@ -1,6 +1,8 @@
 <div class="course-instructor breadcrumb">
   <a class="dark-links" href="/courses">All Courses</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
+
+  {% if course %}
   {% if lesson %}
   <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
@@ -8,5 +10,10 @@
   {% else %}
   <span class="muted-text">{{ course.title }}</span>
   {% endif %}
+  {% endif %}
+
+  {% if member_name %}
+  <span class="muted-text">{{ member_name }}</span>
+  {% endif %}
 
 </div>

community/lms/widgets/ChapterTeaser.html

@@ -16,25 +16,25 @@
 
       {% for lesson in chapter.get_lessons() %}
 
-      <div class="lesson-info">
+      <div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
 
-        {% if show_link or lesson.include_in_preview %}
+        {% if membership or lesson.include_in_preview %}
         <a class="dark-links"
           href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
           data-course="{{ course.name }}">
           {{ lesson.title }}</a>
 
-        {% if show_link %}
+        {% if membership %}
         <img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
           src="/assets/community/icons/white-tick.svg">
         {% endif %}
 
         {% else %}
-        <div title="This lesson is not available for preview">
+        <div class="no-preview" title="This lesson is not available for preview">
           <span class="dark-links">
             {{ lesson.title }}
           </span>
-          <i class="fa fa-lock ml-2"></i>
+          <img class="ml-2" src="/assets/community/icons/lock.svg">
         </div>
         {% endif %}
 
@@ -51,7 +51,6 @@
 
 <script>
   frappe.ready(() => {
-    expand_the_first_chapter();
     expand_the_active_chapter();
   })
 
@@ -65,10 +64,28 @@
   }
 
   var expand_the_active_chapter = () => {
+
+    /* Find anchor matching the URL for course details page */
     var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
-    if (selector.length) {
+    if (! selector.length) {
+      selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
+    }
+    if (selector.length && $(".course-details-page").length) {
+      $(".lesson-info").removeClass("active-lesson")
+      selector.addClass("active-lesson");
       show_section(selector.parent().parent());
     }
+
+    /* For course home page */
+    else if ($(".active-lesson").length) {
+      selector = $(".active-lesson")
+      show_section(selector.parent().parent());
+    }
+
+    /* If no active chapter then exapand the first chapter */
+    else {
+      expand_the_first_chapter();
+    }
   }
 
   var show_section = (element) => {

community/lms/widgets/CourseCard.html

@@ -0,0 +1,63 @@
+<div class="common-card-style course-card">
+  <div class="course-image" style="background-image: url({{ course.image }});">
+    <div class="course-tags">
+      {% for tag in course.get_tags() %}
+      <div class="course-card-pills">{{ tag }}</div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="course-card-content">
+    <div class="course-card-meta muted-text">
+      {% if course.get_chapters() | length %}
+      <span>
+        {{ course.get_chapters() | length }} Chapters
+      </span>
+      {% endif %}
+      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
+      <span class="font-weight-bold ml-3 mr-3"> . </span>
+      {% endif %}
+      {% if course.get_upcoming_batches() | length %}
+      <span class="">
+        {{ course.get_upcoming_batches() | length }} Open Batches
+      </span>
+      {% endif %}
+    </div>
+    <div class="course-card-title">{{ course.title }}</div>
+    <div class="card-divider"></div>
+    <div class="course-card-meta-2">
+      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
+      <span class="course-instructor">
+        {{ course.get_instructor().full_name }}
+      </span>
+      {% if course.get_students() | length %}
+      <span class="course-student-count">
+        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {{ course.get_students() | length }}
+      </span>
+      {% endif %}
+    </div>
+    {% set membership = course.get_membership(frappe.session.user) %}
+
+    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+    membership.current_lesson
+    else '1.1' %}
+
+    {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
+
+    {% if membership %}
+
+    <div class="view-course-link is-primary">
+      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
+
+    {% else %}
+
+    <div class="view-course-link">
+      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% endif %}
+  </div>
+</div>

community/lms/widgets/CourseOutline.html

@@ -5,7 +5,7 @@
   </div>
   <div class="coure-outline">
     {% for chapter in course.get_chapters() %}
-    {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
+    {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, membership=membership) }}
     {% endfor %}
   </div>
 </div>

community/lms/widgets/MemberCard.html

@@ -1,10 +1,10 @@
 <div class="common-card-style member-card {{dimension_class}} ">
-  {% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
+  {% set avatar_class = "avatar-large" if dimension_class == "member-card-medium" else "avatar-xl"%}
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
   <div class="small-title member-card-title">
     {{ member.full_name }}
   </div>
-  {% set course_count = member.get_course_count() %}
+  {% set course_count = member.get_authored_courses() | length %}
   {% if show_course_count and course_count > 0 %}
   {% set suffix = "Courses" if course_count > 1 else "Course" %}
   <div class="small-title">