feat: course home

community/lms/widgets/ChapterTeaser.html

@@ -1,42 +1,33 @@
 <div>
-  <a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
-    <img class="" src="/assets/community/icons/side-arrow.svg"/>
-    <span class="chapter-title">
-      {{ chapter.title }}
-    </span>
-  </a>
+  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
+    aria-expanded="false">
+    <img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
+    {{ index }}. {{ chapter.title }}
+  </div>
   <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 }}">
-              {{ loop.index }}.
-              {{ lesson.title }}</a>
-          {% else %}
-            <div title="This lesson is not available for preview">
-              <span class="">
-                {{ loop.index }}.
-                {{ lesson.title }}
-              </span>
-              <i class="fa fa-lock ml-2"></i>
-            </div>
-          {% endif %}
+      <div class="lesson-info">
+        {% if show_link 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>
+        {% else %}
+        <div title="This lesson is not available for preview">
+          <span class="dark-links">
+            {{ lesson.title }}
+          </span>
+          <i class="fa fa-lock ml-2"></i>
         </div>
+        {% endif %}
+      </div>
       {% endfor %}
     </div>
   </div>
 </div>
-<script>
-  frappe.ready(() => {
-    var elements = $(".collapse")
-    elements.each((i, elem) => {
-      if (i <= 5) {
-        $(elem).addClass("show")
-      }
-    })
-  })
-</script>
+{% if index != course.get_chapters() | length %}
+<div class="card-divider"></div>
+{% endif %}

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)}}
+    {{ 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-content"> {{ review.review }} </div>
-      <div class="card-divider"></div>
+    <div class="review-card">
+      <div class="common-card-style review-content small-title"> {{ review.review }} </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>
 
-
-
-<!-- Modal -->
-<div class="modal fade" id="review-modal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade review-modal" id="review-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">
-        <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>
-        <button type="button" class="btn btn-primary">Save changes</button>
+        <div class="wide-button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
       </div>
     </div>
   </div>
 </div>
-<script>
-
-  frappe.ready(() => {
-    frappe.provide('frappe.ui');
-    console.log(frappe.ui)
-  })
-
-</script>
+{% endif %}