feat: course details page structure

community/www/batch/learn.html

@@ -21,45 +21,60 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div>
-
-  </div>
-</div>
-<div class="container">
-  {{ widgets.BatchTabs(course=course, membership=membership) }}
-  <div class="lesson-page">
-
-    <h2 class="title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}" data-lesson="{{ lesson.name }}"
-      data-course="{{ course.name }}" {% if membership%} data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</h2>
-
-    {% if membership or lesson.include_in_preview %}
-    {{ lesson.render_html() }}
-    {% else %}
-    <div class="no-preview-message">
-      <span>This lesson is not available for Preview. Please join the course to access this lesson.</span>
-      <a href="/courses/{{ course.name }}">Checkout Course Details.</a>
+  <div class="course-home-page">
+    {{ widgets.Breadcrumb(course=course, lesson=lesson) }}
+    <div class="course-content-parent">
+      <div class="course-details-outline">
+        {{ widgets.CourseOutline(course=course, show_link=membership) }}
+      </div>
+      <div class="lesson-pagination-parent">
+        {{ LessonContent(lesson) }}
+        {% if membership %}
+        {{ pagination(prev_chap, prev_url, next_chap, next_url) }}
+        {% endif %}
+      </div>
     </div>
-    {% endif %}
-    {% if membership %}
-    {{ pagination(prev_chap, prev_url, next_chap, next_url) }}
-    {% endif %}
   </div>
 </div>
 {% endblock %}
 
+{% macro LessonContent(lesson) %}
+<div class="lesson-content">
+  <div class="course-home-headings title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}"
+    data-lesson="{{ lesson.name }}" data-course="{{ course.name }}" {% if membership%}
+    data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</div>
+
+  {% if membership or lesson.include_in_preview %}
+  <div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
+  {% else %}
+  <div class="no-preview-message">
+    <span>This lesson is not available for Preview. Please join the course to access this lesson.</span>
+    <a href="/courses/{{ course.name }}">Checkout Course Details.</a>
+  </div>
+  {% endif %}
+</div>
+{% endmacro %}
+
 {% macro pagination(prev_chap, prev_url, next_chap, next_url) %}
 <div class="lesson-pagination">
+
   {% if prev_url %}
-  <span>
-    Prev: <a href="{{prev_url}}">{{prev_chap}}</a>
-  </span>
+  <a class="wide-button is-secondary dark-links" href="{{ prev_url }}">
+    <img class="mr-2" src="/assets/community/icons/left-arrow.svg">
+    Prev
+  </a>
   {% endif %}
+
+  <div class="wide-button is-primary">
+    Mark as Complete
+  </div>
+
   {% if next_url %}
-  <span class="pull-right">
-    Next: <a href="{{next_url}}">{{next_chap}}</a>
-  </span>
+  <a class="wide-button is-secondary dark-links" href="{{ next_url }}">
+    Next
+    <img class="ml-2" src="/assets/community/icons/side-arrow.svg">
+  </a>
   {% endif %}
-  <div style="clear: both;"></div>
 </div>
 {% endmacro %}
 

community/www/courses/course.html

@@ -55,7 +55,7 @@
       </a>
       {% endif %}
       {% if course.video_link %}
-      <div class="wide-button video-preview">
+      <div class="wide-button is-secondary video-preview">
         Watch Video Preview
         <img class="ml-2" src="/assets/community/images/play.png" />
       </div>
@@ -135,6 +135,8 @@
       {{ frappe.utils.md_to_html(course.description) }}
     </div>
   </div>
+  {% set avg_rating = course.get_average_rating() %}
+  {% if course.get_students() | length or avg_rating %}
   <div>
     <div class="course-home-headings">
       Overview
@@ -146,7 +148,6 @@
         {{ 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" />
@@ -155,6 +156,7 @@
       {% endif %}
     </div>
   </div>
+  {% endif %}
 </div>
 {% endmacro %}
 

community/www/courses/course.js

@@ -3,8 +3,6 @@ frappe.ready(() => {
     check_mentor_request();
   }
 
-  expand_the_first_chapter();
-
   hide_wrapped_mentor_cards();
 
   $("#apply-now").click((e) => {
@@ -175,16 +173,6 @@ var rotate_chapter_icon = (e) => {
   }
 }
 
-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");