fix: structure of course home page

school/lms/md.py

@@ -105,7 +105,7 @@ def sanitize_html(html, macro):
     any broken tags. This makes sures that all those things are fixed
     before passing to the etree parser.
     """
-    soup = BeautifulSoup(html, features="lxml")
+    soup = BeautifulSoup(html, features="html5lib")
     nodes = soup.body.children
     classname = ""
     if macro == "YouTubeVideo":

school/www/courses/course.html

@@ -10,9 +10,8 @@
   <div class="container course-home-page">
     {{ widgets.BreadCrumb(course=course) }}
     {{ CourseCardWide(course) }}
-    {{ CourseOutlineAndCreator(course) }}
+    {{ CourseSections(course) }}
     {{ Mentors(course) }}
-    {{ CourseDescriptionAndOverview(course) }}
     {{ widgets.Reviews(course=course, membership=membership) }}
   </div>
 </div>
@@ -111,19 +110,31 @@
 
 <!-- Course Outline and Creator -->
 
-{% macro CourseOutlineAndCreator(course) %}
+{% macro CourseSections(course) %}
-{% set certificate = course.is_certified() %}
 <div class="course-outline-instructor-parent">
   <div class="course-home-outline">
     {{ widgets.CourseOutline(course=course, membership=membership) }}
+    {{ Description(course) }}
   </div>
   <div class="course-creator-progress-parent">
+    {{ CreatorSection(course) }}
+    {{ Progress(course) }}
+    {{ Overview(course) }}
+  </div>
+</div>
+{% endmacro %}
+
+{% macro CreatorSection(course) %}
 <div class="course-creator-section">
   <div class="course-home-headings">
     Creator
   </div>
   {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
 </div>
+{% endmacro %}
+
+{% macro Progress(course) %}
+{% set certificate = course.is_certified() %}
 {% set progress = frappe.utils.cint(membership.progress) %}
 {% if progress %}
 <div class="course-progress-section">
@@ -159,10 +170,44 @@
   </div>
 </div>
 {% endif %}
+{% endmacro %}
+
+{% macro Description(course) %}
+<div class="course-description-section">
+  <div class="course-home-headings">
+    Course Description
+  </div>
+  <div class="common-card-style description-card">
+    {{ frappe.utils.md_to_html(course.description) }}
   </div>
 </div>
 {% endmacro %}
 
+{% macro Overview(course) %}
+{% set avg_rating = course.get_average_rating() %}
+{% if course.get_students() | length or avg_rating %}
+<div class="course-overview-section">
+  <div class="course-home-headings">
+    Overview
+  </div>
+  <div class="common-card-style overview-card small-title">
+    {% if course.get_students() | length %}
+    <div class="overview-item">
+      <img class="icon-background mr-1" src="/assets/school/icons/user.svg" />
+      {{ course.get_students() | length }} Enrolled
+    </div>
+    {% endif %}
+    {% if avg_rating %}
+    <div class="overview-item">
+      <img class="icon-background mr-1" src="/assets/school/icons/rating.svg" />
+      {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} Rating
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endif %}
+{% endmacro %}
+
 <!-- Mentors -->
 
 {% macro Mentors(course) %}
@@ -185,40 +230,3 @@
 </div>
 {% endif %}
 {% endmacro %}
-
-<!-- Course Description and Overview -->
-
-{% macro CourseDescriptionAndOverview(course) %}
-<div class="course-outline-instructor-parent">
-  <div class="course-description-section">
-    <div class="course-home-headings">
-      Course Description
-    </div>
-    <div class="common-card-style description-card">
-      {{ 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 class="course-overview-section">
-    <div class="course-home-headings">
-      Overview
-    </div>
-    <div class="common-card-style overview-card small-title">
-      {% if course.get_students() | length %}
-      <div class="overview-item">
-        <img class="icon-background mr-1" src="/assets/school/icons/user.svg" />
-        {{ course.get_students() | length }} Enrolled
-      </div>
-      {% endif %}
-      {% if avg_rating %}
-      <div class="overview-item">
-        <img class="icon-background mr-1" src="/assets/school/icons/rating.svg" />
-        {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} Rating
-      </div>
-      {% endif %}
-    </div>
-  </div>
-  {% endif %}
-</div>
-{% endmacro %}