From a23a356bf6b884d0fcee7cbe45e2e50285e781d4 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 16 Feb 2022 19:12:25 +0530 Subject: [PATCH 1/2] style: course home --- .../multiple_testimonials.html | 3 + .../exhibitor_section/exhibitor_section.html | 4 +- .../speaker_section/speaker_section.html | 4 +- .../talk_section/talk_section.html | 2 +- school/hooks.py | 2 + .../lms_certification/lms_certification.py | 4 +- school/lms/doctype/lms_course/lms_course.js | 8 + school/lms/doctype/lms_course/lms_course.json | 13 +- .../lms/doctype/related_courses/__init__.py | 0 .../related_courses/related_courses.js | 8 + .../related_courses/related_courses.json | 32 ++ .../related_courses/related_courses.py | 8 + .../related_courses/test_related_courses.py | 8 + school/lms/md.py | 2 +- school/lms/utils.py | 35 +- .../course_cards/course_cards.html | 8 +- school/lms/widgets/ChapterTeaser.html | 123 ------ school/lms/widgets/CourseCard.html | 37 +- school/lms/widgets/CourseOutline.html | 131 +++++- school/lms/widgets/MemberCard.html | 4 +- school/lms/widgets/Reviews.html | 77 +++- school/public/css/style.css | 366 +++++++++++------ school/public/icons/book.svg | 7 + school/public/icons/user.svg | 4 +- school/www/batch/learn.js | 14 +- school/www/courses/course.html | 386 +++++++++--------- school/www/courses/course.py | 12 +- school/www/profiles/profile.html | 2 +- 28 files changed, 789 insertions(+), 515 deletions(-) create mode 100644 school/lms/doctype/related_courses/__init__.py create mode 100644 school/lms/doctype/related_courses/related_courses.js create mode 100644 school/lms/doctype/related_courses/related_courses.json create mode 100644 school/lms/doctype/related_courses/related_courses.py create mode 100644 school/lms/doctype/related_courses/test_related_courses.py delete mode 100644 school/lms/widgets/ChapterTeaser.html create mode 100644 school/public/icons/book.svg diff --git a/school/community/web_template/multiple_testimonials/multiple_testimonials.html b/school/community/web_template/multiple_testimonials/multiple_testimonials.html index ff7e150b..c51e0a9c 100644 --- a/school/community/web_template/multiple_testimonials/multiple_testimonials.html +++ b/school/community/web_template/multiple_testimonials/multiple_testimonials.html @@ -26,6 +26,7 @@ {% endfor %} + {% if testimonials_table | length > 3 %}
@@ -44,4 +45,6 @@ Next
+ {% endif %} + diff --git a/school/event_management/web_template/exhibitor_section/exhibitor_section.html b/school/event_management/web_template/exhibitor_section/exhibitor_section.html index 94fc3684..5ac8ba8a 100644 --- a/school/event_management/web_template/exhibitor_section/exhibitor_section.html +++ b/school/event_management/web_template/exhibitor_section/exhibitor_section.html @@ -12,10 +12,10 @@
{{ widgets.Avatar(member=member, avatar_class="avatar-large")}} -
+
{{ member.full_name }}
-
+
{{exhibitor_doc.company}}
diff --git a/school/event_management/web_template/speaker_section/speaker_section.html b/school/event_management/web_template/speaker_section/speaker_section.html index ed35418a..c4f32962 100644 --- a/school/event_management/web_template/speaker_section/speaker_section.html +++ b/school/event_management/web_template/speaker_section/speaker_section.html @@ -12,10 +12,10 @@
{{ widgets.Avatar(member=member, avatar_class="avatar-large") }} -
+
{{ member.full_name }}
-
+
{{speaker_doc.company}}
diff --git a/school/event_management/web_template/talk_section/talk_section.html b/school/event_management/web_template/talk_section/talk_section.html index f6ababe3..bb8c10ef 100644 --- a/school/event_management/web_template/talk_section/talk_section.html +++ b/school/event_management/web_template/talk_section/talk_section.html @@ -60,7 +60,7 @@
{{ widgets.Avatar(member=member, avatar_class="avatar-small")}} {{ member.full_name }} - +
Vew Talk diff --git a/school/hooks.py b/school/hooks.py index 605ff7d4..391e73a1 100644 --- a/school/hooks.py +++ b/school/hooks.py @@ -182,6 +182,8 @@ jinja = { "school.lms.utils.get_mentors", "school.lms.utils.get_reviews", "school.lms.utils.is_eligible_to_review", + "school.lms.utils.get_initial_members", + "school.lms.utils.get_sorted_reviews" ], "filters": [] } diff --git a/school/lms/doctype/lms_certification/lms_certification.py b/school/lms/doctype/lms_certification/lms_certification.py index 0625506a..4f57c484 100644 --- a/school/lms/doctype/lms_certification/lms_certification.py +++ b/school/lms/doctype/lms_certification/lms_certification.py @@ -6,6 +6,7 @@ from frappe.model.document import Document from frappe.utils import nowdate, add_years from frappe import _ from frappe.utils.pdf import get_pdf +from school.lms.utils import is_certified class LMSCertification(Document): @@ -22,8 +23,7 @@ class LMSCertification(Document): @frappe.whitelist() def create_certificate(course): - course_details = frappe.get_doc("LMS Course", course) - certificate = course_details.is_certified() + certificate = is_certified() if certificate: return certificate diff --git a/school/lms/doctype/lms_course/lms_course.js b/school/lms/doctype/lms_course/lms_course.js index d40f641e..f9280ab2 100644 --- a/school/lms/doctype/lms_course/lms_course.js +++ b/school/lms/doctype/lms_course/lms_course.js @@ -20,6 +20,14 @@ frappe.ui.form.on('LMS Course', { } }; }); + + frm.set_query("course", "related_courses", function () { + return { + filters: { + "is_published": true, + } + }; + }); } }); diff --git a/school/lms/doctype/lms_course/lms_course.json b/school/lms/doctype/lms_course/lms_course.json index 5b63e616..84abccb2 100644 --- a/school/lms/doctype/lms_course/lms_course.json +++ b/school/lms/doctype/lms_course/lms_course.json @@ -10,7 +10,7 @@ "allow_guest_to_view": 1, "allow_import": 1, "allow_rename": 1, - "creation": "2021-03-01 16:49:33.622422", + "creation": "2022-02-08 16:34:42.721203", "doctype": "DocType", "editable_grid": 1, "engine": "InnoDB", @@ -31,6 +31,7 @@ "short_introduction", "description", "chapters", + "related_courses", "certification_section", "enable_certification", "expiry" @@ -141,6 +142,12 @@ "fieldtype": "Select", "label": "Certification Expires After Years", "options": "0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10" + }, + { + "fieldname": "related_courses", + "fieldtype": "Table", + "label": "Related Courses", + "options": "Related Courses" } ], "index_web_pages_for_search": 1, @@ -167,7 +174,7 @@ "link_fieldname": "course" } ], - "modified": "2022-02-07 11:41:39.735325", + "modified": "2022-02-16 11:50:20.661085", "modified_by": "Administrator", "module": "LMS", "name": "LMS Course", @@ -192,4 +199,4 @@ "states": [], "title_field": "title", "track_changes": 1 -} +} \ No newline at end of file diff --git a/school/lms/doctype/related_courses/__init__.py b/school/lms/doctype/related_courses/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/school/lms/doctype/related_courses/related_courses.js b/school/lms/doctype/related_courses/related_courses.js new file mode 100644 index 00000000..b68c26c2 --- /dev/null +++ b/school/lms/doctype/related_courses/related_courses.js @@ -0,0 +1,8 @@ +// Copyright (c) 2022, Frappe and contributors +// For license information, please see license.txt + +frappe.ui.form.on('Related Courses', { + // refresh: function(frm) { + + // } +}); diff --git a/school/lms/doctype/related_courses/related_courses.json b/school/lms/doctype/related_courses/related_courses.json new file mode 100644 index 00000000..0401eab6 --- /dev/null +++ b/school/lms/doctype/related_courses/related_courses.json @@ -0,0 +1,32 @@ +{ + "actions": [], + "allow_rename": 1, + "creation": "2022-02-16 11:45:07.200407", + "doctype": "DocType", + "editable_grid": 1, + "engine": "InnoDB", + "field_order": [ + "course" + ], + "fields": [ + { + "fieldname": "course", + "fieldtype": "Link", + "in_list_view": 1, + "label": "Course", + "options": "LMS Course" + } + ], + "index_web_pages_for_search": 1, + "istable": 1, + "links": [], + "modified": "2022-02-16 11:48:30.964916", + "modified_by": "Administrator", + "module": "LMS", + "name": "Related Courses", + "owner": "Administrator", + "permissions": [], + "sort_field": "modified", + "sort_order": "DESC", + "states": [] +} \ No newline at end of file diff --git a/school/lms/doctype/related_courses/related_courses.py b/school/lms/doctype/related_courses/related_courses.py new file mode 100644 index 00000000..443ad08b --- /dev/null +++ b/school/lms/doctype/related_courses/related_courses.py @@ -0,0 +1,8 @@ +# Copyright (c) 2022, Frappe and contributors +# For license information, please see license.txt + +# import frappe +from frappe.model.document import Document + +class RelatedCourses(Document): + pass diff --git a/school/lms/doctype/related_courses/test_related_courses.py b/school/lms/doctype/related_courses/test_related_courses.py new file mode 100644 index 00000000..6bac57b7 --- /dev/null +++ b/school/lms/doctype/related_courses/test_related_courses.py @@ -0,0 +1,8 @@ +# Copyright (c) 2022, Frappe and Contributors +# See license.txt + +# import frappe +import unittest + +class TestRelatedCourses(unittest.TestCase): + pass 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/lms/utils.py b/school/lms/utils.py index 52f17a5d..51ec23c6 100644 --- a/school/lms/utils.py +++ b/school/lms/utils.py @@ -1,6 +1,6 @@ import re import frappe -from frappe.utils import flt, cint +from frappe.utils import flt, cint, cstr from school.lms.md import markdown_to_html RE_SLUG_NOTALLOWED = re.compile("[^a-z0-9]+") @@ -128,7 +128,7 @@ def get_reviews(course): { "course": course }, - ["review", "rating", "owner"], + ["review", "rating", "owner", "creation"], order_by= "creation desc") out_of_ratings = frappe.db.get_all("DocField", { @@ -144,6 +144,22 @@ def get_reviews(course): return reviews +def get_sorted_reviews(course): + rating_count = rating_percent = frappe._dict() + keys = ["5.0", "4.0", "3.0", "2.0", "1.0"] + for key in keys: + rating_count[key] = 0 + + reviews = get_reviews(course) + for review in reviews: + rating_count[cstr(review.rating)] += 1 + + for key in keys: + rating_percent[key] = (rating_count[key]/len(reviews) * 100) + + + return rating_percent + def is_certified(course): certificate = frappe.get_all("LMS Certification", { @@ -258,3 +274,18 @@ def get_course_progress(course, member=None): }) precision = cint(frappe.db.get_default("float_precision")) or 3 return flt(((completed_lessons/lesson_count) * 100), precision) + +def get_initial_members(course): + members = frappe.get_all("LMS Batch Membership", + { + "course": course + }, + ["member"], + limit=3) + + member_details = [] + for member in members: + member_details.append(frappe.db.get_value("User", + member.member, ["name", "username", "full_name", "user_image"], as_dict=True)) + + return member_details diff --git a/school/lms/web_template/course_cards/course_cards.html b/school/lms/web_template/course_cards/course_cards.html index cbf9563a..405697e7 100644 --- a/school/lms/web_template/course_cards/course_cards.html +++ b/school/lms/web_template/course_cards/course_cards.html @@ -7,10 +7,8 @@ {{ widgets.CourseCard(course=course, read_only=False) }} {% endfor %}
- -
- Explore More -
- + + {{ _("Explore More") }} +
diff --git a/school/lms/widgets/ChapterTeaser.html b/school/lms/widgets/ChapterTeaser.html deleted file mode 100644 index 7376acfd..00000000 --- a/school/lms/widgets/ChapterTeaser.html +++ /dev/null @@ -1,123 +0,0 @@ -
- - - -
- - {% if chapter.description %} -
- {{ chapter.description }} -
- {% endif %} - - {% set is_instructor = frappe.session.user == course.instructor %} -
- - {% for lesson in get_lessons(course.name, chapter) %} - -
- - {% if membership or lesson.include_in_preview %} - - {{ lesson.title }} - - {% if membership %} - - {% endif %} - - - - {% elif is_instructor and not lesson.include_in_preview %} - - {{ lesson.title }} - - - - {% else %} -
-
- {{ lesson.title }} - -
-
- {% endif %} - -
- {% endfor %} - -
-
-
- -{% if index != get_chapters(course.name) | length %} -
-{% endif %} - - diff --git a/school/lms/widgets/CourseCard.html b/school/lms/widgets/CourseCard.html index 8e089921..52f613ed 100644 --- a/school/lms/widgets/CourseCard.html +++ b/school/lms/widgets/CourseCard.html @@ -58,11 +58,11 @@ {% endif %} - + {% set student_count = get_students(course.name) | length %} {% if student_count %} - + {{ student_count }} @@ -85,15 +85,8 @@ membership.current_lesson else '1.1' %} {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %} - {% set certificate = is_certified(course.name) %} - {% if certificate %} - - - {% elif course.enable_certification and progress == 100 %} - - - {% elif progress == 100 %} + {% if progress == 100 %} {% elif course.upcoming %} @@ -109,27 +102,3 @@ {% endif %}
- - diff --git a/school/lms/widgets/CourseOutline.html b/school/lms/widgets/CourseOutline.html index 5c1e47db..ab44b730 100644 --- a/school/lms/widgets/CourseOutline.html +++ b/school/lms/widgets/CourseOutline.html @@ -1,12 +1,131 @@ {% if get_chapters(course.name) | length %} -
+
- Course Outline + {{ _("Course Content") }}
-
- {% for chapter in get_chapters(course.name) %} - {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, membership=membership) }} - {% endfor %} + {% for chapter in get_chapters(course.name) %} +
+ + +
+ + {% if chapter.description %} +
+ {{ chapter.description }} +
+ {% endif %} + + {% set is_instructor = frappe.session.user == course.instructor %} +
+ + {% for lesson in get_lessons(course.name, chapter) %} + +
+ + {% if membership or lesson.include_in_preview %} + + {{ lesson.title }} + + {% if membership %} + + {% endif %} + + + + {% elif is_instructor and not lesson.include_in_preview %} + + +
{{ lesson.title }}
+ + + {% else %} +
+
+ +
{{ lesson.title }}
+
+
+ {% endif %} + +
+ {% endfor %} + +
+
+ {% endfor %}
{% endif %} + + diff --git a/school/lms/widgets/MemberCard.html b/school/lms/widgets/MemberCard.html index 6205e0e7..7169ce2c 100644 --- a/school/lms/widgets/MemberCard.html +++ b/school/lms/widgets/MemberCard.html @@ -1,12 +1,12 @@
{{ widgets.Avatar(member=member, avatar_class=avatar_class) }} -
+
{{ member.full_name }}
{% set course_count = get_authored_courses(member.name) | length %} {% if show_course_count and course_count > 0 %} {% set suffix = "Courses" if course_count > 1 else "Course" %} -
+
Created {{ course_count }} {{ suffix }}
{% endif %} diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html index 250d63f2..bd1670c1 100644 --- a/school/lms/widgets/Reviews.html +++ b/school/lms/widgets/Reviews.html @@ -10,29 +10,76 @@ {% endif %}
- {% if reviews | length %} -
- {% for review in reviews %} -
-
{{ review.review }}
-
-
- {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }} - - - {{ review.owner_details.full_name }} - - -
+ {% set avg_rating = get_average_rating(course.name) %} +
+
+
{{ avg_rating }}
+
{{ reviews | length }} {{ _("ratings") }}
+
{% for i in [1, 2, 3, 4, 5] %} - + {% endfor %}
+
{{ avg_rating }} {{ _("out of 5 ") }}
+
+ {% set sorted_reviews = get_sorted_reviews(course.name) %} +
+ {% for review in sorted_reviews %} +
+
{{ frappe.utils.cint(review) }} {{ _("stars") }}
+
+
+ {{ sorted_reviews[review] }} Complete +
+
+
{{ frappe.utils.cint(sorted_reviews[review]) }}%
+
+ {% endfor %} +
+
+ + + + + {% if reviews | length %} +
+ {% for review in reviews %} +
+
+
+
+ {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }} +
+
+ + + {{ review.owner_details.full_name }} + + +
+ {% for i in [1, 2, 3, 4, 5] %} + + + + {% endfor %} +
+
+
+
+
{{ review.review }}
+
frappe.utils.pretty_date(review.creation)
+
+
+
+ {% if loop.index != reviews | length %} +
+ {% endif %} {% endfor %}
diff --git a/school/public/css/style.css b/school/public/css/style.css index 466cd299..cf96ef7b 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -8,10 +8,15 @@ --text-2xl: 20px; --text-3xl: 22px; --text-3-5xl: 24px; + --text-3-8xl: 34px; --text-4xl: 44px; --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08); } +body { + background-color: #FFFFFF; +} + input[type=checkbox] { appearance: auto; } @@ -19,8 +24,6 @@ input[type=checkbox] { .course-image { height: 168px; width: 100%; - border-top-left-radius: 8px; - border-top-right-radius: 8px; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -66,6 +69,7 @@ input[type=checkbox] { font-weight: 600; box-shadow: var(--popover-box-shadow); color: var(--gray-900); + width: fit-content; } .dark-pills { @@ -96,6 +100,7 @@ input[type=checkbox] { flex-direction: column; height: 100%; min-height: 350px; + overflow: auto; } .muted-text { @@ -120,6 +125,12 @@ input[type=checkbox] { flex: 1 1 auto; } +@media (max-width: 400px) { + .course-card-content { + padding: 0 0.5rem 1.25rem; + } +} + @media (max-width: 350px) { .course-card-content { padding: 0px 10px 10px; @@ -155,6 +166,12 @@ input[type=checkbox] { color: var(--gray-700); } +@media (max-width: 400px) { + .course-instructor { + margin-left: 0; + } +} + .course-student-count { display: flex; font-size: 12px; @@ -279,7 +296,6 @@ input[type=checkbox] { } .review-card-footer { - display: flex; margin-top: 20px; justify-content: space-between; } @@ -293,10 +309,6 @@ input[type=checkbox] { width: 100px; } -.rating .star-click { - --star-fill: #74808B; -} - .custom-checkbox { display: flex; align-items: center; @@ -329,26 +341,13 @@ input[type=checkbox] { } .course-card-wide { - display: flex; - flex-direction: row; - padding: 24px; - background: #E2E6E9; - border-radius: var(--border-radius-md); - margin-top: 16px; - box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.02), 0px 0px 8px rgba(0, 0, 0, 0.04); + margin-top: 1rem; + width: 60%; } @media (max-width: 768px) { .course-card-wide { - flex-direction: column; - } -} - -@media (max-width: 600px) { - .course-card-wide { - padding: 40px 24px 40px; - border-radius: 0px; - align-items: center; + width: 100%; } } @@ -380,13 +379,6 @@ input[type=checkbox] { } } -@media (max-width: 500px) { - .course-home-page { - padding-right: 0; - padding-left: 0; - } -} - .course-card-wide-content { display: flex; flex-direction: column; @@ -394,49 +386,12 @@ input[type=checkbox] { justify-content: space-between; } -@media (max-width: 768px) { - .course-card-wide-content { - width: 100%; - } -} - -@media (max-width: 600px) { - .course-card-wide-content { - width: 90%; - align-items: center; - } -} - .course-card-wide-title { - font-style: normal; - font-weight: 600; - font-size: 40px; - line-height: 120%; - color: var(--gray-800); - margin-bottom: 8px; -} - -@media (max-width: 768px) { - .course-card-wide-title { - margin-top: 24px; - font-size: 36px; - } -} - -@media (max-width: 600px) { - .course-card-wide-title { - margin-top: 16px; - font-size: 28px; - } -} - -.course-card-wide-intro { - font-size: 16px; - line-height: 172%; - letter-spacing: -0.011em; - margin-bottom: 16px; - display: flex; - flex-wrap: wrap; + font-weight: bold; + font-size: 36px; + line-height: 44px; + color: var(--gray-900); + margin-bottom: 0.75rem; } .button { @@ -449,6 +404,7 @@ input[type=checkbox] { padding: 0.25rem 1.25rem; font-size: var(--text-md); line-height: 20px; + box-shadow: var(--btn-shadow); } .button:disabled { @@ -456,16 +412,13 @@ input[type=checkbox] { } .wide-button { - padding: 12px 24px 12px; - height: 48px; - margin-right: 16px; - font-size: 16px; - line-height: 150%; + padding: 0.5rem 6rem; + font-weight: 500; } -@media (max-width: 600px) { +@media (max-width: 768px) { .wide-button { - width: 264px; + padding: 0.5rem 4rem; } } @@ -499,28 +452,26 @@ input[type=checkbox] { color: #FFFFFF; } -.course-home-outline { - margin-top: 3rem; -} - -.small-title { - letter-spacing: -0.011em; +.course-home-page .course-home-outline { + margin: 5rem 0 4rem; } .chapter-title { - font-weight: bold; - margin: 0 .25rem 0; + font-weight: 500; cursor: pointer; + border-radius: var(--border-radius-lg); + padding: 0.75rem 0; + color: var(--gray-900); display: flex; align-items: center; - padding-bottom: 1rem; +} + +.chapter-title[aria-expanded="true"] { + background: var(--gray-100); } .chapter-description { - height: fit-content; - padding-left: 1rem; - padding-right: 1rem; - margin-bottom: 0.75rem; + margin: 0.75rem 3rem 1rem; } .course-content-parent .chapter-description { @@ -528,7 +479,7 @@ input[type=checkbox] { } .chapter-icon { - margin-right: .25rem; + margin: 0 1.25rem; } .course-outline-instructor-parent { @@ -579,17 +530,11 @@ input[type=checkbox] { } .reviews-parent { - margin-top: 3rem; -} - -@media (max-width: 600px) { - .reviews-parent { - padding: 0px 24px 0px; - } + margin: 5rem 0; } .course-description-section { - margin-top: 3rem; + margin-top: 3.75rem; } .course-overview-section { @@ -600,21 +545,20 @@ input[type=checkbox] { font-size: 16px; line-height: 250%; letter-spacing: -0.011em; + margin-top: 0.5rem; } .lesson-links { display: flex; padding: 0 1rem; - margin-bottom: .25rem; color: inherit; } .lesson-links:hover { cursor: pointer; text-decoration: none; - background: #F4F5F6; color: inherit; - border-radius: var(--border-radius-sm); + border-radius: var(--border-radius-md); } .course-content-parent .lesson-links { @@ -635,7 +579,7 @@ input[type=checkbox] { } .lessons { - margin-bottom: 1rem; + margin-left: 2rem; } .course-buttons { @@ -906,9 +850,9 @@ input[type=checkbox] { .breadcrumb { display: flex; align-items: center; - font-size: 12px; - line-height: 135%; - color: var(--gray-800); + font-size: var(--text-md); + line-height: 20px; + color: var(--gray-900); } .course-details-outline { @@ -962,8 +906,8 @@ input[type=checkbox] { } .active-lesson { - background-color: #EBF5FF; - border-radius: var(--border-radius-sm); + background-color: var(--gray-100); + border-radius: var(--border-radius-md); } .lesson-progress { @@ -1192,6 +1136,7 @@ input[type=checkbox] { .progress { width: 100%; height: 4px; + background-color: var(--gray-500); } .progress-bar { @@ -1324,19 +1269,6 @@ pre { .navbar { box-shadow: var(--navbar-shadow); } - -.interactive-arrow { - background-image: url("/assets/school/icons/arrow.svg"); - width: 1.5rem; - height: 1.5rem; - margin-left: 0.5rem; -} - -.intercative-link:hover .interactive-arrow{ - background-image: url("/assets/school/icons/blue-arrow.svg"); - margin-left: 1.5rem; -} - .search { background-image: url(/assets/frappe/icons/timeless/search.svg); border: 1px solid #C8CFD5; @@ -1403,8 +1335,17 @@ pre { } .carousel-control-prev, .carousel-control-next { - position: inherit; width: auto; + top: 30%; + height: fit-content; + background: white; + border-radius: 50%; + box-shadow: var(--shadow-sm); + opacity: 1; +} + +.related-courses .carousel-control-prev, .related-courses .carousel-control-next { + top: 40%; } .carousel-indicators { @@ -1412,6 +1353,16 @@ pre { margin: 0; } +.carousel { + padding: 0 1rem; +} + +@media (max-width: 500px) { + .carousel { + padding: 0 0.5rem; + } +} + .slider-controls { display: flex; align-items: center; @@ -1563,3 +1514,170 @@ pre { content: "\00B7"; margin: 0 8px; } + +.course-head-container { + color: var(--gray-900); +} + +.course-intructor-rating-section { + display: flex; + align-items: center; + margin-top: 3.5rem; +} + +.course-intructor-rating-section .seperator::before { + content: "\00B7"; + margin: 0 1rem; +} + +.course-head-container .progress { + margin-top: 2.75rem; +} + +.course-overlay-card { + background-color: white; + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-sm); + overflow: auto; + width: fit-content; + position: absolute; + top: 40%; + right: 7%; + max-width: 400px; +} + +@media (max-width: 768px) { + .course-overlay-card { + position: inherit; + margin-top: 1rem; + } + + .course-intructor-rating-section .seperator::before { + content: "\00B7"; + margin: 0 0.25rem; + } +} + +.video-in-overlay { + top: 20%; +} + +.course-overlay-content { + padding: 1.25rem; + font-size: var(--text-base); + color: var(--gray-700); +} + +.breadcrumb-destination { + color: var(--gray-600); +} + +.preview-video { + width: 100%; + height: 190px; + border: none; +} + +.course-body-container { + width: 60%; +} + +@media (max-width: 768px) { + .course-body-container { + width: 100%; + } +} + +.overlay-heading { + margin-top: 2rem; + font-weight: 600; + color: var(--gray-800); +} + +.overlay-student-count { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; +} + +.course-creators-card { + display: grid; + grid-gap: 1rem; + padding: 1rem; + background-color: var(--gray-100); + box-shadow: none; +} + +.course-creator-name { + font-size: var(--text-xl); + font-weight: 500; + color: var(--gray-900); +} + +.course-meta { + font-size: var(--text-base); + color: var(--gray-600); +} + +.avg-rating { + font-size: var(--text-3-8xl); + color: var(--gray-900); + font-weight: bold; +} + +.reviews-header { + display: flex; + justify-content: space-between; + width: 75%; +} + +@media (max-width: 768px) { + .reviews-header { + width: 100%; + } +} + +@media (max-width: 500px) { + .reviews-header { + flex-direction: column; + align-items: center; + } + + .vertical-divider { + margin: 1rem 0; + } +} + +.review-author { + font-size: var(--text-lg); + color: var(--gray-900); + font-weight: 600; +} + +.star-click { + --star-fill: var(--yellow-500); +} + +.rating { + --star-fill: var(--gray-400); +} + +.vertical-divider { + border: 1px solid var(--gray-300); +} + +.avg-rating-stars { + background: var(--gray-200); + border-radius: 100px; + padding: 0.5rem 0.75rem; + margin: 1.25rem 0 0.5rem; +} + +.reviews-parent .progress { + width: 200px; +} + +.reviews-parent .progress-bar { + background-color: var(--gray-600); +} diff --git a/school/public/icons/book.svg b/school/public/icons/book.svg new file mode 100644 index 00000000..5e597941 --- /dev/null +++ b/school/public/icons/book.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/school/public/icons/user.svg b/school/public/icons/user.svg index 4e56156c..071fecfa 100644 --- a/school/public/icons/user.svg +++ b/school/public/icons/user.svg @@ -1,4 +1,4 @@ - - + + diff --git a/school/www/batch/learn.js b/school/www/batch/learn.js index 7fc66b84..25824704 100644 --- a/school/www/batch/learn.js +++ b/school/www/batch/learn.js @@ -104,7 +104,7 @@ const mark_progress = (e) => { callback: (data) => { change_progress_indicators(status, e); show_certificate_if_course_completed(data); - move_to_next_lesson(e); + move_to_next_lesson(status, e); } }); } @@ -134,10 +134,20 @@ const show_certificate_if_course_completed = (data) => { } }; -const move_to_next_lesson = (e) => { +const move_to_next_lesson = (status, e) => { if ($(e.currentTarget).hasClass("next") && $(e.currentTarget).attr("data-href")) { window.location.href = $(e.currentTarget).attr("data-href"); } + else if (status == "Complete") { + $("input.mark-progress").closest(".custom-checkbox").addClass("hide"); + $("div.mark-progress").removeClass("hide"); + $(".next").addClass("hide"); + } + else { + $("input.mark-progress").closest(".custom-checkbox").removeClass("hide"); + $("div.mark-progress").addClass("hide"); + $(".next").removeClass("hide"); + } }; const quiz_summary = (e) => { diff --git a/school/www/courses/course.html b/school/www/courses/course.html index 11f67e90..ac824558 100644 --- a/school/www/courses/course.html +++ b/school/www/courses/course.html @@ -1,234 +1,246 @@ {% extends "templates/base.html" %} -{% from "www/macros/common_macro.html" import MentorsSection %} {% block title %}{{ course.title }} {% endblock %} {% block head_include %} {% endblock %} {% block content %} -
+
+ {{ CourseHomeHeader(course) }}
- {{ widgets.BreadCrumb(course=course) }} - {{ CourseCardWide(course) }} - {{ CourseSections(course) }} - {{ Mentors(course) }} - {{ widgets.Reviews(course=course, membership=membership) }} +
+ {{ Description(course) }} + {{ widgets.CourseOutline(course=course, membership=membership) }} + {{ CourseCreator(course) }} + {{ widgets.Reviews(course=course, membership=membership) }} +
+ {{ RelatedCourses(course) }}
{% endblock %} +{% macro CourseHomeHeader(course) %} +
+
+ {{ BreadCrumb(course) }} + {{ CourseCardWide(course) }} + {{ CourseHeaderOverlay(course) }} +
+
+ +{% endmacro %} + + +{% macro BreadCrumb(course) %} +
+ {{ _("All Courses") }} + + {{ course.title }} +
+{% endmacro %} {% macro CourseCardWide(course) %} -
-
-
- {% for tag in course.get_tags() %} -
{{ tag }}
+
+
+ {% for tag in get_tags(course.name) %} +
{{ tag }}
+ {% endfor %} +
+
+ {{ course.title }} +
+
+ {{ course.short_introduction }} +
+ +
+
+ {% set instructors = get_instructors(course.name) %} + {% 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 %} + + +
+ + + + {% set avg_rating = get_average_rating(course.name) %} + {% if avg_rating %} +
+ {% for i in [1, 2, 3, 4, 5] %} + + + {% endfor %}
- {% if not course.image %} -
{{ course.title[0] }}
+ {{ avg_rating }} {{ _(" Rating ") }} {% endif %}
-
-
-
- {{ course.title }} -
-
- {{ course.short_introduction }} -
-
-
- {% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %} -
- {{ _("Start Learning") }} - -
- {% endif %} - {% if membership %} - {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and - membership.current_lesson - else '1.1' %} - - Continue Learning - - {% endif %} - {% if course.upcoming and not is_user_interested %} - - {% endif %} - {% if course.video_link %} -
- Watch Video Preview - -
- {% endif %} - {% if is_cohort_staff(course.name, frappe.session.user) %} - - Manage the course - - {% endif %} + {% if membership %} + {% set progress = frappe.utils.cint(membership.progress) %} +
+
+ {{ progress }} Complete
+
{{ progress }}% Completed
+ {% endif %} +
-
- You have opted to be notified for this course. You will receive an email when the course becomes available. - × -
- -{% if course.video_link %} - -{% endif %} {% endmacro%} - +{% macro CourseHeaderOverlay(course) %} +
-{% macro CourseSections(course) %} -
-
- {{ widgets.CourseOutline(course=course, membership=membership) }} - {{ Description(course) }} -
-
- {{ CreatorSection(course) }} - {{ Progress(course) }} - {{ Overview(course) }} -
-
-{% endmacro %} + {% if course.video_link %} + + {% endif %} -{% macro CreatorSection(course) %} -
-
- Creator -
- {% for instructor in get_instructors(course.name) %} - {{ widgets.MemberCard(member=instructor, show_course_count=True, avatar_class="avatar-large") }} - {% endfor %} -
-{% endmacro %} +
-{% macro Progress(course) %} -{% set certificate = is_certified(course.name) %} -{% set progress = frappe.utils.cint(membership.progress) %} -{% if progress %} -
-
- Your Progress -
-
-

- {% if progress != 100 %} - Great work so far! - {% else %} - Excellent work on completing this course 👏 - {% endif %} -

-

- {% if progress != 100 %} - Challenge yourself to complete the lessons and grow professionally. - {% else %} - You have reached a new level in your journey to success! - {% endif %} -

-
- {{ frappe.utils.rounded(progress) }}% +
+ You have opted to be notified for this course. You will receive an email when the course becomes available.
-
-
+ + {% if get_students(course.name) | length %} + {% set initial_members = get_initial_members(course.name) %} +
+ {% for member in initial_members %} + {% if initial_members | length > 1 and loop.index == 1 %} +
+ {% endif %} + {{ widgets.Avatar(member=member, avatar_class="avatar-small") }} + + {% if initial_members | length > 1 and loop.index == initial_members | length %} +
+ {% endif %} + {% endfor %} + +
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
+
+ {% endif %} + + + {% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %} +
+ {{ _("Start Learning") }} + +
+ {% endif %} + + {% if membership %} + {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and + membership.current_lesson + else '1.1' %} + + Continue Learning + + {% endif %} + + {% if course.upcoming and not is_user_interested %} +
+ Notify me when available +
+ {% endif %} + + {% if is_cohort_staff(course.name, frappe.session.user) %} + + Manage the course + + {% endif %} + +
{{ _("Course Include:") }}
+ {% if get_lessons(course.name) | length %} +
+ + {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
- {% if certificate %} - Get - Certificate {% endif %}
+
-{% endif %} {% endmacro %} {% macro Description(course) %}
-
- Course Description -
-
- {{ frappe.utils.md_to_html(course.description) }} -
+ {{ frappe.utils.md_to_html(course.description) }}
{% endmacro %} -{% macro Overview(course) %} -{% set avg_rating = get_average_rating(course.name) %} -{% if get_students(course.name) | length or avg_rating %} -
-
- Overview +{% 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") }}
+
-
- {% if get_students(course.name) | length %} -
- - {{ get_students(course.name) | length }} Enrolled -
- {% endif %} - {% if avg_rating %} -
- - {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} Rating + {% endfor %} +
+{% endmacro %} + +{% macro RelatedCourses(course) %} +{% if course.related_courses | length %} +
+
{{ _("Other Courses") }}
+
-{% endif %} -{% endmacro %} - - - -{% macro Mentors(course) %} -{% if get_mentors(course.name) | length %} -
-
- Mentors -
-
- {% for mentor in get_mentors(course.name) %} - {{ widgets.MemberCard(member=mentor, show_course_count=False) }} - {% endfor %} -
-
- - View all mentors - -
-
-{% endif %} +{% endif%} {% endmacro %} diff --git a/school/www/courses/course.py b/school/www/courses/course.py index c584c09a..612088ef 100644 --- a/school/www/courses/course.py +++ b/school/www/courses/course.py @@ -11,7 +11,17 @@ def get_context(context): frappe.local.flags.redirect_location = "/courses" raise frappe.Redirect - course = frappe.get_doc("LMS Course", course_name) + course = frappe.db.get_value("LMS Course", course_name, + ["name", "title", "image", "short_introduction", "description", "is_published", "upcoming", + "disable_self_learning", "video_link"], + as_dict=True) + + related_courses = frappe.get_all("Related Courses", {"parent": course.name}, ["course"]) + for csr in related_courses: + csr.update(frappe.db.get_value("LMS Course", + csr.course, ["name", "upcoming", "title", "image", "enable_certification"], as_dict=True)) + course.related_courses = related_courses + if course is None: frappe.local.flags.redirect_location = "/courses" raise frappe.Redirect diff --git a/school/www/profiles/profile.html b/school/www/profiles/profile.html index c4d16556..02008d86 100644 --- a/school/www/profiles/profile.html +++ b/school/www/profiles/profile.html @@ -78,7 +78,7 @@
Overview
-
+
{% if enrollment %}
From 1e7209bafa5d2ad2cc8a747cbc49d19400c92713 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 16 Feb 2022 20:41:20 +0530 Subject: [PATCH 2/2] style: banner --- school/lms/md.py | 2 +- school/public/css/style.css | 10 ++++++- school/www/courses/course.html | 55 ++++++++++++++++++---------------- 3 files changed, 39 insertions(+), 28 deletions(-) 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": diff --git a/school/public/css/style.css b/school/public/css/style.css index cf96ef7b..d7deff62 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -1136,6 +1136,9 @@ input[type=checkbox] { .progress { width: 100%; height: 4px; +} + +.course-card-wide .progress { background-color: var(--gray-500); } @@ -1348,6 +1351,11 @@ pre { top: 40%; } +.related-courses { + background: var(--gray-50); + padding: 5rem 0; +} + .carousel-indicators { position: inherit; margin: 0; @@ -1559,7 +1567,7 @@ pre { } .video-in-overlay { - top: 20%; + top: 30%; } .course-overlay-content { diff --git a/school/www/courses/course.html b/school/www/courses/course.html index ac824558..3cc0c72e 100644 --- a/school/www/courses/course.html +++ b/school/www/courses/course.html @@ -14,8 +14,8 @@ {{ CourseCreator(course) }} {{ widgets.Reviews(course=course, membership=membership) }}
- {{ RelatedCourses(course) }}
+ {{ RelatedCourses(course) }}
{% endblock %} @@ -214,33 +214,36 @@ {% macro RelatedCourses(course) %} {% if course.related_courses | length %}
-
{{ _("Other Courses") }}
-