From 0ed5309b97d3bc21016bd2451fdb8cc34e652779 Mon Sep 17 00:00:00 2001
From: pateljannat <pateljannat2308@gmail.com>
Date: Tue, 6 Jul 2021 20:51:20 +0530
Subject: [PATCH] feat: course details page structure

---
 .../lms_batch_membership.json                 |  5 +-
 community/lms/widgets/BreadCrumb.html         |  1 -
 community/lms/widgets/ChapterTeaser.html      | 24 +++++-
 community/public/css/style.css                | 76 +++++++++++++------
 community/public/css/style.less               |  4 -
 community/public/icons/left-arrow.svg         |  3 +
 community/public/icons/side-arrow-white.svg   |  3 +
 community/www/batch/learn.html                | 71 ++++++++++-------
 community/www/courses/course.html             |  6 +-
 community/www/courses/course.js               | 12 ---
 10 files changed, 129 insertions(+), 76 deletions(-)
 create mode 100644 community/public/icons/left-arrow.svg
 create mode 100644 community/public/icons/side-arrow-white.svg

diff --git a/community/lms/doctype/lms_batch_membership/lms_batch_membership.json b/community/lms/doctype/lms_batch_membership/lms_batch_membership.json
index ba43cd69..f7f1f2dc 100644
--- a/community/lms/doctype/lms_batch_membership/lms_batch_membership.json
+++ b/community/lms/doctype/lms_batch_membership/lms_batch_membership.json
@@ -65,8 +65,7 @@
    "fieldname": "course",
    "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "Course",
-   "read_only": 1
+   "label": "Course"
   },
   {
    "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",
diff --git a/community/lms/widgets/BreadCrumb.html b/community/lms/widgets/BreadCrumb.html
index 549909d2..49da5c2b 100644
--- a/community/lms/widgets/BreadCrumb.html
+++ b/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">
diff --git a/community/lms/widgets/ChapterTeaser.html b/community/lms/widgets/ChapterTeaser.html
index 0d08b078..e813f03e 100644
--- a/community/lms/widgets/ChapterTeaser.html
+++ b/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"
-    aria-expanded="false">
+  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}"
+    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>
diff --git a/community/public/css/style.css b/community/public/css/style.css
index 0ca22787..13e22076 100644
--- a/community/public/css/style.css
+++ b/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;
 }
@@ -548,14 +543,14 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 768px) {
   .course-home-page {
-  padding: 0px;
-  width: 688px;
+    padding: 0px;
+    width: 688px;
   }
 }
 
 @media (max-width: 375px) {
   .course-home-page {
-  width: 100%;
+    width: 100%;
   }
 }
 
@@ -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;
+}
diff --git a/community/public/css/style.less b/community/public/css/style.less
index d7fdbb1c..b768f6da 100644
--- a/community/public/css/style.less
+++ b/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;
diff --git a/community/public/icons/left-arrow.svg b/community/public/icons/left-arrow.svg
new file mode 100644
index 00000000..9423d2d3
--- /dev/null
+++ b/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>
diff --git a/community/public/icons/side-arrow-white.svg b/community/public/icons/side-arrow-white.svg
new file mode 100644
index 00000000..f9c7cc2a
--- /dev/null
+++ b/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>
diff --git a/community/www/batch/learn.html b/community/www/batch/learn.html
index 2e9c56ac..945f7f7e 100644
--- a/community/www/batch/learn.html
+++ b/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 %}
 
diff --git a/community/www/courses/course.html b/community/www/courses/course.html
index 9d99c556..32afa4b6 100644
--- a/community/www/courses/course.html
+++ b/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 %}
 
diff --git a/community/www/courses/course.js b/community/www/courses/course.js
index fb2f3ae5..df100e71 100644
--- a/community/www/courses/course.js
+++ b/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");