From 2d373ba50960cf39032609ca343b7cff381c1f14 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Thu, 17 Feb 2022 16:53:40 +0530 Subject: [PATCH 01/11] fix: avg rating condition --- school/lms/widgets/Reviews.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html index bd1670c1..cad9f736 100644 --- a/school/lms/widgets/Reviews.html +++ b/school/lms/widgets/Reviews.html @@ -11,6 +11,7 @@ {% set avg_rating = get_average_rating(course.name) %} + {% if avg_rating %}
{{ avg_rating }}
@@ -43,9 +44,7 @@ {% endfor %}
- - - + {% endif %} {% if reviews | length %}
From 3dc9fc52a7c515fb4755e9883806e5c80e291e6a Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Thu, 17 Feb 2022 17:17:26 +0530 Subject: [PATCH 02/11] style: reviews empty state --- school/lms/widgets/Reviews.html | 28 +++++++++++++++++----------- school/public/css/style.css | 20 ++++++++++++++++++++ school/public/icons/comment.svg | 6 ++++++ 3 files changed, 43 insertions(+), 11 deletions(-) create mode 100644 school/public/icons/comment.svg diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html index cad9f736..bc785845 100644 --- a/school/lms/widgets/Reviews.html +++ b/school/lms/widgets/Reviews.html @@ -83,19 +83,25 @@
{% else %} -
- -
{{ _("Review the course") }}
-
{{ _("Help us improve our course material.") }}
- {% if is_eligible_to_review(course.name, membership) %} - +
+
+ +
+
+
{{ _("Review the course") }}
+
{{ _("Help us improve our course material.") }}
+
+
+ {% if is_eligible_to_review(course.name, membership) %} + {{ _("Write a review") }} - {% elif frappe.session.user == "Guest" %} - {{ _("Login") }} - {% elif not membership %} -
{{ _("Start Learning") }}
- {% endif %} + {% elif frappe.session.user == "Guest" %} + {{ _("Login") }} + {% elif not membership %} +
{{ _("Start Learning") }}
+ {% endif %} +
{% endif %}
diff --git a/school/public/css/style.css b/school/public/css/style.css index eb327077..6496c0c2 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -1263,6 +1263,26 @@ pre { padding: 2.5rem; } +.empty-state-new { + background: var(--gray-50); + border-radius: var(--border-radius-lg); + padding: 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.empty-state-text { + flex: 1; + margin-left: 1.25rem; +} + +.empty-state-heading { + font-size: var(--text-xl); + color: var(--gray-900); + font-weight: 600; +} + .vertically-center { display: flex; align-items: center; diff --git a/school/public/icons/comment.svg b/school/public/icons/comment.svg new file mode 100644 index 00000000..15db8abf --- /dev/null +++ b/school/public/icons/comment.svg @@ -0,0 +1,6 @@ + + + + + + From dc3843087e6324b58a50bb4730327dd7105024dc Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Fri, 18 Feb 2022 12:26:08 +0530 Subject: [PATCH 03/11] feat: course page redesign --- school/hooks.py | 3 +- school/lms/utils.py | 5 ++- school/lms/widgets/CourseOutline.html | 35 ++++++++++----- school/plugins.py | 3 +- school/public/css/style.css | 26 ++++++----- school/templates/quiz.html | 6 +-- school/www/batch/learn.html | 62 +++++++++++++++++++-------- school/www/courses/course.js | 9 ---- school/www/utils.py | 3 +- 9 files changed, 96 insertions(+), 56 deletions(-) diff --git a/school/hooks.py b/school/hooks.py index 391e73a1..929dbd4f 100644 --- a/school/hooks.py +++ b/school/hooks.py @@ -183,7 +183,8 @@ jinja = { "school.lms.utils.get_reviews", "school.lms.utils.is_eligible_to_review", "school.lms.utils.get_initial_members", - "school.lms.utils.get_sorted_reviews" + "school.lms.utils.get_sorted_reviews", + "school.lms.utils.is_instructor" ], "filters": [] } diff --git a/school/lms/utils.py b/school/lms/utils.py index 51ec23c6..9246bc5a 100644 --- a/school/lms/utils.py +++ b/school/lms/utils.py @@ -81,7 +81,7 @@ def get_lesson_details(chapter): for row in lesson_list: lesson_details = frappe.db.get_value("Course Lesson", row.lesson, - ["name", "title", "include_in_preview", "body"], as_dict=True) + ["name", "title", "include_in_preview", "body", "creation"], as_dict=True) lesson_details.number = flt("{}.{}".format(chapter.idx, row.idx)) lessons.append(lesson_details) return lessons @@ -289,3 +289,6 @@ def get_initial_members(course): member.member, ["name", "username", "full_name", "user_image"], as_dict=True)) return member_details + +def is_instructor(course): + return len(list(filter(lambda x: x.name == frappe.session.user, get_instructors(course)))) > 0 diff --git a/school/lms/widgets/CourseOutline.html b/school/lms/widgets/CourseOutline.html index ab44b730..970de9ed 100644 --- a/school/lms/widgets/CourseOutline.html +++ b/school/lms/widgets/CourseOutline.html @@ -41,14 +41,14 @@ {% elif is_instructor and not lesson.include_in_preview %}
{{ lesson.title }}
{% else %} -
+
Try Again
diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html index 959a9c3d..444e6676 100644 --- a/school/www/batch/learn.html +++ b/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) %}
-
- {{ lesson.title }} +
+
{{ lesson.title }}
COMPLETED
+
+ {% set instructors = instructors %} + {% set ins_len = instructors | length %} + {% for instructor in instructors %} + {% if ins_len > 1 and loop.index == 1 %} +
+ {% endif %} + {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }} + {% if ins_len > 1 and loop.index == ins_len %} +
+ {% endif %} + {% endfor %} + + + {% 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 %} + + +
{{ frappe.utils.format_date(lesson.creation, "medium") }}
+
+ + +
{% if membership or lesson.include_in_preview or is_instructor %} -
- {% if is_instructor and not lesson.include_in_preview %} - + {% if is_instructor and not lesson.include_in_preview %} +
This lesson is not available for preview. As you are the Instructor of the course only you can see it. × - - {% endif %} - {{ render_html(lesson.body) }}
- {% else %} -
-
- This lesson is not available for preview. Please join the course to access it. - Start Learning
-
{% endif %} + {{ render_html(lesson.body) }} + {% else %} +
+ Start Learning +
This lesson is not available for preview. Please join the course to access it.
+
+ {% endif %} +
{% endmacro %} diff --git a/school/www/courses/course.js b/school/www/courses/course.js index f59c3552..e5f8c8ab 100644 --- a/school/www/courses/course.js +++ b/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); }); @@ -158,11 +154,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"); diff --git a/school/www/utils.py b/school/www/utils.py index 21fa2676..9cb00bba 100644 --- a/school/www/utils.py +++ b/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 From 894a68823fe37899c6283ff8d2e182fe44ab5e0f Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Fri, 18 Feb 2022 12:44:42 +0530 Subject: [PATCH 04/11] fix: button width --- school/public/css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/school/public/css/style.css b/school/public/css/style.css index 194f867f..8118bd51 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -414,6 +414,7 @@ input[type=checkbox] { .wide-button { padding: 0.5rem 6rem; font-weight: 500; + width: inherit; } @media (max-width: 768px) { From 28ef8e7db7906d1214d51e7d9e85651a01c85bc7 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 21 Feb 2022 11:43:05 +0530 Subject: [PATCH 05/11] feat: quiz redesign --- school/hooks.py | 3 +- school/lms/utils.py | 4 +++ school/lms/widgets/Reviews.html | 2 +- school/public/css/style.css | 49 ++++++++++++++++++++++++++------ school/templates/quiz.html | 27 +++++++++--------- school/www/batch/learn.js | 50 +++++++++++++++++---------------- 6 files changed, 87 insertions(+), 48 deletions(-) diff --git a/school/hooks.py b/school/hooks.py index 929dbd4f..63c792cb 100644 --- a/school/hooks.py +++ b/school/hooks.py @@ -184,7 +184,8 @@ jinja = { "school.lms.utils.is_eligible_to_review", "school.lms.utils.get_initial_members", "school.lms.utils.get_sorted_reviews", - "school.lms.utils.is_instructor" + "school.lms.utils.is_instructor", + "school.lms.utils.convert_number_to_character" ], "filters": [] } diff --git a/school/lms/utils.py b/school/lms/utils.py index 9246bc5a..1eae98e7 100644 --- a/school/lms/utils.py +++ b/school/lms/utils.py @@ -2,6 +2,7 @@ import re import frappe from frappe.utils import flt, cint, cstr from school.lms.md import markdown_to_html +import string RE_SLUG_NOTALLOWED = re.compile("[^a-z0-9]+") @@ -292,3 +293,6 @@ def get_initial_members(course): def is_instructor(course): return len(list(filter(lambda x: x.name == frappe.session.user, get_instructors(course)))) > 0 + +def convert_number_to_character(number): + return string.ascii_uppercase[number] diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html index bc785845..92e61a3a 100644 --- a/school/lms/widgets/Reviews.html +++ b/school/lms/widgets/Reviews.html @@ -57,7 +57,7 @@
- + {{ review.owner_details.full_name }} diff --git a/school/public/css/style.css b/school/public/css/style.css index 8118bd51..c22311f3 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -308,11 +308,6 @@ input[type=checkbox] { width: 100px; } -.custom-checkbox { - display: flex; - align-items: center; -} - .custom-checkbox>label>input { visibility: hidden; } @@ -324,6 +319,10 @@ input[type=checkbox] { border-radius: var(--border-radius-md); } +.empty-checkbox { + margin-right: 0.5rem; +} + .custom-checkbox>label>input:checked+.empty-checkbox { background: url(/assets/school/icons/tick.svg); background-repeat: no-repeat; @@ -331,6 +330,8 @@ input[type=checkbox] { } .quiz-label { + display: flex; + align-items: center; margin-bottom: 0; cursor: pointer; } @@ -827,8 +828,7 @@ input[type=checkbox] { .question { flex-direction: column; - width: 85%; - margin: 0 auto; + padding: 1.25rem; } .question p { @@ -887,6 +887,7 @@ input[type=checkbox] { .lesson-pagination { display: flex; justify-content: space-between; + align-items: center; margin: 24px 0px 0px; } @@ -1683,7 +1684,7 @@ pre { } } -.review-author { +.bold-heading { font-size: var(--text-lg); color: var(--gray-900); font-weight: 600; @@ -1715,3 +1716,35 @@ pre { .reviews-parent .progress-bar { background-color: var(--gray-600); } + +.question-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.question-number { + padding: 0.25rem 0.75rem; + border-radius: 50%; + box-shadow: var(--shadow-sm); +} + +.option-text { + padding: 0.75rem; + box-shadow: var(--shadow-sm); + border-radius: var(--border-radius-md); + flex: 1; +} + +.active-option .option-text { + background-color: var(--blue-50); + border: 1px solid var(--blue-500); +} + +.question-text { + font-size: var(--text-lg); + color: var(--gray-900); + font-weight: 600; + flex-grow: 1; + margin-left: 1rem; +} diff --git a/school/templates/quiz.html b/school/templates/quiz.html index 640f0569..72aa20f8 100644 --- a/school/templates/quiz.html +++ b/school/templates/quiz.html @@ -2,34 +2,34 @@
-
+
{% for question in quiz.questions %} -
-

{{ frappe.utils.md_to_html(question.question) }}

+
+
{{ loop.index }}
+
+
{{ instruction }}
+ {{ frappe.utils.md_to_html(question.question) }} +
+
- {% if question.multiple %} - Choose all answers that apply: - {% else %} - Choose 1 answer: - {% endif %} -
{% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %} - {% for option in options %} {% if option %}
@@ -38,7 +38,6 @@ {{ explanation }} {% endif %} -
{% endif %} {% endfor %} @@ -51,8 +50,8 @@
Summary
Please join the course to submit the Quiz. +
Try Again
-
Try Again

diff --git a/school/www/batch/learn.js b/school/www/batch/learn.js index 7260a9a7..6e05fe30 100644 --- a/school/www/batch/learn.js +++ b/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( `

${message} 👏

${data.message}/${total_questions} correct.
`); @@ -222,7 +224,7 @@ const parse_options = () => { }; const add_icon = (element, icon) => { - var label = $(element).parent().find(".label-area p").text(); + var label = $(element).siblings(".option-text").text(); $(element).parent().empty().html(` ${label}`); }; @@ -354,27 +356,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"]); } } - }) - } -} + } + }); +}; From c3fac64280bf558fcbab9ece48aea6514904e2a9 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 21 Feb 2022 14:55:20 +0530 Subject: [PATCH 06/11] fix: translations and sidebar --- school/public/css/style.css | 8 ++++---- school/templates/quiz.html | 14 +++++++------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/school/public/css/style.css b/school/public/css/style.css index 8118bd51..e992eb61 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -466,10 +466,6 @@ input[type=checkbox] { align-items: center; } -.chapter-title[aria-expanded="true"] { - background: var(--gray-100); -} - .chapter-description { margin: 0.75rem 3rem 1rem; } @@ -1715,3 +1711,7 @@ pre { .reviews-parent .progress-bar { background-color: var(--gray-600); } + +.body-content { + +} diff --git a/school/templates/quiz.html b/school/templates/quiz.html index 640f0569..3c3dd490 100644 --- a/school/templates/quiz.html +++ b/school/templates/quiz.html @@ -11,9 +11,9 @@

{{ frappe.utils.md_to_html(question.question) }}

{% if question.multiple %} - Choose all answers that apply: + {{ _("Choose all answers that apply:") }} {% else %} - Choose 1 answer: + {{ _("Choose 1 answer:") }} {% endif %}
@@ -47,12 +47,12 @@
-
Try Again
+
{{ _("Try Again") }}

From eb073ebe87bc10ffaf604ecaa668184853a23d2b Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 21 Feb 2022 15:23:23 +0530 Subject: [PATCH 07/11] fix: quiz card layout --- school/lms/md.py | 2 +- school/public/css/style.css | 6 ++++++ school/templates/quiz.html | 32 ++++++++++++++++---------------- school/www/batch/learn.html | 2 +- 4 files changed, 24 insertions(+), 18 deletions(-) diff --git a/school/lms/md.py b/school/lms/md.py index 5acb6322..b072af2a 100644 --- a/school/lms/md.py +++ b/school/lms/md.py @@ -105,7 +105,7 @@ def sanitize_html(html, macro): any broken tags. This makes sures that all those things are fixed before passing to the etree parser. """ - soup = BeautifulSoup(html, features="lxml") + soup = BeautifulSoup(html, features="html5lib") nodes = soup.body.children classname = "" if macro == "YouTubeVideo": diff --git a/school/public/css/style.css b/school/public/css/style.css index c22311f3..97903fc5 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -824,10 +824,15 @@ input[type=checkbox] { display: flex; align-items: center; justify-content: space-between; + margin-top: 5rem; } .question { flex-direction: column; +} + +.question-card { + flex-direction: column; padding: 1.25rem; } @@ -1721,6 +1726,7 @@ pre { display: flex; align-items: center; justify-content: space-between; + margin-bottom: 2rem; } .question-number { diff --git a/school/templates/quiz.html b/school/templates/quiz.html index 72aa20f8..a7cf17bc 100644 --- a/school/templates/quiz.html +++ b/school/templates/quiz.html @@ -2,12 +2,12 @@
-
+
{% for question in quiz.questions %} {% set instruction = _("Choose all answers that apply") if question.multiple else _("Choose 1 answer") %} -
{{ loop.index }}
@@ -22,22 +22,22 @@ {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %} {% for option in options %} {% if option %} +
+
+ +
-
- + {% set explanation = question['explanation_' + loop.index | string] %} + {% if explanation %} + {{ explanation }} + {% endif %}
- - {% set explanation = question['explanation_' + loop.index | string] %} - {% if explanation %} - {{ explanation }} - {% endif %} - {% endif %} {% endfor %} diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html index 444e6676..34a5bd52 100644 --- a/school/www/batch/learn.html +++ b/school/www/batch/learn.html @@ -108,7 +108,7 @@ {% set progress = get_progress(course.name, lesson.name) %}
From 0cf953b3eb26e2a743bf402ee14a2af39ceab0ca Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 21 Feb 2022 16:01:07 +0530 Subject: [PATCH 08/11] fix: markup lib --- school/lms/md.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/school/lms/md.py b/school/lms/md.py index b072af2a..5acb6322 100644 --- a/school/lms/md.py +++ b/school/lms/md.py @@ -105,7 +105,7 @@ def sanitize_html(html, macro): any broken tags. This makes sures that all those things are fixed before passing to the etree parser. """ - soup = BeautifulSoup(html, features="html5lib") + soup = BeautifulSoup(html, features="lxml") nodes = soup.body.children classname = "" if macro == "YouTubeVideo": From aee35aa66d4bd932e7b1a49bc43fb86aacd62372 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 21 Feb 2022 16:30:10 +0530 Subject: [PATCH 09/11] fix: ui after question check --- school/www/batch/learn.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/school/www/batch/learn.js b/school/www/batch/learn.js index 6e05fe30..52aa0c61 100644 --- a/school/www/batch/learn.js +++ b/school/www/batch/learn.js @@ -224,8 +224,9 @@ const parse_options = () => { }; const add_icon = (element, icon) => { + $(element).closest(".custom-checkbox").removeClass("active-option"); var label = $(element).siblings(".option-text").text(); - $(element).parent().empty().html(` ${label}`); + $(element).parent().empty().html(`
${label}
`); }; const add_to_local_storage = (quiz_name, current_index, answer, is_correct) => { From ccddc9a4044a7080e36c3134177272a5d11cf931 Mon Sep 17 00:00:00 2001 From: Jannat Patel <31363128+pateljannat@users.noreply.github.com> Date: Mon, 21 Feb 2022 18:03:27 +0530 Subject: [PATCH 10/11] fix: margin before explanation --- school/templates/quiz.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/school/templates/quiz.html b/school/templates/quiz.html index a7cf17bc..84dcf1eb 100644 --- a/school/templates/quiz.html +++ b/school/templates/quiz.html @@ -35,7 +35,7 @@ {% set explanation = question['explanation_' + loop.index | string] %} {% if explanation %} - {{ explanation }} + {{ explanation }} {% endif %}
{% endif %} From 6c64181bf4061cecd1a71b02aa946116735b806f Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Tue, 22 Feb 2022 11:15:02 +0530 Subject: [PATCH 11/11] 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") }}
{% for chapter in get_chapters(course.name) %} -
+
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%" + }); + } +}