diff --git a/lms/lms/utils.py b/lms/lms/utils.py index 7b550d51..129737fc 100644 --- a/lms/lms/utils.py +++ b/lms/lms/utils.py @@ -372,4 +372,4 @@ def format_amount(amount, currency): if amount_reduced < 1: return amount precision = 0 if amount % 1000 == 0 else 1 - return _("{0}K").format(fmt_money(amount_reduced, precision, currency)) + return _("{0}k").format(fmt_money(amount_reduced, precision, currency)) diff --git a/lms/lms/widgets/CourseCard.html b/lms/lms/widgets/CourseCard.html index 05908ca7..d8a11583 100644 --- a/lms/lms/widgets/CourseCard.html +++ b/lms/lms/widgets/CourseCard.html @@ -51,6 +51,18 @@ {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} {% endif %} + + {% if course.paid_certificate %} +
+ + + + + {{ format_amount(course.price_certificate, course.currency) }} + +
+ {% endif %} + {% endif %} @@ -66,12 +78,6 @@
{{ progress }}% {{ _("Completed") }}
{% endif %} - {% if course.paid_certificate %} -
- {{ _("Certificate Price: {0}").format(format_amount(course.price_certificate, course.currency)) }} -
- {% endif %} -
{% set instructors = get_instructors(course.name) %} diff --git a/lms/lms/widgets/CourseOutline.html b/lms/lms/widgets/CourseOutline.html index 8e6e11f7..567b8010 100644 --- a/lms/lms/widgets/CourseOutline.html +++ b/lms/lms/widgets/CourseOutline.html @@ -13,60 +13,62 @@
- {% if chapter.description %} -
- {{ chapter.description }} -
- {% endif %} + {% if chapter.description %} +
+ {{ chapter.description }} +
+ {% endif %} - {% set is_instructor = is_instructor(course.name) %} -
+ {% set is_instructor = is_instructor(course.name) %} +
- {% for lesson in get_lessons(course.name, chapter) %} - {% set active = membership.current_lesson == lesson.name %} -
+ {% 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 or lesson.include_in_preview %} + + + + + {{ lesson.title }} - {% if membership %} - + {% if membership %} + + + + {% endif %} + + + + {% elif is_instructor and not lesson.include_in_preview %} + + + + + +
{{ lesson.title }}
+ + + {% else %} +
+
+ + + +
{{ lesson.title }}
+
+
{% endif %} - - - {% elif is_instructor and not lesson.include_in_preview %} - - - - -
{{ lesson.title }}
- - - {% else %} -
-
- - - -
{{ lesson.title }}
-
- {% endif %} + {% endfor %}
- {% endfor %} - -
{% endfor %} diff --git a/lms/public/css/style.css b/lms/public/css/style.css index d51aaf9f..14794237 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -58,7 +58,6 @@ input[type=checkbox] { letter-spacing: 0.011em; text-transform: uppercase; font-weight: 600; - box-shadow: var(--shadow-sm); color: var(--gray-900); width: fit-content; } @@ -301,10 +300,11 @@ input[type=checkbox] { } .course-card-wide-title { - font-weight: bold; - font-size: var(--text-3xl); + font-weight: 700; + font-size: var(--text-4xl); line-height: 44px; color: var(--gray-900); + margin: 0.25rem 0; } .button { @@ -567,7 +567,7 @@ input[type=checkbox] { font-size: var(--text-base); line-height: 20px; color: var(--gray-900); - padding: 1rem 0; + padding: 0; } .course-details-outline { @@ -854,11 +854,6 @@ pre { width: fit-content; } -.certificate-price { - font-weight: bold; - margin-bottom: 1rem; -} - .certificate-ribbon { background-color: var(--primary-color); padding: 0.5rem; @@ -1164,10 +1159,6 @@ pre { margin: 0 1rem; } -.course-head-container .progress { - margin-top: 1rem; -} - .course-overlay-card { background-color: white; border-radius: var(--border-radius-lg); @@ -1196,7 +1187,6 @@ pre { padding: 1.25rem; font-size: var(--text-base); color: var(--text-color); - text-align: center; } .breadcrumb-destination { @@ -1256,6 +1246,12 @@ pre { width: 75%; } +@media (max-width: 1250px) { + .reviews-header { + width: 85%; + } +} + @media (max-width: 768px) { .reviews-header { width: 100%; @@ -1263,14 +1259,14 @@ pre { } @media (max-width: 500px) { - .reviews-header { - flex-direction: column; - align-items: center; - } + .reviews-header { + flex-direction: column; + align-items: center; + } - .vertical-divider { - margin: 1rem 0; - } + .vertical-divider { + margin: 1rem; + } } .bold-heading { @@ -1289,7 +1285,8 @@ pre { } .vertical-divider { - border: 1px solid var(--gray-300); + border: 1px solid var(--gray-300); + margin: 0 1rem; } .avg-rating-stars { @@ -1429,3 +1426,27 @@ pre { float: right; font-size: var(--text-sm); } + +li { + line-height: 1.7; +} + +.course-overlay-title { + font-weight: 700; + font-size: var(--text-2xl); + line-height: 1rem; + color: var(--gray-900); + margin-bottom: 1.25rem; +} + +.course-card-wide .avatar .standard-image { + border: 1px solid var(--gray-400); +} + +.lesson-progress-tick { + margin: 0 0.5rem +} + +.no-preview { + color: var(--gray-600); +} diff --git a/lms/public/icons/symbol-defs.svg b/lms/public/icons/symbol-defs.svg index 53708e2d..25b54d1e 100644 --- a/lms/public/icons/symbol-defs.svg +++ b/lms/public/icons/symbol-defs.svg @@ -41,4 +41,23 @@ 3.14428 11.4733 4.69483 10.459 5.69162L6.40165 9.62339C5.83813 10.1772 4.93649 10.1772 4.42932 9.62339C3.8658 9.06962 3.8658 8.18359 4.42932 7.68519L7.81045 4.36257" stroke="#2D95F0" stroke-miterlimit="10" stroke-linecap="round"/> + + + + + + + + + + + + + + + + + + + diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html index 292af2f8..d222de0f 100644 --- a/lms/www/courses/course.html +++ b/lms/www/courses/course.html @@ -28,8 +28,8 @@ {% macro CourseHomeHeader(course) %}
-
-
+
+
{{ BreadCrumb(course) }} {{ CourseCardWide(course) }}
@@ -48,42 +48,41 @@ {% 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 %} -
-
+
+
Instructors:
+ {% for instructor in get_instructors(course.name) %} +
+ {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }} + + {{ instructor.full_name }} + +
+ {% endfor %} +
+ +{% if membership %} +{% set progress = frappe.utils.cint(membership.progress) %} +
+
{{ progress }}% Completed
+
+
+
+
+
+{% endif %} {% endmacro%} {% macro CourseHeaderOverlay(course) %} @@ -94,7 +93,7 @@ {% endif %}
-
{{ course.title }}
+
{{ course.title }}
{{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} @@ -129,29 +128,31 @@
{% endif %} -
-
+
{{ get_students(course.name) | length }} {{ _("Enrolled") }} -
- - - - {% if get_lessons(course.name) | length %} -
- - - - {{ get_lessons(course.name) | length }} {{ _("Lessons") }} -
- {% endif %}
+ {% if get_lessons(course.name) | length %} +
+ + + + {{ get_lessons(course.name) | length }} {{ _("Lessons") }} +
+ {% endif %} + {% if course.paid_certificate %} -
- {{ _("Certificate Price:") }} {{ format_amount(course.price_certificate, course.currency) }} +
+ + + + + {{ format_amount(course.price_certificate, course.currency) }} + + {{ _("Get Certified") }}
{% endif %} diff --git a/lms/www/courses/course.js b/lms/www/courses/course.js index a4493d2e..706ec222 100644 --- a/lms/www/courses/course.js +++ b/lms/www/courses/course.js @@ -217,7 +217,7 @@ const display_slots = (e) => { callback: (data) => { let options = ""; data.message.forEach((obj) => { - options += ``; diff --git a/lms/www/courses/index.html b/lms/www/courses/index.html index 05e3b26f..aa830f96 100644 --- a/lms/www/courses/index.html +++ b/lms/www/courses/index.html @@ -1,8 +1,7 @@ {% extends "templates/base.html" %} {% block title %}{{ 'Courses' }}{% endblock %} {% block head_include %} - +{% include "public/icons/symbol-defs.svg" %} {% endblock %} {% block content %}