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,56 +110,102 @@
 
 <!-- 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">
-    <div class="course-creator-section">
+    {{ CreatorSection(course) }}
-      <div class="course-home-headings">
+    {{ Progress(course) }}
-        Creator
+    {{ Overview(course) }}
-      </div>
+  </div>
-      {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
+</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">
+  <div class="course-home-headings">
+    Your Progress
+  </div>
+  <div class="common-card-style progress-card">
+    <p class="small-title">
+      {% if progress != 100 %}
+      Great work so far!
+      {% else %}
+      Excellent work on completing this course 👏
+      {% endif %}
+    </p>
+    <p class="progress-text">
+      {% if progress != 100 %}
+      Challenge yourself to complete the lessons and grow professionally.
+      {% else %}
+      You have reached a new level in your journey to success!
+      {% endif %}
+    </p>
+    <div class="progress-percentage">
+      {{ frappe.utils.rounded(progress) }}%
     </div>
-    {% set progress = frappe.utils.cint(membership.progress) %}
+    <div class="progress">
-    {% if progress %}
+      <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
-    <div class="course-progress-section">
+        aria-valuemin="0" aria-valuemax="100"></div>
-      <div class="course-home-headings">
+    </div>
-        Your Progress
+    {% if certificate %}
-      </div>
+    <a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
-      <div class="common-card-style progress-card">
+      Certificate</a>
-        <p class="small-title">
+    {% endif %}
-          {% if progress != 100 %}
+  </div>
-          Great work so far!
+</div>
-          {% else %}
+{% endif %}
-          Excellent work on completing this course 👏
+{% endmacro %}
-          {% endif %}
+
-        </p>
+{% macro Description(course) %}
-        <p class="progress-text">
+<div class="course-description-section">
-          {% if progress != 100 %}
+  <div class="course-home-headings">
-          Challenge yourself to complete the lessons and grow professionally.
+    Course Description
-          {% else %}
+  </div>
-          You have reached a new level in your journey to success!
+  <div class="common-card-style description-card">
-          {% endif %}
+    {{ frappe.utils.md_to_html(course.description) }}
-        </p>
+  </div>
-        <div class="progress-percentage">
+</div>
-          {{ frappe.utils.rounded(progress) }}%
+{% endmacro %}
-        </div>
+
-        <div class="progress">
+{% macro Overview(course) %}
-          <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
+{% set avg_rating = course.get_average_rating() %}
-            aria-valuemin="0" aria-valuemax="100"></div>
+{% if course.get_students() | length or avg_rating %}
-        </div>
+<div class="course-overview-section">
-        {% if certificate %}
+  <div class="course-home-headings">
-        <a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
+    Overview
-          Certificate</a>
+  </div>
-        {% endif %}
+  <div class="common-card-style overview-card small-title">
-      </div>
+    {% 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 -->
@@ -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 %}