Merge branch 'main' of https://github.com/frappe/school into profile-redesign

school/www/batch/learn.html

@@ -33,34 +33,60 @@
 {% endblock %}
 
 {% macro LessonContent(lesson) %}
-{% set is_instructor = frappe.session.user == course.instructor %}
+{% set instructors = get_instructors(course.name) %}
+{% set is_instructor = is_instructor(course.name) %}
 <div class="lesson-content">
-  <div class="course-home-headings title
-  {% if membership %} is-member {% endif %}
-  {% if membership or is_instructor %} eligible-for-submission {% endif %}" data-lesson="{{ lesson.name }}"
-    data-course="{{ course.name }}">
-    {{ lesson.title }}
+  <div class="lesson-title">
+    <div class="course-home-headings title mb-0
+    {% if membership %} is-member {% endif %}
+    {% if membership or is_instructor %} eligible-for-submission {% endif %}" data-lesson="{{ lesson.name }}"
+      data-course="{{ course.name }}">{{ lesson.title }}</div>
     <span class="lesson-progress {{hide if get_progress(course.name, lesson.name) != 'Complete' else ''}}">COMPLETED</span>
   </div>
 
+  <div class="d-flex align-items-center">
+    {% set instructors = instructors %}
+    {% set ins_len = instructors | length %}
+    {% for instructor in instructors %}
+    {% if ins_len > 1 and loop.index == 1 %}
+    <div class="avatar-group overlap">
+    {% endif %}
+    {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
 
+    {% if ins_len > 1 and loop.index == ins_len %}
+    </div>
+    {% endif %}
+    {% endfor %}
+    <a class="button-links ml-2" href="{{ get_profile_url(instructors[0].username) }}">
+      <span class="course-creator-name">
+      {% if ins_len == 1 %}
+        {{ instructors[0].full_name }}
+      {% else %}
+        {% set suffix = "other" if ins_len - 1 == 1 else "others"  %}
+        {{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
+      {% endif %}
+      </span>
+    </a>
+    <div class="ml-3 course-meta"> {{ frappe.utils.format_date(lesson.creation, "medium") }} </div>
+  </div>
+
+
+  <div class="markdown-source lesson-content-card">
   {% if membership or lesson.include_in_preview or is_instructor %}
-  <div class="common-card-style lesson-content-card markdown-source">
-    {% if is_instructor and not lesson.include_in_preview %}
-    <small class="alert alert-secondary alert-dismissible">
+  {% if is_instructor and not lesson.include_in_preview %}
+    <div class="small alert alert-secondary alert-dismissible mt-4 mb-4">
       This lesson is not available for preview. As you are the Instructor of the course only you can see it.
       <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-    </small>
-    {% endif %}
-    {{ render_html(lesson.body) }}</div>
-  {% else %}
-  <div class="common-card-style lesson-content-card">
-    <div class="w-25 text-center" style="margin: 0 auto;">
-      <small>This lesson is not available for preview. Please join the course to access it.</small>
-      <a class="button is-primary ml-auto mr-auto mt-3" href="/courses/{{ course.name }}"> Start Learning </a>
     </div>
-  </div>
   {% endif %}
+    {{ render_html(lesson.body) }}
+  {% else %}
+    <div class="">
+      <a class="button is-primary pull-right" href="/courses/{{ course.name }}"> Start Learning </a>
+      <div class="">This lesson is not available for preview. Please join the course to access it.</div>
+    </div>
+  {% endif %}
+  </div>
 
 </div>
 {% endmacro %}
@@ -82,7 +108,7 @@
   {% set progress = get_progress(course.name, lesson.name) %}
   <div class="custom-checkbox {% if progress == 'Complete' %} hide {% endif %}">
     <label class="quiz-label">
-      <input class="option mark-progress" type="checkbox" checked>
+      <input class="mark-progress" type="checkbox" checked>
       <img class="empty-checkbox" />
       <span class="small">{{ _("Mark as complete on moving to the next lesson") }}</span>
     </label>

school/www/batch/learn.js

@@ -43,7 +43,7 @@ frappe.ready(() => {
 
   $(".clear-work").click((e) => {
     clear_work(e);
-  })
+  });
 
 });
 
@@ -57,8 +57,10 @@ const save_current_lesson = () => {
 };
 
 const enable_check = (e) => {
-  if ($(".option:checked").length && $("#check").attr("disabled")) {
+  if ($(".option:checked").length) {
     $("#check").removeAttr("disabled");
+    $(".custom-checkbox").removeClass("active-option");
+    $(".option:checked").closest(".custom-checkbox").addClass("active-option");
   }
 };
 
@@ -164,7 +166,7 @@ const quiz_summary = (e) => {
     callback: (data) => {
       var message = data.message == total_questions ? "Excellent Work" : "You were almost there."
       $(".question").addClass("hide");
-      $(".quiz-footer").addClass("hide");
+      $("#summary").addClass("hide");
       $("#quiz-form").parent().prepend(
         `<div class="text-center summary"><h2>${message} 👏 </h2>
           <div class="font-weight-bold">${data.message}/${total_questions} correct.</div></div>`);
@@ -222,8 +224,9 @@ const parse_options = () => {
 };
 
 const add_icon = (element, icon) => {
-  var label = $(element).parent().find(".label-area p").text();
-  $(element).parent().empty().html(`<img class="mr-3" src="/assets/school/icons/${icon}.svg"> ${label}`);
+  $(element).closest(".custom-checkbox").removeClass("active-option");
+  var label = $(element).siblings(".option-text").text();
+  $(element).parent().empty().html(`<div class="option-text"><img class="mr-3" src="/assets/school/icons/${icon}.svg"> ${label}</div>`);
 };
 
 const add_to_local_storage = (quiz_name, current_index, answer, is_correct) => {
@@ -354,27 +357,27 @@ const clear_work = (e) => {
   parent.addClass("hide");
   parent.siblings(".attach-file").removeClass("hide").val(null);
   parent.siblings(".submit-work").removeClass("hide");
-}
+};
 
 const fetch_assignments = () => {
-  if ($(".attach-file").length > 0) {
-    frappe.call({
-      method: "school.lms.doctype.lesson_assignment.lesson_assignment.get_assignment",
-      args: {
-        "lesson": $(".title").attr("data-lesson")
-      },
-      callback: (data) => {
-        if (data.message && data.message.length) {
-          const assignments = data.message;
-          for (let i in assignments) {
-            let target = $(`#${assignments[i]["id"]}`);
-            target.addClass("hide");
-            target.siblings(".submit-work").addClass("hide");
-            target.siblings(".preview-work").removeClass("hide");
-            target.siblings(".preview-work").find("a").attr("href", assignments[i]["assignment"]).text(assignments[i]["file_name"]);
-          }
+  if ($(".attach-file").length <= 0)
+    return;
+  frappe.call({
+    method: "school.lms.doctype.lesson_assignment.lesson_assignment.get_assignment",
+    args: {
+      "lesson": $(".title").attr("data-lesson")
+    },
+    callback: (data) => {
+      if (data.message && data.message.length) {
+        const assignments = data.message;
+        for (let i in assignments) {
+          let target = $(`#${assignments[i]["id"]}`);
+          target.addClass("hide");
+          target.siblings(".submit-work").addClass("hide");
+          target.siblings(".preview-work").removeClass("hide");
+          target.siblings(".preview-work").find("a").attr("href", assignments[i]["assignment"]).text(assignments[i]["file_name"]);
         }
       }
-    })
-  }
-}
+    }
+  });
+};

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

@@ -21,10 +21,6 @@ frappe.ready(() => {
     view_all_mentors(e);
   });
 
-  $(".video-preview").click((e) => {
-    show_video_dialog(e);
-  });
-
   $(".review-link").click((e) => {
     show_review_dialog(e);
   });
@@ -45,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 = () => {
@@ -158,11 +160,6 @@ var view_all_mentors = (e) => {
   }
 }
 
-var show_video_dialog = (e) => {
-  e.preventDefault();
-  $("#video-modal").modal("show");
-}
-
 var show_review_dialog = (e) => {
   e.preventDefault();
   $("#review-modal").modal("show");
@@ -235,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%"
+      });
+  }
+}

school/www/utils.py

@@ -1,6 +1,5 @@
 import frappe
-from school.lms.utils import slugify, get_membership, get_lessons, get_batch
-
+from school.lms.utils import slugify, get_membership, get_lessons, get_batch, get_lesson_url
 def get_common_context(context):
     context.no_cache = 1