Merge pull request #305 from pateljannat/lesson-page-fixes

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">

school/public/css/style.css

@@ -467,10 +467,6 @@ input[type=checkbox] {
   align-items: center;
 }
 
-.chapter-title[aria-expanded="true"] {
-  background: var(--gray-100);
-}
-
 .chapter-description {
   margin: 0.75rem 3rem 1rem;
 }
@@ -480,7 +476,7 @@ input[type=checkbox] {
 }
 
 .chapter-icon {
-  margin: 0 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .course-outline-instructor-parent {
@@ -544,14 +540,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;
 }
 
@@ -562,16 +556,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 {
@@ -580,7 +572,7 @@ input[type=checkbox] {
 }
 
 .lessons {
-  margin-left: 2rem;
+  margin-left: 2.5rem;
 }
 
 .course-buttons {
@@ -1386,6 +1378,8 @@ pre {
 .related-courses {
   background: var(--gray-50);
   padding: 5rem 0;
+  position: relative;
+  z-index: 5;
 }
 
 .carousel-indicators {
@@ -1580,10 +1574,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) {
@@ -1637,8 +1632,8 @@ pre {
 .overlay-student-count {
   display: flex;
   align-items: center;
-  justify-content: center;
   margin-bottom: 1.5rem;
+  margin-top: 1rem;
 }
 
 .course-creators-card {
@@ -1722,6 +1717,10 @@ pre {
   background-color: var(--gray-600);
 }
 
+.course-home-top-container {
+  position: relative;
+}
+
 .question-header {
   display: flex;
   align-items: center;

school/templates/quiz.html

@@ -17,8 +17,6 @@
           </div>
         </div>
 
-
-
         {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
         {% for option in options %}
         {% if option %}
@@ -46,11 +44,11 @@
     </div>
     <div class="quiz-footer">
       <span class="font-weight-bold"> <span class="current-question">1</span> of {{ quiz.questions | length }}</span>
-      <button class="button pull-right is-default" id="check" disabled>Check</button>
-      <div class="button is-secondary hide" id="next">Next Question</div>
-      <div class="button is-secondary is-default hide" id="summary">Summary</div>
-      <small id="submission-message" class="font-weight-bold hide"> Please join the course to submit the Quiz.</small>
-      <div class="button is-secondary hide" id="try-again">Try Again</div>
+      <button class="button pull-right is-default" id="check" disabled>{{ _("Check") }}</button>
+      <div class="button is-secondary hide" id="next">{{ _("Next Question") }}</div>
+      <div class="button is-secondary is-default hide" id="summary">{{ _("Summary") }}</div>
+      <small id="submission-message" class="font-weight-bold hide"> {{ _("Please join the course to submit the Quiz.") }} </small>
+      <div class="button is-secondary hide" id="try-again">{{ _("Try Again") }}</div>
     </div>
     <h4 class="success-message"></h4>
     <h5 class="score text-muted"></h5>

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))

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>

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%"
+      });
+  }
+}