From 6c64181bf4061cecd1a71b02aa946116735b806f Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 22 Feb 2022 11:15:02 +0530
Subject: [PATCH] fix: overlay position when related courses

---
 school/lms/widgets/CourseOutline.html |  2 +-
 school/public/css/style.css           | 33 +++++++++++++--------------
 school/www/batch/learn.py             |  1 -
 school/www/courses/course.html        | 32 ++++++++++++++------------
 school/www/courses/course.js          | 30 ++++++++++++++++++++++++
 5 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/school/lms/widgets/CourseOutline.html b/school/lms/widgets/CourseOutline.html
index 970de9ed..e4144d62 100644
--- a/school/lms/widgets/CourseOutline.html
+++ b/school/lms/widgets/CourseOutline.html
@@ -4,7 +4,7 @@
     {{ _("Course Content") }}
   </div>
   {% for chapter in get_chapters(course.name) %}
-  <div class="mb-2">
+  <div class="">
     <div class="chapter-title" data-target="#{{ get_slugified_chapter_title(chapter.title) }}"
       data-toggle="collapse" aria-expanded="false">
       <img class="chapter-icon" src="/assets/school/icons/chevron-right.svg">
diff --git a/school/public/css/style.css b/school/public/css/style.css
index e992eb61..0e3c4530 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -475,7 +475,7 @@ input[type=checkbox] {
 }
 
 .chapter-icon {
-  margin: 0 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .course-outline-instructor-parent {
@@ -539,14 +539,12 @@ input[type=checkbox] {
 
 .lesson-info {
   font-size: 16px;
-  line-height: 250%;
   letter-spacing: -0.011em;
-  margin-top: 0.5rem;
 }
 
 .lesson-links {
   display: flex;
-  padding: 0 1rem;
+  padding: 0.75rem 1rem;
   color: inherit;
 }
 
@@ -557,16 +555,14 @@ input[type=checkbox] {
   border-radius: var(--border-radius-md);
 }
 
-.course-content-parent .lesson-links {
-  padding: 0.5rem 1rem;
-  margin-bottom: 0.75rem;
-  font-size: 0.85rem;
-  line-height: 200%;
+.course-content-parent .chapter-title {
+  font-size: var(--text-md);
 }
 
-.chapter-content {
-  margin: 0;
-  margin-left: .875rem;
+.course-content-parent .lesson-links {
+  padding: 0.5rem 1rem;
+  font-size: var(--text-md);
+  line-height: 200%;
 }
 
 .course-outline {
@@ -575,7 +571,7 @@ input[type=checkbox] {
 }
 
 .lessons {
-  margin-left: 2rem;
+  margin-left: 2.5rem;
 }
 
 .course-buttons {
@@ -1376,6 +1372,8 @@ pre {
 .related-courses {
   background: var(--gray-50);
   padding: 5rem 0;
+  position: relative;
+  z-index: 5;
 }
 
 .carousel-indicators {
@@ -1570,10 +1568,11 @@ pre {
   box-shadow: var(--shadow-sm);
   overflow: auto;
   width: fit-content;
-  position: absolute;
+  position: fixed;
   top: 40%;
   right: 7%;
   max-width: 400px;
+  z-index: 4;
 }
 
 @media (max-width: 768px) {
@@ -1627,8 +1626,8 @@ pre {
 .overlay-student-count {
   display: flex;
   align-items: center;
-  justify-content: center;
   margin-bottom: 1.5rem;
+  margin-top: 1rem;
 }
 
 .course-creators-card {
@@ -1712,6 +1711,6 @@ pre {
   background-color: var(--gray-600);
 }
 
-.body-content {
-
+.course-home-top-container {
+  position: relative;
 }
diff --git a/school/www/batch/learn.py b/school/www/batch/learn.py
index 29f27ebd..4c47ba53 100644
--- a/school/www/batch/learn.py
+++ b/school/www/batch/learn.py
@@ -37,7 +37,6 @@ def get_context(context):
         "lesson": context.lesson.name,
         "is_member": context.membership is not None
     }
-    print(context)
 
 def get_current_lesson_details(lesson_number, context):
     details_list = list(filter(lambda x: cstr(x.number) == lesson_number, context.lessons))
diff --git a/school/www/courses/course.html b/school/www/courses/course.html
index 6412e64a..ee6a2d21 100644
--- a/school/www/courses/course.html
+++ b/school/www/courses/course.html
@@ -6,13 +6,15 @@
 {% endblock %}
 {% block content %}
 <div class="common-page-style pt-0">
-  {{ CourseHomeHeader(course) }}
-  <div class="container course-home-page">
-    <div class="course-body-container">
-      {{ Description(course) }}
-      {{ widgets.CourseOutline(course=course, membership=membership) }}
-      {{ CourseCreator(course) }}
-      {{ widgets.Reviews(course=course, membership=membership) }}
+  <div class="course-home-top-container">
+    {{ CourseHomeHeader(course) }}
+    {{ CourseHeaderOverlay(course) }}
+    <div class="container course-home-page">
+      <div class="course-body-container">
+        {{ Description(course) }}
+        {{ widgets.CourseOutline(course=course, membership=membership) }}
+        {{ widgets.Reviews(course=course, membership=membership) }}
+      </div>
     </div>
   </div>
   {{ RelatedCourses(course) }}
@@ -26,7 +28,6 @@
   <div class="container pt-10 pb-10">
     {{ BreadCrumb(course) }}
     {{ CourseCardWide(course) }}
-    {{ CourseHeaderOverlay(course) }}
   </div>
 </div>
 
@@ -125,6 +126,14 @@
       You have opted to be notified for this course. You will receive an email when the course becomes available.
     </div>
 
+    <div class="course-home-headings"> {{ course.title }} </div>
+    {% if get_lessons(course.name) | length %}
+    <div class="mt-3">
+      <img class="mr-3" src="/assets/school/icons/book.svg">
+      {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
+    </div>
+    {% endif %}
+
     {% if get_students(course.name) | length %}
     {% set initial_members = get_initial_members(course.name) %}
     <div class="overlay-student-count">
@@ -188,13 +197,6 @@
     </div>
     {% endif %}
 
-    <div class="overlay-heading"> {{ _("Course Include:") }} </div>
-    {% if get_lessons(course.name) | length %}
-    <div class="mt-3">
-      <img class="mr-3" src="/assets/school/icons/book.svg">
-      {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
-    </div>
-    {% endif %}
   </div>
 
 </div>
diff --git a/school/www/courses/course.js b/school/www/courses/course.js
index e5f8c8ab..80068c4a 100644
--- a/school/www/courses/course.js
+++ b/school/www/courses/course.js
@@ -41,6 +41,12 @@ frappe.ready(() => {
     create_certificate(e);
   });
 
+  $(document).scroll(function() {
+    let timer;
+    clearTimeout(timer);
+    timer = setTimeout(() => { handle_overlay_display.apply(this, arguments); }, 500);
+  });
+
 })
 
 var check_mentor_request = () => {
@@ -226,3 +232,27 @@ const create_certificate = (e) => {
     }
   })
 };
+
+
+const element_not_in_viewport = (el) => {
+  const rect = el.getBoundingClientRect();
+  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
+}
+
+const handle_overlay_display = () => {
+  const element = $(".related-courses").length && $(".related-courses")[0];
+  if (element && element_not_in_viewport(element)) {
+    $(".course-overlay-card").css({
+      "position": "fixed",
+      "top": "30%",
+      "bottom": "inherit"
+    });
+  }
+  else if (element && !element_not_in_viewport(element)) {
+    $(".course-overlay-card").css({
+        "position": "absolute",
+        "top": "inherit",
+        "bottom": "5%"
+      });
+  }
+}