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..c9255b47 100644 --- a/school/lms/widgets/CourseCard.html +++ b/school/lms/widgets/CourseCard.html @@ -17,10 +17,35 @@
{% 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 +84,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..1cb38938 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..3b566e7f 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..8e4a5076 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; } @@ -76,6 +76,7 @@ input[type=checkbox] { padding-bottom: 5rem; min-height: 60vh; padding-top: 3rem; + background-color: var(--bg-color); } .common-card-style { @@ -99,47 +100,36 @@ 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); +.icon { + margin: 0; + margin-right: 0.25rem; +} + +.lesson-links .icon { + stroke: none; } .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 +141,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 +153,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 +211,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 +232,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,13 +274,25 @@ 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: 1000px) { + .course-card-wide { + width: 75%; + margin: 0 auto; + } } @media (max-width: 768px) { .course-card-wide { width: 100%; + margin: 0; } } @@ -378,18 +374,22 @@ input[type=checkbox] { margin: 5rem 0 4rem; } +.course-home-page { + background-color: #FFFFFF; + padding-top: 3.75rem; +} + .chapter-title { - font-weight: 500; cursor: pointer; border-radius: var(--border-radius-lg); - padding: 0.75rem 0; + padding: 0.5rem 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,25 +397,24 @@ input[type=checkbox] { } .chapter-icon { - margin-right: 1.25rem; + margin-right: 0.5rem; } .reviews-parent { margin: 5rem 0; -} - -.course-description-section { - margin-top: 3.75rem; + color: var(--gray-900); } .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; } @@ -426,14 +425,8 @@ input[type=checkbox] { border-radius: var(--border-radius-md); } -.course-content-parent .chapter-title { - font-size: var(--text-md); -} - .course-content-parent .lesson-links { - padding: 0.5rem 1rem; - font-size: var(--text-md); - line-height: 200%; + font-size: var(--text-base); } .course-outline { @@ -442,7 +435,7 @@ input[type=checkbox] { } .lessons { - margin-left: 2.5rem; + margin-left: 2rem; } .member-card { @@ -508,17 +501,17 @@ input[type=checkbox] { .member-parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - -moz-column-gap: 1.25rem; - column-gap: 1.25rem; - row-gap: 1.25rem; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; } @media (max-width: 600px) { .member-parent { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); - -moz-column-gap: 1.25rem; - column-gap: 1.25rem; - row-gap: 1.25rem; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; } } @@ -580,9 +573,10 @@ input[type=checkbox] { .breadcrumb { display: flex; align-items: center; - font-size: var(--text-md); + font-size: var(--text-base); line-height: 20px; color: var(--gray-900); + padding: 1rem 0; } .course-details-outline { @@ -817,8 +811,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; } @@ -955,15 +949,15 @@ pre { background-image: url(/assets/frappe/icons/timeless/search.svg); border: none; border-radius: var(--border-radius-md); - font-size: var(--text-sm); + font-size: var(--text-base); padding: 0.625rem 0.75rem; height: 36px; background-repeat: no-repeat; text-indent: 1.5rem; - background-position: 1rem 0.6rem; + background-position: 1rem 0.7rem; float: right; width: 25%; - background-color: var(--gray-100); + box-shadow: var(--shadow-sm); } .section-heading { @@ -1144,6 +1138,7 @@ pre { flex-direction: column; align-items: flex-end; justify-content: space-between; + margin-left: auto; } .job-detail-card { @@ -1151,11 +1146,6 @@ pre { flex-direction: column; } -.job-detail-card span::before { - content: "\00B7"; - margin: 0 8px; -} - .job-subtitle { font-size: var(--text-base); margin-bottom: 1.875rem; @@ -1171,34 +1161,6 @@ pre { color: var(--gray-900); } -.company-name { - font-size: var(--text-base); -} - -.job-meta { - display: flex; - align-items: center; - color: var(--gray-700); - font-size: var(--text-base); -} - -.job-type { - background-color: var(--dark-green-100); - color: var(--dark-green-500); - border-radius: var(--border-radius-md); - padding: 0.25rem 0.5rem; - font-weight: 600; - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.6px; - margin-bottom: 0.5rem; - width: fit-content; -} - -.job-description { - margin-top: 3.75rem; -} - .course-head-container { color: var(--gray-900); } @@ -1206,16 +1168,16 @@ pre { .course-intructor-rating-section { display: flex; align-items: center; - margin-top: 3.5rem; + justify-content: space-between; + 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,32 +1187,31 @@ pre { overflow: auto; width: fit-content; position: fixed; - top: 40%; + top: 50%; right: 7%; max-width: 400px; z-index: 4; } -@media (max-width: 768px) { +@media (max-width: 1000px) { .course-overlay-card { position: inherit; - margin-top: 1rem; + margin: 1rem auto; } - .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 { @@ -1267,7 +1228,7 @@ pre { width: 60%; } -@media (max-width: 768px) { +@media (max-width: 1000px) { .course-body-container { width: 100%; } @@ -1293,15 +1254,9 @@ pre { 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); + color: var(--gray-900); } .avg-rating { @@ -1341,6 +1296,7 @@ pre { .star-click { --star-fill: var(--yellow-500); + margin-right: 0; } .rating { @@ -1360,6 +1316,7 @@ pre { .reviews-parent .progress { width: 200px; + color: var(--gray-900); } .reviews-parent .progress-bar { @@ -1426,3 +1383,11 @@ pre { .carousel-inner { overflow: inherit; } + +.course-card-wide .breadcrumb { + margin-bottom: 0; +} + +.course-content-parent .course-details-outline .course-home-headings { + display: 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..0090c5c8 --- /dev/null +++ b/school/public/icons/symbol-defs.svg @@ -0,0 +1,31 @@ + diff --git a/school/templates/quiz.html b/school/templates/quiz.html index 5d5bf5bd..1e68d995 100644 --- a/school/templates/quiz.html +++ b/school/templates/quiz.html @@ -1,4 +1,4 @@ -
{{ quiz.title }}
+
{{ quiz.title }}
diff --git a/school/www/batch/learn.html b/school/www/batch/learn.html index 34a5bd52..5e14b9da 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,11 +12,10 @@ {% endblock %} - {% block content %}
- {{ widgets.BreadCrumb(course=course, lesson=lesson) }} + {{ BreadCrumb(course, lesson) }}
{{ widgets.CourseOutline(course=course, membership=membership) }} @@ -32,6 +32,16 @@
{% endblock %} +{% macro BreadCrumb(course, lesson) %} +
+ {{ _("All Courses") }} + + {{ course.title }} + + {{ lesson.title }} +
+{% endmacro %} + {% macro LessonContent(lesson) %} {% set instructors = get_instructors(course.name) %} {% set is_instructor = is_instructor(course.name) %} @@ -57,8 +67,8 @@
{% endif %} {% endfor %} - - + + {% if ins_len == 1 %} {{ instructors[0].full_name }} {% else %} @@ -67,7 +77,7 @@ {% endif %} -
{{ frappe.utils.format_date(lesson.creation, "medium") }}
+
{{ frappe.utils.format_date(lesson.creation, "medium") }}
diff --git a/school/www/courses/course.html b/school/www/courses/course.html index e76af9fa..f3b7a108 100644 --- a/school/www/courses/course.html +++ b/school/www/courses/course.html @@ -2,18 +2,21 @@ {% 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) }} - {{ widgets.Reviews(course=course, membership=membership) }} +
+
+
+ {{ CourseHeaderOverlay(course) }} + {{ Description(course) }} + {{ widgets.CourseOutline(course=course, membership=membership) }} + {{ widgets.Reviews(course=course, membership=membership) }} +
@@ -23,28 +26,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,32 +65,22 @@
-
- {% 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 %} @@ -93,22 +90,33 @@ {% endfor %} + {{ avg_rating }} {{ _(" Rating ") }}
- {{ 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 +135,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 %}
diff --git a/school/www/jobs/index.html b/school/www/jobs/index.html index 767dbeb6..1c0b3e71 100644 --- a/school/www/jobs/index.html +++ b/school/www/jobs/index.html @@ -1,6 +1,10 @@ {% extends "templates/base.html" %} {% block title %}{{ _('Job Openings') }}{% endblock %} +{% block head_include %} +{% include "public/icons/symbol-defs.svg" %} +{% endblock %} + {% block content %}
@@ -16,20 +20,25 @@
{% for job in jobs %}
-
+
-
+
{{ _(job.job_title) }}
- {{ job.company_name }} +
+
{{ job.company_name }}
+
+ + + + {{ job.location }} +
+
-
- -
{{ job.location }}
-
-
-
{{ job.type }}
-
{{ frappe.utils.format_date(job.creation, "medium") }}
+ +
+
{{ job.type }}
+
{{ frappe.utils.format_date(job.creation, "medium") }}
diff --git a/school/www/jobs/job.html b/school/www/jobs/job.html index bdb277f5..24e9b621 100644 --- a/school/www/jobs/job.html +++ b/school/www/jobs/job.html @@ -1,6 +1,10 @@ {% extends "templates/base.html" %} {% block title %}{{ _(job.job_title) }}{% endblock %} +{% block head_include %} +{% include "public/icons/symbol-defs.svg" %} +{% endblock %} + {% block content %}
@@ -8,27 +12,30 @@ {{ BreadCrumb(job) }}
-
-
-
- +
+
+
-
{{ _(job.job_title) }}
-
- {{ job.company_name }} - -
- -
{{ job.location }}
+
+
+
{{ _(job.job_title) }}
+
{{ job.type }}
+
+
+ {{ job.company_name }} +
+ + + +
{{ job.location }}
+
+
{{ frappe.utils.format_date(job.creation, "medium") }}
- -
{{ frappe.utils.format_date(job.creation, "medium") }}
-
{{ job.type }}
-
{% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %} -
+
{{ _("Apply") }}
{{ _("Report") }}
@@ -38,7 +45,7 @@
-
{{ _(job.description) }}
+
{{ _(job.description) }}
@@ -84,6 +91,6 @@
{{ _("Job Openings") }} - {{ _(job.job_title) }} + {{ job.job_title }}
{% endmacro %}