From ef5cf4bd965f7ca40a8e649d555cbbf10b230faf Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 16 Mar 2022 18:53:09 +0530 Subject: [PATCH] fix: course home, course cards and course outline cleanup --- school/lms/utils.py | 9 +- school/lms/widgets/CourseCard.html | 43 ++++++---- school/lms/widgets/CourseOutline.html | 31 +++++-- school/lms/widgets/Reviews.html | 28 ++++--- school/public/css/style.css | 116 ++++++++++++-------------- school/public/icons/lock.svg | 3 - school/public/icons/symbol-defs.svg | 27 ++++++ school/www/batch/learn.html | 2 +- school/www/courses/course.html | 110 ++++++++++++------------ 9 files changed, 211 insertions(+), 158 deletions(-) delete mode 100644 school/public/icons/lock.svg create mode 100644 school/public/icons/symbol-defs.svg diff --git a/school/lms/utils.py b/school/lms/utils.py index 8f2356fe..7c77288f 100644 --- a/school/lms/utils.py +++ b/school/lms/utils.py @@ -1,7 +1,7 @@ import re import frappe from frappe.utils import flt, cint, cstr -from school.lms.md import markdown_to_html +from school.lms.md import markdown_to_html, find_macros import string from frappe import _ @@ -85,6 +85,13 @@ def get_lesson_details(chapter): lesson_details = frappe.db.get_value("Course Lesson", row.lesson, ["name", "title", "include_in_preview", "body", "creation"], as_dict=True) lesson_details.number = flt("{}.{}".format(chapter.idx, row.idx)) + lesson_details.icon = "icon-list" + macros = find_macros(lesson_details.body) + for macro in macros: + if macro[0] == "YouTubeVideo": + lesson_details.icon = "icon-video" + elif macro[0] == "Quiz": + lesson_details.icon = "icon-quiz" lessons.append(lesson_details) return lessons diff --git a/school/lms/widgets/CourseCard.html b/school/lms/widgets/CourseCard.html index 52f613ed..a531cae5 100644 --- a/school/lms/widgets/CourseCard.html +++ b/school/lms/widgets/CourseCard.html @@ -17,10 +17,33 @@
{% if get_lessons(course.name) | length %} - +
+ + + {{ get_lessons(course.name) | length }} {{ _("Lessons") }} - +
{% endif %} + + {% set student_count = get_students(course.name) | length %} + {% if student_count %} +
+ + + + {{ student_count }} +
+ {% endif %} + + {% set avg_rating = get_average_rating(course.name) %} + {% if avg_rating %} +
+ + + + {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} +
+ {% endif %}
{{ course.title }}
@@ -59,22 +82,6 @@ - {% set student_count = get_students(course.name) | length %} - - {% if student_count %} - - - {{ student_count }} - - {% endif %} - {% set avg_rating = get_average_rating(course.name) %} - {% if avg_rating %} - - - {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} - - {% endif %} -
{% if read_only %} diff --git a/school/lms/widgets/CourseOutline.html b/school/lms/widgets/CourseOutline.html index d80b7f9a..b5a8bb8e 100644 --- a/school/lms/widgets/CourseOutline.html +++ b/school/lms/widgets/CourseOutline.html @@ -23,12 +23,15 @@
{% for lesson in get_lessons(course.name, chapter) %} - -
+ {% set active = membership.current_lesson == lesson.name %} +
{% if membership or lesson.include_in_preview %} + + + {{ lesson.title }} {% if membership %} @@ -43,14 +46,18 @@ title="This lesson is not available for preview. As you are the Instructor of the course only you can see it." href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}" data-course="{{ course.name }}"> - + + +
{{ lesson.title }}
 {% else %}
- + + +
{{ lesson.title }}
@@ -83,7 +90,7 @@ frappe.ready(() => { }); const expand_the_first_chapter = () => { - var elements = $(".course-outline .collapse"); + let elements = $(".course-outline .collapse"); elements.each((i, element) => { if (i < 1) { show_section(element); @@ -95,13 +102,21 @@ const expand_the_first_chapter = () => { const expand_the_active_chapter = () => { /* Find anchor matching the URL for course details page */ - var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent(); + let selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent(); if (!selector.length) { selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent(); } if (selector.length && $(".course-details-page").length) { - $(".lesson-info").removeClass("active-lesson") + $(".lesson-info").removeClass("active-lesson"); + $(".lesson-info").each((i, elem) => { + let href = $(elem).find("use").attr("href"); + href.endsWith("blue") && $(elem).find("use").attr("href", href.substring(0, href.length - 5)); + }) + 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()); } @@ -124,7 +139,7 @@ const show_section = (element) => { }; const rotate_chapter_icon = (e) => { - var icon = $(e.currentTarget).children(".chapter-icon"); + let icon = $(e.currentTarget).children(".chapter-icon"); if (icon.css("transform") == "none") { icon.css("transform", "rotate(90deg)"); } else { diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html index 56c11e67..71e1b907 100644 --- a/school/lms/widgets/Reviews.html +++ b/school/lms/widgets/Reviews.html @@ -19,7 +19,7 @@
{% for i in [1, 2, 3, 4, 5] %} - + {% endfor %} @@ -49,14 +49,16 @@ {% if reviews | length %}
{% for review in reviews %} -
-
-
-
- {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }} -
- {% if loop.index != reviews | length %}
diff --git a/school/public/css/style.css b/school/public/css/style.css index 327ad8f3..1986242f 100644 --- a/school/public/css/style.css +++ b/school/public/css/style.css @@ -58,7 +58,7 @@ input[type=checkbox] { letter-spacing: 0.011em; text-transform: uppercase; font-weight: 600; - box-shadow: var(--popover-box-shadow); + box-shadow: var(--shadow-sm); color: var(--gray-900); width: fit-content; } @@ -99,47 +99,32 @@ input[type=checkbox] { } .course-card-meta { - margin: 0.75rem 0 0.5rem; + display: flex; + align-items: center; + justify-content: space-between; font-size: var(--text-base); - color: var(--gray-600); + color: var(--gray-900); + margin-bottom: 0.5rem; } -.course-card-meta-2 { - color: var(--gray-700); +.course-card-meta .icon { + margin: 0; + margin-right: 0.25rem; } .course-card-content { - padding: 0 1.25rem 1.25rem; + padding: 1rem; display: flex; flex-direction: column; 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; - } -} - .course-card-title { - font-size: 1.125rem; font-weight: 600; - color: var(--gray-800); + color: var(--gray-900); margin-bottom: 1.25rem; } -@media (max-width: 360px) { - .card-heading { - font-size: 0.875rem; - } -} - .card-divider { border-top: 1px solid var(--gray-300); margin-bottom: 1rem; @@ -151,9 +136,8 @@ input[type=checkbox] { } .course-instructor { - margin-left: 0.625rem; - font-size: 0.875rem; - color: var(--gray-700); + margin-left: 0.5rem; + font-size: var(--text-base); } @media (max-width: 400px) { @@ -164,9 +148,9 @@ input[type=checkbox] { .course-student-count { display: flex; - font-size: 12px; + font-size: var(--text-base); float: right; - font-weight: 500; + color: var(--gray-900); } .course-card-footer { @@ -222,12 +206,12 @@ input[type=checkbox] { } .button-links { - color: #4C5A67; + color: var(--gray-900); } .button-links:hover { text-decoration: none; - color: #4C5A67; + color: var(--gray-900); } .icon-background { @@ -243,14 +227,9 @@ input[type=checkbox] { height: 100%; } -.review-card-footer { - margin-top: 20px; - justify-content: space-between; -} - .review-content { - padding: 24px; - flex: 1; + margin: 1rem 0 0 3.5rem; + color: var(--gray-700); } .submit-review { @@ -290,8 +269,12 @@ input[type=checkbox] { } .course-card-wide { - margin-top: 1rem; - width: 60%; + background-color: white; + padding: 0 1rem 1rem; + border-radius: var(--border-radius); + width: 50%; + box-shadow: var(--shadow-base); + font-size: var(--text-base); } @media (max-width: 768px) { @@ -382,14 +365,14 @@ input[type=checkbox] { font-weight: 500; cursor: pointer; border-radius: var(--border-radius-lg); - padding: 0.75rem 0; + padding: 0.55rem 0; color: var(--gray-900); display: flex; align-items: center; } .chapter-description { - margin: 0.75rem 3rem 1rem; + margin: 0 2rem 0.5rem; } .course-content-parent .chapter-description { @@ -397,11 +380,12 @@ input[type=checkbox] { } .chapter-icon { - margin-right: 1.25rem; + margin-right: 0.5rem; } .reviews-parent { margin: 5rem 0; + color: var(--gray-900); } .course-description-section { @@ -410,12 +394,14 @@ input[type=checkbox] { .lesson-info { font-size: 16px; + color: var(--gray-900); letter-spacing: -0.011em; } .lesson-links { display: flex; - padding: 0.75rem 1rem; + align-items: center; + padding: 0.5rem; color: inherit; } @@ -431,9 +417,7 @@ input[type=checkbox] { } .course-content-parent .lesson-links { - padding: 0.5rem 1rem; font-size: var(--text-md); - line-height: 200%; } .course-outline { @@ -442,7 +426,7 @@ input[type=checkbox] { } .lessons { - margin-left: 2.5rem; + margin-left: 2rem; } .member-card { @@ -583,6 +567,7 @@ input[type=checkbox] { font-size: var(--text-md); line-height: 20px; color: var(--gray-900); + padding: 1rem 0; } .course-details-outline { @@ -817,8 +802,8 @@ input[type=checkbox] { } .progress-percent { - margin: 0.5rem 0 1.3rem; - font-size: 0.8rem; + margin: 0.5rem 0; + font-size: var(--text-base); font-weight: 500; } @@ -1206,16 +1191,15 @@ pre { .course-intructor-rating-section { display: flex; align-items: center; - margin-top: 3.5rem; + margin-top: 2rem; } -.course-intructor-rating-section .seperator::before { - content: "\00B7"; +.seperator { margin: 0 1rem; } .course-head-container .progress { - margin-top: 2.75rem; + margin-top: 1rem; } .course-overlay-card { @@ -1225,7 +1209,7 @@ pre { overflow: auto; width: fit-content; position: fixed; - top: 40%; + top: 50%; right: 7%; max-width: 400px; z-index: 4; @@ -1237,20 +1221,19 @@ pre { margin-top: 1rem; } - .course-intructor-rating-section .seperator::before { - content: "\00B7"; + .seperator { margin: 0 0.25rem; } } .video-in-overlay { - top: 30%; + top: 40%; } .course-overlay-content { padding: 1.25rem; font-size: var(--text-base); - color: var(--gray-700); + color: var(--gray-900); } .breadcrumb-destination { @@ -1301,7 +1284,6 @@ pre { .course-meta { font-size: var(--text-base); - color: var(--gray-600); } .avg-rating { @@ -1360,6 +1342,7 @@ pre { .reviews-parent .progress { width: 200px; + color: var(--gray-900); } .reviews-parent .progress-bar { @@ -1426,3 +1409,14 @@ pre { .carousel-inner { overflow: inherit; } + +.course-card-wide .breadcrumb { + margin-bottom: 0; +} + +.lesson-links .icon { + margin: 0; + margin-right: 0.75rem; + fill: none; + stroke: none; +} diff --git a/school/public/icons/lock.svg b/school/public/icons/lock.svg deleted file mode 100644 index 897e8187..00000000 --- a/school/public/icons/lock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/school/public/icons/symbol-defs.svg b/school/public/icons/symbol-defs.svg new file mode 100644 index 00000000..1dd5bed3 --- /dev/null +++ b/school/public/icons/symbol-defs.svg @@ -0,0 +1,27 @@ + diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html index 34a5bd52..473964d6 100644 --- a/school/www/batch/learn.html +++ b/school/www/batch/learn.html @@ -3,6 +3,7 @@ {% block title %} {{ lesson.title }} - {{ course.title }} {% endblock %} {% block head_include %} +{% include "public/icons/symbol-defs.svg" %} {% for ext in page_extensions %} @@ -11,7 +12,6 @@ {% endblock %} - {% block content %}
diff --git a/school/www/courses/course.html b/school/www/courses/course.html index e76af9fa..bf013c51 100644 --- a/school/www/courses/course.html +++ b/school/www/courses/course.html @@ -2,15 +2,16 @@ {% block title %}{{ course.title }} {% endblock %} {% block head_include %} +{% include "public/icons/symbol-defs.svg" %} {% endblock %} {% block content %}
{{ CourseHomeHeader(course) }} - {{ CourseHeaderOverlay(course) }}
+ {{ CourseHeaderOverlay(course) }} {{ Description(course) }} {{ widgets.CourseOutline(course=course, membership=membership) }} {{ widgets.Reviews(course=course, membership=membership) }} @@ -23,28 +24,32 @@ {% macro CourseHomeHeader(course) %}
-
- {{ BreadCrumb(course) }} - {{ CourseCardWide(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 }}
@@ -58,33 +63,27 @@
-
- {% 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 %} - - +
+ + + + {{ get_students(course.name) | length }} {{ _("Enrolled") }}
+ {% if get_lessons(course.name) | length %} +
+ + + + {{ get_lessons(course.name) | length }} {{ _("Lessons") }} +
+ {% endif %} + + + {% set avg_rating = get_average_rating(course.name) %} {% if avg_rating %}
@@ -96,19 +95,30 @@
{{ avg_rating }} {{ _(" Rating ") }} {% endif %} +
{% if membership %} {% set progress = frappe.utils.cint(membership.progress) %} -
+
- {{ progress }} Complete
-
{{ progress }}% Completed
{% endif %} +
+
Instructors:
+ {% for instructor in get_instructors(course.name) %} +
+ {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }} + + {{ instructor.full_name }} + +
+ {% endfor %} +
+
{% endmacro%} @@ -127,31 +137,25 @@ You have opted to be notified for this course. You will receive an email when the course becomes available.
- {% if get_lessons(course.name) | length %} -
- - {{ get_lessons(course.name) | length }} {{ _("Lessons") }} -
- {% endif %} +
+
+ + + + {{ get_students(course.name) | length }} {{ _("Enrolled") }} +
- {% 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 %} + {% if get_lessons(course.name) | length %} +
+ + + + {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
{% 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 %}