From 8017715bc7dd806c6457e28ad8b3e95af56013a4 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 4 May 2022 16:54:16 +0530 Subject: [PATCH 1/2] fix: ui cleanup --- .../doctype/course_lesson/course_lesson.json | 5 +- lms/lms/doctype/lms_course/lms_course.json | 19 +- lms/lms/md.py | 2 +- lms/lms/widgets/CourseOutline.html | 4 +- lms/public/css/style.css | 21 +- lms/www/courses/course.html | 327 +----------------- lms/www/courses/course.js | 28 +- lms/www/jobs/index.html | 4 +- lms/www/jobs/job.html | 2 +- 9 files changed, 31 insertions(+), 381 deletions(-) diff --git a/lms/lms/doctype/course_lesson/course_lesson.json b/lms/lms/doctype/course_lesson/course_lesson.json index 5d19f852..6e61622b 100644 --- a/lms/lms/doctype/course_lesson/course_lesson.json +++ b/lms/lms/doctype/course_lesson/course_lesson.json @@ -24,6 +24,7 @@ "fieldname": "chapter", "fieldtype": "Link", "in_list_view": 1, + "in_standard_filter": 1, "label": "Course Chapter", "options": "Course Chapter", "reqd": 1 @@ -75,6 +76,8 @@ "fetch_from": "chapter.course", "fieldname": "course", "fieldtype": "Link", + "in_list_view": 1, + "in_standard_filter": 1, "label": "Course", "options": "LMS Course", "read_only": 1 @@ -82,7 +85,7 @@ ], "index_web_pages_for_search": 1, "links": [], - "modified": "2022-04-22 12:59:23.641915", + "modified": "2022-05-02 17:16:12.450460", "modified_by": "Administrator", "module": "LMS", "name": "Course Lesson", diff --git a/lms/lms/doctype/lms_course/lms_course.json b/lms/lms/doctype/lms_course/lms_course.json index 837dfbbc..529ccd48 100644 --- a/lms/lms/doctype/lms_course/lms_course.json +++ b/lms/lms/doctype/lms_course/lms_course.json @@ -34,10 +34,11 @@ "related_courses", "certification_section", "enable_certification", + "expiry", + "section_break_23", "grant_certificate_after", "evaluator", - "column_break_22", - "expiry", + "column_break_26", "max_attempts", "duration", "pricing_section", @@ -177,10 +178,6 @@ "fieldtype": "Check", "label": "Paid Certificate" }, - { - "fieldname": "column_break_22", - "fieldtype": "Column Break" - }, { "depends_on": "enable_certification", "fieldname": "grant_certificate_after", @@ -228,6 +225,14 @@ "fieldtype": "Select", "label": "Duration for Attempts", "options": "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12" + }, + { + "fieldname": "section_break_23", + "fieldtype": "Section Break" + }, + { + "fieldname": "column_break_26", + "fieldtype": "Column Break" } ], "is_published_field": "published", @@ -253,7 +258,7 @@ "link_fieldname": "course" } ], - "modified": "2022-04-28 16:15:10.047183", + "modified": "2022-05-04 11:03:24.001015", "modified_by": "Administrator", "module": "LMS", "name": "LMS Course", diff --git a/lms/lms/md.py b/lms/lms/md.py index b02ed68f..8105c72f 100644 --- a/lms/lms/md.py +++ b/lms/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/lms/lms/widgets/CourseOutline.html b/lms/lms/widgets/CourseOutline.html index 43350d50..8e6e11f7 100644 --- a/lms/lms/widgets/CourseOutline.html +++ b/lms/lms/widgets/CourseOutline.html @@ -30,7 +30,7 @@ - + {{ lesson.title }} @@ -148,8 +148,6 @@ const expand_the_active_chapter = () => { }) selector.addClass("active-lesson"); - let href = selector.find("use").attr("href"); - !href.endsWith("blue") && selector.find("use").attr("href", `${href}-blue`); show_section(selector.parent().parent()); } diff --git a/lms/public/css/style.css b/lms/public/css/style.css index 554f64d0..f92558eb 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -275,11 +275,7 @@ input[type=checkbox] { } .course-card-wide { - background-color: white; - padding: 0 1.25rem 1.25rem; - border-radius: var(--border-radius); width: 50%; - box-shadow: var(--shadow-base); font-size: var(--text-base); } @@ -611,7 +607,7 @@ input[type=checkbox] { display: flex; justify-content: space-between; align-items: center; - margin: 24px 0px 0px; + margin: 2rem 0 4rem; } .lesson-pagination-parent { @@ -629,9 +625,8 @@ input[type=checkbox] { } .active-lesson { - background-color: var(--blue-100); + background-color: var(--gray-200); border-radius: var(--border-radius-md); - color: var(--blue-500); } .lesson-title { @@ -854,7 +849,7 @@ pre { .certificate-price { font-weight: bold; - margin-bottom: 0.5rem; + margin-bottom: 1rem; } .certificate-ribbon { @@ -1158,10 +1153,12 @@ pre { .job-card-heading { font-weight: 600; color: var(--gray-900); + margin-bottom: 0.4rem; } .course-head-container { color: var(--gray-900); + background-color: var(--gray-200); } .seperator { @@ -1178,8 +1175,8 @@ pre { box-shadow: var(--shadow-sm); overflow: auto; width: fit-content; - position: fixed; - top: 50%; + position: absolute; + top: 10%; right: 7%; max-width: 400px; z-index: 4; @@ -1196,10 +1193,6 @@ pre { } } -.video-in-overlay { - top: 40%; -} - .course-overlay-content { padding: 1.25rem; font-size: var(--text-base); diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html index c6e83b69..b37663f1 100644 --- a/lms/www/courses/course.html +++ b/lms/www/courses/course.html @@ -1,326 +1 @@ -{% extends "templates/base.html" %} -{% block title %}{{ course.title }} -{% endblock %} - -{% block head_include %} -{% include "public/icons/symbol-defs.svg" %} - -{% endblock %} - -{% block content %} -
-
- {{ CourseHomeHeader(course) }} -
-
-
- {{ CourseHeaderOverlay(course) }} - {{ Description(course) }} - {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }} - {{ widgets.Reviews(course=course, membership=membership) }} -
-
-
-
- {{ RelatedCourses(course) }} -
-{% endblock %} - -{% macro CourseHomeHeader(course) %} -
-
-
- {{ BreadCrumb(course) }} - {{ CourseCardWide(course) }} -
-
-
-{% endmacro %} - - -{% macro BreadCrumb(course) %} -
- {{ _("All Courses") }} - - {{ course.title }} -
-{% endmacro %} - - -{% macro CourseCardWide(course) %} -
-
- {% for tag in get_tags(course.name) %} -
{{ tag }}
- {% endfor %} -
-
- {{ course.title }} -
-
- {{ course.short_introduction }} -
- - {% if membership %} - {% set progress = frappe.utils.cint(membership.progress) %} -
-
-
-
- {% endif %} - -
-
Instructors:
- {% for instructor in get_instructors(course.name) %} -
- {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }} - - {{ instructor.full_name }} - -
- {% endfor %} -
- -
- -{% endmacro%} - -{% macro CourseHeaderOverlay(course) %} -
- - {% if course.video_link %} - - {% endif %} - -
-
{{ course.title }}
- -
- {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} -
- - {% if certificate_request and not certificate %} -

{{ _("Evaluation On: ") }} - {{ _("{0} at {1}").format(frappe.utils.format_date(certificate_request.date, "medium"), - frappe.utils.format_time(certificate_request.start_time, "short")) }}

- {% endif %} - - {% if course.status == "Under Review" %} -
- {{ _("Your course is currently under review. Once the review is complete, the System Admins will publish it on the website.") }} -
- {% endif %} - - {% if no_of_attempts >= course.max_attempts %} -

{{ _("You have exceeded the maximum number of attempts allowed to appear for evaluations of this course.") }}

- {% endif %} - - {% if is_instructor(course.name) %} -
- {{ _("Edit") }} - - - {{ _("Add Chapter") }} - - - - {{ _("Add Lesson") }} - -
- {% endif %} - -
-
- - - - {{ get_students(course.name) | length }} {{ _("Enrolled") }} -
- - - - {% if get_lessons(course.name) | length %} -
- - - - {{ get_lessons(course.name) | length }} {{ _("Lessons") }} -
- {% endif %} -
- - {% if course.paid_certificate %} -
- {{ _("Certificate Price:") }} {{ frappe.utils.fmt_money(course.price_certificate, 2, course.currency) }} -
- {% endif %} - - {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and - membership.current_lesson - else '1.1' %} - - {% if show_start_learing_cta %} -
- {{ _("Start Learning") }} - -
- - {% elif is_instructor(course.name) and not course.published and course.status == "Under Review" %} -
- {{ _("Submit for Review") }} - -
- - {% elif is_instructor(course.name) %} - - {{ _("Checkout Course") }} - - - {% elif course.upcoming and not is_user_interested %} -
- {{ _("Notify me when available") }} -
- - {% elif is_cohort_staff(course.name, frappe.session.user) %} - - {{ _("Manage the course") }} - - - {% elif membership %} - - {{ _("Continue Learning") }} - - {% endif %} - - {% set progress = frappe.utils.cint(membership.progress) %} - {% if membership and course.enable_certification %} - {% if certificate %} - - {{ _("Get Certificate") }} - - {% elif eligible %} - - {{ _("Apply for Certificate") }} - - {% elif course.grant_certificate_after == "Completion" and progress == 100 %} -
- {{ _("Get Certificate") }} -
- {% endif %} - {% endif %} - -
-
- - -{% endmacro %} - -{% macro Description(course) %} -
- {{ frappe.utils.md_to_html(course.description) }} -
-{% endmacro %} - -{% macro CourseCreator(course) %} -
{{ _("Course Creators") }}
- -
- {% set instructors = get_instructors(course.name) %} - {% for instructor in instructors %} -
- {{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }} -
-
{{ instructor.full_name }}
-
{{ get_authored_courses(instructor.name) | length }} {{ _("Courses Created") }}
-
-
- {% endfor %} -
-{% endmacro %} - -{% macro RelatedCourses(course) %} -{% if course.related_courses | length %} -
-
-
{{ _("Other Courses") }}
- -
- -
-{% endif%} -{% endmacro %} +` diff --git a/lms/www/courses/course.js b/lms/www/courses/course.js index cb194253..a4493d2e 100644 --- a/lms/www/courses/course.js +++ b/lms/www/courses/course.js @@ -50,12 +50,6 @@ frappe.ready(() => { select_slot(e); }); - $(document).scroll(function() { - let timer; - clearTimeout(timer); - timer = setTimeout(() => { handle_overlay_display.apply(this, arguments); }, 500); - }); - }); var hide_wrapped_mentor_cards = () => { @@ -127,8 +121,8 @@ var submit_review = (e) => { e.preventDefault(); var rating = $(".rating-field").children(".star-click").length; var review = $(".review-field").val(); - if (!review || !rating) { - $(".error-field").text("Both Rating and Review are required."); + if (!rating) { + $(".error-field").text("Please provide a rating."); return; } frappe.call({ @@ -166,24 +160,6 @@ const element_not_in_viewport = (el) => { 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%" - }); - } -}; - const submit_for_review = (e) => { let course = $(e.currentTarget).data("course"); frappe.call({ diff --git a/lms/www/jobs/index.html b/lms/www/jobs/index.html index decdc2c0..49b19138 100644 --- a/lms/www/jobs/index.html +++ b/lms/www/jobs/index.html @@ -26,7 +26,7 @@
{{ _(job.job_title) }}
-
{{ job.company_name }}
+
{{ job.company_name }}
@@ -38,7 +38,7 @@
{{ job.type }}
-
{{ frappe.utils.format_date(job.creation, "medium") }}
+
{{ frappe.utils.format_date(job.creation, "medium") }}
diff --git a/lms/www/jobs/job.html b/lms/www/jobs/job.html index 29304896..cbf7c3fc 100644 --- a/lms/www/jobs/job.html +++ b/lms/www/jobs/job.html @@ -22,7 +22,7 @@
{{ _(job.job_title) }}
{{ job.type }}
-
+
{{ job.company_name }}
From eb0f4728c4211c3f94dab402399ea8acb1f29526 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 4 May 2022 17:40:48 +0530 Subject: [PATCH 2/2] fix: course page style --- lms/lms/md.py | 2 +- lms/public/css/style.css | 4 +- lms/www/courses/course.html | 321 +++++++++++++++++++++++++++++++++++- 3 files changed, 323 insertions(+), 4 deletions(-) diff --git a/lms/lms/md.py b/lms/lms/md.py index 8105c72f..b02ed68f 100644 --- a/lms/lms/md.py +++ b/lms/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": diff --git a/lms/public/css/style.css b/lms/public/css/style.css index f92558eb..13d6229e 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -389,7 +389,7 @@ input[type=checkbox] { } .course-content-parent .chapter-description { - font-size: 0.7rem; + font-size: 0.75rem; } .chapter-icon { @@ -1114,7 +1114,7 @@ pre { .job-card { display: flex; - position: relative; + align-items: center; } .company-logo { diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html index b37663f1..25d48373 100644 --- a/lms/www/courses/course.html +++ b/lms/www/courses/course.html @@ -1 +1,320 @@ -` +{% extends "templates/base.html" %} +{% block title %}{{ course.title }} +{% endblock %} + +{% block head_include %} +{% include "public/icons/symbol-defs.svg" %} + +{% endblock %} + +{% block content %} +
+
+ {{ CourseHomeHeader(course) }} +
+
+
+ {{ CourseHeaderOverlay(course) }} + {{ Description(course) }} + {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }} + {{ widgets.Reviews(course=course, membership=membership) }} +
+
+
+
+ {{ RelatedCourses(course) }} +
+{% endblock %} + +{% macro CourseHomeHeader(course) %} +
+
+
+ {{ BreadCrumb(course) }} + {{ CourseCardWide(course) }} +
+
+
+{% endmacro %} + + +{% macro BreadCrumb(course) %} +
+ {{ _("All Courses") }} + + {{ course.title }} +
+{% endmacro %} + + +{% macro CourseCardWide(course) %} +
+
+ {% for tag in get_tags(course.name) %} +
{{ tag }}
+ {% endfor %} +
+
+ {{ course.title }} +
+
+ {{ course.short_introduction }} +
+ + {% if membership %} + {% set progress = frappe.utils.cint(membership.progress) %} +
+
+
+
+ {% endif %} + +
+
Instructors:
+ {% for instructor in get_instructors(course.name) %} +
+ {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }} + + {{ instructor.full_name }} + +
+ {% endfor %} +
+ +
+ +{% endmacro%} + +{% macro CourseHeaderOverlay(course) %} +
+ + {% if course.video_link %} + + {% endif %} + +
+
{{ course.title }}
+ +
+ {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} +
+ + {% if certificate_request and not certificate %} +

{{ _("Evaluation On: ") }} + {{ _("{0} at {1}").format(frappe.utils.format_date(certificate_request.date, "medium"), + frappe.utils.format_time(certificate_request.start_time, "short")) }}

+ {% endif %} + + {% if course.status == "Under Review" %} +
+ {{ _("Your course is currently under review. Once the review is complete, the System Admins will publish it on the website.") }} +
+ {% endif %} + + {% if no_of_attempts >= course.max_attempts %} +

{{ _("You have exceeded the maximum number of attempts allowed to appear for evaluations of this course.") }}

+ {% endif %} + + {% if is_instructor(course.name) %} +
+ {{ _("Edit") }} + + + {{ _("Add Chapter") }} + + + + {{ _("Add Lesson") }} + +
+ {% endif %} + +
+
+ + + + {{ get_students(course.name) | length }} {{ _("Enrolled") }} +
+ + + + {% if get_lessons(course.name) | length %} +
+ + + + {{ get_lessons(course.name) | length }} {{ _("Lessons") }} +
+ {% endif %} +
+ + {% if course.paid_certificate %} +
+ {{ _("Certificate Price:") }} {{ frappe.utils.fmt_money(course.price_certificate, 2, course.currency) }} +
+ {% endif %} + + {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and + membership.current_lesson + else '1.1' %} + + {% if show_start_learing_cta %} +
+ {{ _("Start Learning") }} + +
+ + {% elif is_instructor(course.name) and not course.published and course.status == "Under Review" %} +
+ {{ _("Submit for Review") }} + +
+ + {% elif is_instructor(course.name) %} + + {{ _("Checkout Course") }} + + + {% elif course.upcoming and not is_user_interested %} +
+ {{ _("Notify me when available") }} +
+ + {% elif is_cohort_staff(course.name, frappe.session.user) %} + + {{ _("Manage the course") }} + + + {% elif membership %} + + {{ _("Continue Learning") }} + + {% endif %} + {% set progress = frappe.utils.cint(membership.progress) %} + {% if membership and course.enable_certification %} + {% if certificate %} + + {{ _("Get Certificate") }} + + {% elif eligible_for_evaluation %} + + {{ _("Apply for Certificate") }} + + {% elif course.grant_certificate_after == "Completion" and progress == 100 %} +
+ {{ _("Get Certificate") }} +
+ {% endif %} + {% endif %} + +
+
+ + +{% endmacro %} + +{% macro Description(course) %} +
+ {{ frappe.utils.md_to_html(course.description) }} +
+{% endmacro %} + +{% macro CourseCreator(course) %} +
{{ _("Course Creators") }}
+ +
+ {% set instructors = get_instructors(course.name) %} + {% for instructor in instructors %} +
+ {{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }} +
+
{{ instructor.full_name }}
+
{{ get_authored_courses(instructor.name) | length }} {{ _("Courses Created") }}
+
+
+ {% endfor %} +
+{% endmacro %} + +{% macro RelatedCourses(course) %} +{% if course.related_courses | length %} +
+
+
{{ _("Other Courses") }}
+ +
+ +
+{% endif%} +{% endmacro %}