feat: course home

community/lms/doctype/lms_batch_membership/lms_batch_membership.js

@@ -10,5 +10,5 @@ frappe.ui.form.on('LMS Batch Membership', {
 				}
 			};
 		});
-	},
+	}
 });

community/lms/doctype/lms_course/lms_course.py

@@ -274,6 +274,11 @@ class LMSCourse(Document):
             return False
         return True
 
+    def get_average_rating(self):
+        ratings = [review.rating for review in self.get_reviews()]
+        if not len(ratings):
+            return None
+        return sum(ratings)/len(ratings)
 
     def get_outline(self):
         return CourseOutline(self)

community/lms/doctype/lms_course_mentor_mapping/lms_course_mentor_mapping.js

@@ -2,7 +2,13 @@
 // For license information, please see license.txt
 
 frappe.ui.form.on('LMS Course Mentor Mapping', {
-	// refresh: function(frm) {
+	onload: function(frm) {
-
+		frm.set_query('mentor', function(doc) {
-	// }
+			return {
+				filters: {
+					"ignore_user_type": 1,
+				}
+			};
+		});
+	},
 });

community/lms/doctype/lms_course_review/lms_course_review.json

@@ -13,23 +13,26 @@
   {
    "fieldname": "review",
    "fieldtype": "Small Text",
+   "in_list_view": 1,
    "label": "Review"
   },
   {
    "fieldname": "rating",
    "fieldtype": "Rating",
+   "in_list_view": 1,
    "label": "Rating"
   },
   {
    "fieldname": "course",
    "fieldtype": "Link",
+   "in_list_view": 1,
    "label": "Course",
    "options": "LMS Course"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-06-28 15:00:35.146196",
+ "modified": "2021-07-05 14:57:03.841430",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course Review",

community/lms/doctype/lms_course_review/lms_course_review.py

@@ -1,8 +1,18 @@
 # Copyright (c) 2021, FOSS United and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
 
 class LMSCourseReview(Document):
 	pass
+
+@frappe.whitelist()
+def submit_review(rating, review, course):
+    frappe.get_doc({
+        "doctype": "LMS Course Review",
+        "rating": rating,
+        "review": review,
+        "course": course
+    }).save(ignore_permissions=True)
+    return "OK"

community/lms/widgets/ChapterTeaser.html

@@ -1,25 +1,23 @@
 <div>
-  <a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
+  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
-    <img class="" src="/assets/community/icons/side-arrow.svg"/>
+    aria-expanded="false">
-    <span class="chapter-title">
+    <img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
-      {{ chapter.title }}
+    {{ index }}. {{ chapter.title }}
-    </span>
+  </div>
-  </a>
   <div class="chapter-content collapse navbar-collapse" id="{{ chapter.get_slugified_chapter_title() }}">
-    <div class="course-card-meta">
+    <div class="chapter-description muted-text">
       {{ chapter.description }}
     </div>
     <div class="lessons">
       {% for lesson in chapter.get_lessons() %}
       <div class="lesson-info">
         {% if show_link or lesson.include_in_preview %}
-            <a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}" data-course="{{ course.name }}">
+        <a class="dark-links" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
-              {{ loop.index }}.
+          data-course="{{ course.name }}">
           {{ lesson.title }}</a>
         {% else %}
         <div title="This lesson is not available for preview">
-              <span class="">
+          <span class="dark-links">
-                {{ loop.index }}.
             {{ lesson.title }}
           </span>
           <i class="fa fa-lock ml-2"></i>
@@ -30,13 +28,6 @@
     </div>
   </div>
 </div>
-<script>
+{% if index != course.get_chapters() | length %}
-  frappe.ready(() => {
+<div class="card-divider"></div>
-    var elements = $(".collapse")
+{% endif %}
-    elements.each((i, elem) => {
-      if (i <= 5) {
-        $(elem).addClass("show")
-      }
-    })
-  })
-</script>

community/lms/widgets/CourseOutline.html

@@ -1,10 +1,12 @@
+{% if course.get_chapters() | length %}
 <div class="">
-  <h3>
+  <div class="course-home-headings">
     Course Outline
-  </h3>
+  </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)}}
     {% endfor %}
   </div>
 </div>
+{% endif %}

community/lms/widgets/MemberCard.html

@@ -0,0 +1,14 @@
+<div class="common-card-style member-card {{dimension_class}} ">
+  {% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
+  {{ 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() %}
+  {% if show_course_count and course_count > 0 %}
+  {% set suffix = "Courses" if course_count > 1 else "Course" %}
+  <div class="small-title">
+    Created {{ course_count }} {{ suffix }}
+  </div>
+  {% endif %}
+</div>

community/lms/widgets/Reviews.html

@@ -1,22 +1,22 @@
-<div>
+{% if course.get_reviews() | length %}
+<div class="reviews-parent">
   <div class="reviews-heading">
-    <div class="reviews-title mb-5">Review</div>
+    <div class="course-home-headings">Review</div>
     {% if course.is_eligible_to_review(membership) %}
-    <a href="/lms-course-review?new=1">
+    <a class="review-link" href="">
       Provide your Feedback
     </a>
     {% endif %}
   </div>
-  <div class="cards-parent">
+  <div class="mentors-section">
     {% for review in course.get_reviews() %}
-    <div class="common-card-style review-card">
+    <div class="review-card">
-      <div class="review-content"> {{ review.review }} </div>
+      <div class="common-card-style review-content small-title"> {{ review.review }} </div>
-      <div class="card-divider"></div>
       <div class="review-card-footer">
         <div>
-          {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-small") }}
+          {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
           <span class="course-instructor">
-            {{ course.get_instructor().full_name }}
+            {{ review.owner_details.full_name }}
           </span>
         </div>
         <div class="rating">
@@ -32,33 +32,54 @@
   </div>
 </div>
 
-
+<div class="modal fade review-modal" id="review-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-
+  aria-hidden="true">
-<!-- Modal -->
-<div class="modal fade" id="review-modal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title">Modal title</h5>
+        <div class="course-home-headings modal-headings">Review</div>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <iframe src="/lms-course-review?new=1"></iframe>
+        <form class="review-form" id="review-form">
+          <div class="form-group">
+            <div class="clearfix">
+              <label class="control-label reqd" style="padding-right: 0px;">Rating</label>
+            </div>
+            <div class="control-input-wrapper">
+              <div class="control-input">
+                <div class="rating rating-field" id="rating">
+                  {% for i in [1, 2, 3, 4, 5] %}
+                  <svg class="icon icon-md icon-rating" data-rating="{{ i }}">
+                    <use href="#icon-star"></use>
+                  </svg>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <div class="clearfix">
+              <label class="control-label reqd" style="padding-right: 0px;">Review</label>
+            </div>
+            <div class="control-input-wrapper">
+              <div class="control-input">
+                <textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field" data-fieldtype="Text"
+                  data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
+                  spellcheck="false"></textarea>
+              </div>
+            </div>
+          </div>
+          <p class="error-field muted-text"></p>
+        </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <div class="wide-button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
-        <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
   </div>
 </div>
-<script>
+{% endif %}
-
-  frappe.ready(() => {
-    frappe.provide('frappe.ui');
-    console.log(frappe.ui)
-  })
-
-</script>

community/public/css/style.css

@@ -76,14 +76,6 @@ img.profile-photo {
   padding-right: 5px;
 }
 
-.preview-video {
-    margin: 20px 0px;
-}
-
-.preview-video iframe {
-    max-width: 100%
-}
-
 .message {
   border: 1px dashed var(--text-color);
   padding: 20px;
@@ -286,7 +278,6 @@ input[type=checkbox] {
   align-items: flex-start;
   background: #FFFFFF;
   border-radius: 8px;
-    box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
   position: relative;
 }
 
@@ -294,29 +285,34 @@ input[type=checkbox] {
   flex-direction: column;
   width: 352px;
   height: 380px;
-    margin: 0px 16px 32px;
+  margin: 0px 32px 32px 0px;
 }
 
 @media (max-width: 768px) {
-    .common-card-style {
+  .course-card {
+    margin: 0px 18px 32px 0px;
     width: 336px;
   }
 }
 
 @media (max-width: 375px) {
-    .common-card-style {
+  .course-card {
+    margin: 0px 0px 32px;
     width: 312px;
   }
 }
 
-.course-card-meta {
+.muted-text {
   font-size: 12px;
   line-height: 135%;
-    margin: 16px 0px 8px;
   color: var(--muted-text);
   height: 15px;
 }
 
+.course-card-meta {
+  margin: 16px 0px 8px;
+}
+
 .course-card-content {
   width: 100%;
   padding: 0px 24px 20px;
@@ -372,8 +368,8 @@ input[type=checkbox] {
   flex-wrap: wrap;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 768px) {
-    .course-cards-parent {
+  .cards-parent {
     justify-content: center;
   }
 }
@@ -388,12 +384,12 @@ input[type=checkbox] {
 }
 
 .course-top-section {
-    margin: 0px 140px 0px;
+  margin: 0px 120px 0px;
 }
 
 @media (max-width: 768px) {
   .course-top-section {
-        margin: 0px 40px 0px;
+    margin: 0px 30px 0px;
   }
 }
 
@@ -428,27 +424,48 @@ input[type=checkbox] {
   justify-content: space-between;
 }
 
-.reviews-title {
+.review-card {
-    font-weight: 600;
+  width: 352px;
-    font-size: 22px;
+  margin: 0px 20px 32px 0px;
-    line-height: 145%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
+@media (max-width: 768px) {
   .review-card {
-    width: 100%;
+    width: 336px;
-    height: fit-content;
+    margin: 0px 8px 32px 0px;
-    margin: 0px 16px 32px;
+  }
-    padding: 16px;
+}
+
+@media (max-width: 375px) {
+  .review-card {
+    width: 312px;
+  }
 }
 
 .review-card-footer {
-    width: 100%;
   display: flex;
+  margin-top: 20px;
+  justify-content: space-between;
 }
 
 .review-content {
-    font-size: 15px;
+  padding: 24px;
-    line-height: 135%;
+  flex: 1;
+}
+
+.review-link {
+  margin: 48px 0px 16px;
+}
+
+.submit-review {
+  width: 100px;
+}
+
+.rating .star-click {
+  --star-fill: #74808B;
 }
 
 div.custom-checkbox>label>input {
@@ -471,7 +488,6 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-card-wide {
-    width: 1120px;
   height: 248px;
   display: flex;
   flex-direction: row;
@@ -480,6 +496,22 @@ div.custom-checkbox>label>input:checked+img {
   border-radius: 12px;
 }
 
+@media (max-width: 768px) {
+  .course-card-wide {
+    height: 535px;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-card-wide {
+    height: 572px;
+    padding: 40px 24px 40px;
+    border-radius: 0px;
+    align-items: center;
+  }
+}
+
 .course-image-wide {
   width: 352px;
   height: 200px;
@@ -488,8 +520,43 @@ div.custom-checkbox>label>input:checked+img {
   border-radius: 5px;
 }
 
+@media (max-width: 768px) {
+  .course-image-wide {
+    width: 640px;
+    height: 320px;
+    flex-direction: column;
+    background-size: 640px 320px;
+    margin: 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-image-wide {
+    width: 312px;
+    height: 216px;
+    background-size: 312px 216px;
+  }
+}
+
 .course-home-page {
-    padding: 80px;
+  padding: 0px 0px 80px;
+  display: flex;
+  flex-direction: column;
+  width: 1120px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .course-home-page {
+  padding: 0px;
+  width: 688px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-home-page {
+  width: 100%;
+  }
 }
 
 .course-card-wide-content {
@@ -506,42 +573,332 @@ div.custom-checkbox>label>input:checked+img {
   margin-bottom: 8px;
 }
 
+@media (max-width: 768px) {
+  .course-card-wide-title {
+    width: 632px;
+    margin-top: 24px;
+    font-size: 36px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-card-wide-title {
+    width: 264px;
+    margin-top: 16px;
+    font-size: 28px;
+  }
+}
+
 .course-card-wide-intro {
   font-size: 16px;
   line-height: 172%;
   letter-spacing: -0.011em;
-    color: #4C5A67;
   width: 688px;
   height: 80px;
   margin-bottom: 16px;
 }
 
+
+@media (max-width: 768px) {
+  .course-card-wide-intro {
+    width: 632px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-card-wide-intro {
+    width: 264px;
+  }
+}
+
 .wide-button {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
   border-radius: 6px;
-    padding: 12px 0px 12px 24px;
+  padding: 12px;
   margin-right: 16px;
+  height: 48px;
+  cursor: pointer;
+  width: 190px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.start-learning {
+@media (max-width: 375px) {
-    background: var(--primary-color);
+  .wide-button {
-    width: 185px;
+    width: 264px;
-    height: 48px;
+  }
+}
+
+.is-primary:hover {
+  text-decoration: none;
   color: #FFFFFF;
 }
 
+.course-home-outline {
+  width: 832px;
+}
+
+@media (max-width: 768px) {
+  .course-home-outline {
+    width: 424px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-home-outline {
+    width: 312px;
+  }
+}
+
+.small-title {
+  letter-spacing: -0.011em;
+}
+
+.chapter-title {
+  font-weight: bold;
+  margin: 0px 5px 16px;
+  cursor: pointer;
+}
+
+.chapter-description {
+  height: fit-content;
+}
+
+.chapter-icon {
+  margin-right: 12px;
+}
+
+.course-outline-instructor-parent {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 375px) {
+  .course-outline-instructor-parent {
+    flex-direction: column;
+    padding: 0px 24px 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .course-home-mentors {
+    padding: 0px 24px 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .reviews-parent {
+    padding: 0px 24px 0px;
+  }
+}
+
+.lesson-info {
+  font-size: 16px;
+  line-height: 250%;
+  letter-spacing: -0.011em;
+  margin-bottom: 2px;
+}
+
+.chapter-content {
+  margin: 4px 0px 0px 28px;
+}
+
+.coure-outline {
+  background: #FFFFFF;
+  border-radius: 12px;
+  padding: 16px 12px 16px;
+}
+
+.lessons {
+  margin: 12px 0px 16px;
+}
+
 .video-preview {
   background: #FFFFFF;
   width: 234px;
-    height: 48px;
+}
+
+@media (max-width: 375px) {
+  .video-preview {
+    width: 264px;
+    margin-top: 16px;
+  }
 }
 
 .course-buttons {
   display: flex;
 }
 
-* {
+@media (max-width: 375px) {
-    outline: 1px solid #f00 !important;
+  .course-buttons {
-    opacity: 1 !important;
+    flex-direction: column;
-    visibility: visible !important;
+  }
+}
+
+.member-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0px 16px;
+}
+
+.member-card-large {
+  width: 256px;
+  height: 188px;
+}
+
+@media (max-width: 768px) {
+  .member-card-large {
+    width: 248px;
+  }
+}
+
+@media (max-width: 375px) {
+  .member-card-large {
+    width: 312px;
+  }
+}
+
+.member-card-title {
+  margin: 12px 0px 4px;
+}
+
+.member-card-large .member-card-title {
+  font-weight: bold;
+}
+
+.member-card-medium {
+  width: 160px;
+  height: 140px;
+  margin: 0px 20px 32px 0px;
+}
+
+@media (max-width: 768px) {
+  .member-card-medium {
+    width: 216px;
+    height: 140px;
+    margin: 0px 12px 16px 0px;
+  }
+}
+
+@media (max-width: 375px) {
+  .member-card-medium {
+    width: 144px;
+    height: 140px;
+  }
+}
+
+.course-home-headings {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 146%;
+  letter-spacing: -0.0175em;
+  color: #192734;
+  margin: 48px 0px 16px;
+}
+
+.modal-headings {
+  margin: 0;
+}
+
+.avatar-xl {
+  width: 88px;
+  height: 88px;
+}
+
+.description-card {
+  padding: 24px;
+  width: 832px;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .description-card {
+    width: 424px;
+  }
+}
+
+@media (max-width: 375px) {
+  .description-card {
+    width: 312px;
+  }
+}
+
+.overview-card {
+  padding: 8px 24px 8px;
+  width: 256px;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .overview-card {
+    width: 248px;
+  }
+}
+
+@media (max-width: 375px) {
+  .overview-card {
+    width: 312px;
+  }
+}
+
+.mentors-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.overtime-item {
+  margin: 16px 0px 16px;
+}
+
+.view-all-mentors {
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+  cursor: pointer;
+}
+
+.flex-one {
+  flex: 1;
+}
+
+.preview-modal {
+  padding: 0 !important;
+}
+
+.preview-modal .modal-dialog {
+  width: 90%;
+  height: 100%;
+  max-width: none;
+}
+
+.preview-modal .modal-content {
+  height: 90%;
+}
+
+.video-iframe {
+  width: 100%;
+  height: 90%;
+}
+
+.review-modal .modal-dialog {
+  width: 50%;
+  height: 70%;
+}
+
+.error-field {
+  color: red;
+}
+
+.question {
+  flex-direction: column;
+}
+
+.dark-links {
+  color: inherit;
+}
+
+.breadcrum {
+  margin: 16px 10px 16px;
 }

community/www/courses/course.html

@@ -8,7 +8,27 @@
 <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 {% endblock %}
 {% block content %}
-  <div class="common-page-style course-home-page">
+<div class="common-page-style">
+  <div class="course-home-page">
+    {{ BreadCrum(course) }}
+    {{ CourseCardWide(course) }}
+    {{ CourseOutlineAndCreator(course) }}
+    {{ Mentors(course) }}
+    {{ CourseDescriptionAndOverview(course) }}
+    {{ widgets.Reviews(course=course, membership=membership) }}
+  </div>
+</div>
+{% endblock %}
+
+{% macro BreadCrum(course) %}
+<div class="course-instructor breadcrum">
+  <a class="dark-links" href="/courses">All Courses</a> > <span class="muted-text">{{ course.title }}</span>
+</div>
+{% endmacro %}
+
+<!-- Course Card -->
+
+{% macro CourseCardWide(course) %}
 <div class="common-card-style course-card-wide">
   <div class="course-image-wide" style="background-image: url({{ course.image }});">
     <div class="course-tags">
@@ -25,38 +45,125 @@
       {{ course.short_introduction }}
     </div>
     <div class="course-buttons">
-          <div class="wide-button start-learning">
+      {% if not course.disable_self_learning and not membership %}
+      <div class="wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
         Start Learning
-            <img class="" src="/assets/community/icons/white-arrow.svg"/>
+        <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
       </div>
+      {% endif %}
+      {% if membership %}
+      {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+      membership.current_lesson
+      else '1.1' %}
+      <a class="wide-button is-primary" id="continue-learning"
+        href="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
+        Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
+      </a>
+      {% endif %}
+      {% if course.video_link %}
       <div class="wide-button video-preview">
         Watch Video Preview
-            <img class="" src="/assets/community/icons/play.svg"/>
+        <img class="ml-2" src="/assets/community/images/play.png" />
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+<div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+  aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="course-home-headings modal-headings">{{ course.title }}</div>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <iframe class="video-iframe" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen src="{{ course.video_link }}"></iframe>
       </div>
     </div>
   </div>
 </div>
+{% endmacro%}
+
+<!-- Course Outline and Creator -->
+
+{% macro CourseOutlineAndCreator(course) %}
+<div class="course-outline-instructor-parent">
   <div class="course-home-outline">
     {{ widgets.CourseOutline(course=course, show_link=membership) }}
   </div>
+  <div class="">
+    <div class="course-home-headings">
+      Creator
+    </div>
+    {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
+  </div>
+</div>
+{% endmacro %}
+
+<!-- Mentors -->
+
+{% macro Mentors(course) %}
+{% if course.get_mentors() | length %}
+<div class="course-home-mentors">
+  <div class="course-home-headings">
+    Mentors
+  </div>
+  <div class="mentors-section">
+    {% for mentor in course.get_mentors() %}
+    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
+    {% endfor %}
+    <div class="view-all-mentors">
+      <span class="card-divider flex-one"></span>
+      <span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
+          src="/assets/community/icons/down-arrow.svg" /></span>
+      <span class="card-divider flex-one"></span>
+    </div>
   </div>
-{% endblock %}
-{% macro CourseVideo(course) %}
-  {% if course.video_link %}
-    <div class="preview-video">
-      <iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
 </div>
 {% endif %}
 {% endmacro %}
-{% macro CourseDescription(course) %}
-  <div class="mt-5">
-    <h3>Course Description</h3>
 
-    <div class="course-description text-justify">
+<!-- Course Description and Overview -->
+
+{% macro CourseDescriptionAndOverview(course) %}
+<div class="course-outline-instructor-parent">
+  <div>
+    <div class="course-home-headings">
+      Course Description
+    </div>
+    <div class="common-card-style description-card small-title">
       {{ frappe.utils.md_to_html(course.description) }}
     </div>
   </div>
+  <div>
+    <div class="course-home-headings">
+      Overview
+    </div>
+    <div class="common-card-style overview-card small-title">
+      {% if course.get_students() | length %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {{ course.get_students() | length }} Enrolled
+      </div>
+      {% endif %}
+      {% set avg_rating = course.get_average_rating() %}
+      {% if avg_rating %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
+        {{ avg_rating }} Rating
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
 {% endmacro %}
+
 {% macro BatchSection(course) %}
 <div class="row">
   <div class="col-lg-8 col-md-12">
@@ -91,6 +198,7 @@
 </div>
 {% endif %}
 {% endmacro %}
+
 {% macro BatchSectionForStudents(course, upcoming_batches) %}
 {% if upcoming_batches %}
 <div class="mt-5">

community/www/courses/course.js

@@ -1,5 +1,51 @@
 frappe.ready(() => {
   if (frappe.session.user != "Guest") {
+    check_mentor_request();
+  }
+
+  expand_the_first_chapter();
+
+  hide_wrapped_mentor_cards();
+
+  $("#apply-now").click((e) => {
+    create_mentor_request(e);
+  });
+
+  $("#cancel-request").click((e) => {
+    cancel_mentor_request(e);
+  });
+
+  $(".join-batch").click((e) => {
+    join_course(e)
+  });
+
+  $(".view-all-mentors").click((e) => {
+    view_all_mentors(e);
+  });
+
+  $(".video-preview").click((e) => {
+    show_video_dialog(e);
+  });
+
+  $(".review-link").click((e) => {
+    show_review_dialog(e);
+  });
+
+  $(".chapter-title").click((e) => {
+    rotate_chapter_icon(e);
+  });
+
+  $(".icon-rating").click((e) => {
+    highlight_rating(e);
+  });
+
+  $("#submit-review").click((e) => {
+    submit_review(e);
+  })
+
+})
+
+var check_mentor_request = () => {
   frappe.call({
     'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
     'args': {
@@ -14,7 +60,26 @@ frappe.ready(() => {
   })
 }
 
-  $("#apply-now").click((e) => {
+var hide_wrapped_mentor_cards = () => {
+  var offset_top_prev;
+
+  $('.member-card-medium').each(function () {
+    var offset_top = $(this).offset().top;
+    if (offset_top > offset_top_prev) {
+      $(this).addClass('wrapped').slideUp("fast");
+    }
+    if (!offset_top_prev) {
+      offset_top_prev = offset_top;
+    }
+
+  });
+
+  if ($(".wrapped").length < 1) {
+    $(".view-all-mentors").hide();
+  }
+}
+
+var create_mentor_request = (e) => {
   e.preventDefault();
   if (frappe.session.user == "Guest") {
     window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
@@ -32,9 +97,9 @@ frappe.ready(() => {
       }
     }
   })
-  })
+}
 
-  $("#cancel-request").click((e) => {
+var cancel_mentor_request = (e) => {
   e.preventDefault()
   frappe.call({
     "method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
@@ -48,9 +113,9 @@ frappe.ready(() => {
       }
     }
   })
-  })
+}
 
-  $(".join-batch").click((e) => {
+var join_course = (e) => {
   e.preventDefault();
   var course = $(e.currentTarget).attr("data-course")
   if (frappe.session.user == "Guest") {
@@ -74,5 +139,85 @@ frappe.ready(() => {
       }
     }
   })
+}
+
+var view_all_mentors = (e) => {
+  $(".wrapped").each((i, element) => {
+    $(element).slideToggle("slow");
   })
+  var text_element = $(".view-all-mentors .course-instructor .all-mentors-text");
+  var text = text_element.text() == "View all mentors" ? "View less" : "View all mentors";
+  text_element.text(text);
+
+  if ($(".mentor-icon").css("transform") == "none") {
+    $(".mentor-icon").css("transform", "rotate(180deg)");
+  } else {
+    $(".mentor-icon").css("transform", "");
+  }
+}
+
+var show_video_dialog = (e) => {
+  e.preventDefault();
+  $("#video-modal").modal("show");
+}
+
+var show_review_dialog = (e) => {
+  e.preventDefault();
+  $("#review-modal").modal("show");
+}
+
+var rotate_chapter_icon = (e) => {
+  var icon = $(e.currentTarget).children(".chapter-icon");
+  if (icon.css("transform") == "none") {
+    icon.css("transform", "rotate(90deg)");
+  } else {
+    icon.css("transform", "none");
+  }
+}
+
+var expand_the_first_chapter = () => {
+  var elements = $(".collapse");
+  elements.each((i, elem) => {
+    if (i <= 1) {
+      $(elem).addClass("show");
+      $(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
+    }
+  });
+}
+
+var highlight_rating = (e) => {
+  var rating = $(e.currentTarget).attr("data-rating");
+  $(".icon-rating").removeClass("star-click");
+  $(".icon-rating").each((i, elem) => {
+    if (i <= rating-1) {
+      $(elem).addClass("star-click");
+    }
   })
+}
+
+var submit_review = (e) => {
+  e.preventDefault();
+  var rating = $(".rating-field").children(".star-click").length;
+  var review = $(".review-field").val();
+  if (!review || !rating) {
+    $(".error-field").text("Both Rating and Review are required.");
+    return;
+  }
+  frappe.call({
+    method: "community.lms.doctype.lms_course_review.lms_course_review.submit_review",
+    args: {
+      "rating": rating,
+      "review": review,
+      "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
+    },
+    callback: (data) => {
+      if (data.message == "OK") {
+        $(".review-modal").modal("hide");
+        frappe.msgprint("Thanks for providing your feedback!");
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    }
+  })
+}

community/www/courses/index.html

@@ -36,7 +36,7 @@
     </div>
   </div>
   <div class="course-card-content">
-    <div class="course-card-meta">
+    <div class="course-card-meta muted-text">
       {% if course.get_chapters() | length %}
       <span>
         {{ course.get_chapters() | length }} Chapters