feat: course details page structure

community/lms/doctype/lms_batch_membership/lms_batch_membership.json

@@ -65,8 +65,7 @@
    "fieldname": "course",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "Course",
+   "label": "Course"
-   "read_only": 1
   },
   {
    "fieldname": "current_lesson",
@@ -84,7 +83,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-06-21 12:10:28.808803",
+ "modified": "2021-07-06 20:50:46.885325",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Batch Membership",

community/lms/widgets/BreadCrumb.html

@@ -1,7 +1,6 @@
 <div class="course-instructor breadcrumb">
   <a class="dark-links" href="/courses">All Courses</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
-
   {% if lesson %}
   <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">

community/lms/widgets/ChapterTeaser.html

@@ -1,6 +1,6 @@
 <div>
-  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
+  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}"
-    aria-expanded="false">
+    data-toggle="collapse" aria-expanded="false">
     <img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
     {{ index }}. {{ chapter.title }}
   </div>
@@ -12,7 +12,8 @@
       {% for lesson in chapter.get_lessons() %}
       <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}}"
+        <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 %}
@@ -31,3 +32,20 @@
 {% if index != course.get_chapters() | length %}
 <div class="card-divider"></div>
 {% endif %}
+
+<script>
+  frappe.ready(() => {
+    expand_the_first_chapter();
+  })
+
+  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)");
+      }
+    });
+  }
+
+</script>

community/public/css/style.css

@@ -399,11 +399,6 @@ input[type=checkbox] {
   }
 }
 
-.is-primary {
-  background: var(--primary-color);
-  color: #FFFFFF;
-}
-
 .button-links:hover {
   text-decoration: none;
 }
@@ -598,7 +593,6 @@ div.custom-checkbox>label>input:checked+img {
   margin-bottom: 16px;
 }
 
-
 @media (max-width: 768px) {
   .course-card-wide-intro {
     width: 632px;
@@ -614,14 +608,14 @@ div.custom-checkbox>label>input:checked+img {
 .wide-button {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
   border-radius: 6px;
-  padding: 12px;
+  padding: 12px 24px 12px;
   margin-right: 16px;
   height: 48px;
   cursor: pointer;
-  width: 190px;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: fit-content;
 }
 
 @media (max-width: 375px) {
@@ -630,6 +624,26 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
+.is-secondary {
+  background: #FFFFFF;
+}
+
+.is-secondary:hover {
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 375px) {
+  .is-secondary {
+    margin-top: 16px;
+  }
+}
+
+.is-primary {
+  background: var(--primary-color);
+  color: #FFFFFF;
+}
+
 .is-primary:hover {
   text-decoration: none;
   color: #FFFFFF;
@@ -714,18 +728,6 @@ div.custom-checkbox>label>input:checked+img {
   margin: 12px 0px 16px;
 }
 
-.video-preview {
-  background: #FFFFFF;
-  width: 234px;
-}
-
-@media (max-width: 375px) {
-  .video-preview {
-    width: 264px;
-    margin-top: 16px;
-  }
-}
-
 .course-buttons {
   display: flex;
 }
@@ -798,6 +800,10 @@ div.custom-checkbox>label>input:checked+img {
   margin: 48px 0px 16px;
 }
 
+.course-detail-headings {
+  margin: 0px;
+}
+
 .modal-headings {
   margin: 0;
 }
@@ -906,3 +912,27 @@ div.custom-checkbox>label>input:checked+img {
 .breadcrumb {
   margin: 16px 10px 16px;
 }
+
+.course-details-outline {
+  width: 352px;
+}
+
+.lesson-content-card {
+  padding: 24px;
+  flex-direction: column;
+}
+
+.lesson-content {
+  width: 736px;
+}
+
+.course-content-parent {
+  display: flex;
+  justify-content: space-between;
+}
+
+.lesson-pagination {
+  display: flex;
+  justify-content: space-between;
+  margin: 24px 0px 0px;
+}

community/public/css/style.less

@@ -272,10 +272,6 @@ section.lightgray {
   margin: 20px 0px;
 }
 
-.lesson-pagination {
-  clear: both;
-}
-
 .exercise-image svg {
   width: 200px;
   height: 200px;

community/public/icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33331 6.66663L0.666646 3.99996L3.33331 1.33329" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/public/icons/side-arrow-white.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666626 6.66675L3.33329 4.00008L0.666626 1.33341" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/www/batch/learn.html

@@ -21,45 +21,60 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div>
+  <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>
   </div>
 </div>
-<div class="container">
+{% endblock %}
-  {{ 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 }}"
+{% macro LessonContent(lesson) %}
-      data-course="{{ course.name }}" {% if membership%} data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</h2>
+<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 %}
-    {{ lesson.render_html() }}
+  <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 %}
-    {% if membership %}
-    {{ pagination(prev_chap, prev_url, next_chap, next_url) }}
-    {% endif %}
-  </div>
 </div>
-{% endblock %}
+{% endmacro %}
 
 {% macro pagination(prev_chap, prev_url, next_chap, next_url) %}
 <div class="lesson-pagination">
+
   {% if prev_url %}
-  <span>
+  <a class="wide-button is-secondary dark-links" href="{{ prev_url }}">
-    Prev: <a href="{{prev_url}}">{{prev_chap}}</a>
+    <img class="mr-2" src="/assets/community/icons/left-arrow.svg">
-  </span>
+    Prev
+  </a>
   {% endif %}
+
+  <div class="wide-button is-primary">
+    Mark as Complete
+  </div>
+
   {% if next_url %}
-  <span class="pull-right">
+  <a class="wide-button is-secondary dark-links" href="{{ next_url }}">
-    Next: <a href="{{next_url}}">{{next_chap}}</a>
+    Next
-  </span>
+    <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");