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 %}