Merge branch 'main' of https://github.com/frappe/lms

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))

lms/lms/widgets/CourseCard.html

@@ -51,6 +51,18 @@
           {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
         </div>
         {% endif %}
+
+        {% if course.paid_certificate %}
+        <div class="vertically-center ml-3">
+            <svg class="icon icon-md">
+              <use href="#icon-badge"></use>
+            </svg>
+            <span class="certificate-price" data-price="{{ course.price_certificate }}">
+                {{ format_amount(course.price_certificate, course.currency) }}
+            </span>
+        </div>
+        {% endif %}
+
     </div>
     {% endif %}
   </div>
@@ -66,12 +78,6 @@
   <div class="progress-percent">{{ progress }}% {{ _("Completed") }} </div>
   {% endif %}
 
-    {% if course.paid_certificate %}
-    <div class="certificate-price small mt-3" data-price="{{ course.price_certificate }}">
-        {{ _("Certificate Price: {0}").format(format_amount(course.price_certificate, course.currency)) }}
-    </div>
-    {% endif %}
-
   <div class="course-card-footer">
     <span class="">
       {% set instructors = get_instructors(course.name) %}

lms/lms/widgets/CourseOutline.html

@@ -13,60 +13,62 @@
 
     <div class="chapter-content collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.title) }}">
 
-      {% if chapter.description %}
+        {% if chapter.description %}
-      <div class="chapter-description muted-text">
+        <div class="chapter-description muted-text">
-        {{ chapter.description }}
+            {{ chapter.description }}
-      </div>
+        </div>
-      {% endif %}
+        {% endif %}
 
-      {% set is_instructor = is_instructor(course.name) %}
+        {% set is_instructor = is_instructor(course.name) %}
-      <div class="lessons">
+        <div class="lessons">
 
-        {% for lesson in get_lessons(course.name, chapter) %}
+            {% for lesson in get_lessons(course.name, chapter) %}
-        {% set active = membership.current_lesson == lesson.name %}
+            {% set active = membership.current_lesson == lesson.name %}
-        <div class="lesson-info {% if active %} active-lesson {% endif %}">
+            <div class="lesson-info {% if active %} active-lesson {% endif %}">
 
-          {% if membership or lesson.include_in_preview %}
+            {% if membership or lesson.include_in_preview %}
-          <a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
+            <a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
-            data-course="{{ course.name }}">
+                data-course="{{ course.name }}">
-            <svg class="icon icon-md mr-2">
+                <svg class="icon icon-md mr-2">
-              <use class="" href="#{{ lesson.icon }}">
+                <use class="" href="#{{ lesson.icon }}">
-            </svg>
+                </svg>
-            {{ lesson.title }}
+                {{ lesson.title }}
 
-            {% if membership %}
+                {% if membership %}
-            <img class="ml-1 lesson-progress-tick {{ get_progress(course.name, lesson.name) != 'Complete' and 'hide' }}"
+                <svg class="icon icon-md lesson-progress-tick {{ get_progress(course.name, lesson.name) != 'Complete' and 'hide' }}">
-              src="/assets/lms/icons/check.svg">
+                    <use class="" href="#icon-green-check">
+                </svg>
+                {% endif %}
+
+            </a>
+
+            {% elif is_instructor and not lesson.include_in_preview %}
+            <a class="lesson-links"
+                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 }}">
+
+                <svg class="icon icon-md">
+                    <use class="" href="#icon-lock">
+                </svg>
+                <div>{{ lesson.title }}</div>
+            </a>
+
+            {% else %}
+            <div class="no-preview" title="This lesson is not available for preview" data-course="{{ course.name }}">
+                <div class="lesson-links">
+                <svg class="icon icon-md">
+                    <use class="" href="#icon-lock-gray">
+                </svg>
+                <div>{{ lesson.title }}</div>
+                </div>
+            </div>
             {% endif %}
 
-          </a>
-
-          {% elif is_instructor and not lesson.include_in_preview %}
-          <a class="lesson-links"
-          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 }}">
-          <svg class="icon icon-md">
-            <use class="" href="#icon-lock">
-          </svg>
-          <div>{{ lesson.title }}</div>
-          </a>
-
-          {% else %}
-          <div class="no-preview" title="This lesson is not available for preview" data-course="{{ course.name }}">
-            <div class="lesson-links">
-              <svg class="icon icon-md">
-                <use class="" href="#icon-lock">
-              </svg>
-              <div>{{ lesson.title }}</div>
             </div>
-          </div>
+            {% endfor %}
-          {% endif %}
 
         </div>
-        {% endfor %}
-
-      </div>
     </div>
   </div>
   {% endfor %}

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-weight: 700;
-  font-size: var(--text-3xl);
+  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 {
+    .reviews-header {
-    flex-direction: column;
+        flex-direction: column;
-    align-items: center;
+        align-items: center;
-  }
+    }
 
-  .vertical-divider {
+    .vertical-divider {
-    margin: 1rem 0;
+        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);
+}

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"/>
     </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" id="icon-certificate" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#1F272E" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <circle cx="15" cy="15" r="3" />
+        <path d="M13 17.5v4.5l2 -1.5l2 1.5v-4.5" />
+        <path d="M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73" />
+        <line x1="6" y1="9" x2="18" y2="9" />
+        <line x1="6" y1="12" x2="9" y2="12" />
+        <line x1="6" y1="15" x2="8" y2="15" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" id="icon-green-check" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#289F3B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
+        <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+    <svg id="icon-lock-gray" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08646 1.69388H9.02395C8.04029 1.68478 7.09316 2.06637 6.39053 2.75494C5.68729 3.44412 5.28656 4.38438 5.27647 5.36897L5.27644 5.36897V5.37409V5.82423H4.03125C2.92668 5.82423 2.03125 6.71966 2.03125 7.82423V14.2648C2.03125 15.3694 2.92668 16.2648 4.03125 16.2648H14.012C15.1166 16.2648 16.012 15.3694 16.012 14.2648V7.82423C16.012 6.71966 15.1166 5.82423 14.012 5.82423H12.7667V5.44139C12.7758 4.45773 12.3942 3.5106 11.7056 2.80797C11.0164 2.10473 10.0762 1.70401 9.09158 1.69391L9.09158 1.69388H9.08646ZM11.7667 5.82423V5.439V5.43402L11.7667 5.43402C11.7739 4.71458 11.495 4.02176 10.9914 3.5079C10.4884 2.99463 9.80233 2.7019 9.08379 2.69388H9.02155H9.01658V2.69386C8.29714 2.6867 7.60432 2.96558 7.09046 3.46915C6.57719 3.97216 6.28446 4.65822 6.27644 5.37676V5.82423H11.7667ZM4.03125 6.82423C3.47897 6.82423 3.03125 7.27194 3.03125 7.82423V14.2648C3.03125 14.8171 3.47897 15.2648 4.03125 15.2648H14.012C14.5643 15.2648 15.012 14.8171 15.012 14.2648V7.82423C15.012 7.27194 14.5643 6.82423 14.012 6.82423H4.03125ZM9.02178 11.8146C9.4471 11.8146 9.79188 11.4698 9.79188 11.0445C9.79188 10.6191 9.4471 10.2744 9.02178 10.2744C8.59646 10.2744 8.25167 10.6191 8.25167 11.0445C8.25167 11.4698 8.59646 11.8146 9.02178 11.8146ZM10.7919 11.0445C10.7919 12.0221 9.99938 12.8146 9.02178 12.8146C8.04418 12.8146 7.25167 12.0221 7.25167 11.0445C7.25167 10.0669 8.04418 9.27436 9.02178 9.27436C9.99938 9.27436 10.7919 10.0669 10.7919 11.0445Z" fill="#687178"/>
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" id="icon-badge" width="20" height="18" viewBox="0 0 24 24" fill="none" stroke="#1F272E" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award">
+        <circle cx="12" cy="8" r="7"></circle>
+        <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
+    </svg>
 </svg>

lms/www/courses/course.html

@@ -28,8 +28,8 @@
 
 {% macro CourseHomeHeader(course) %}
 <div class="course-head-container">
-  <div class="container pt-5 pb-5">
+  <div class="container pt-8 pb-10">
-    <div class="course-card-wide" style="">
+    <div class="course-card-wide">
       {{ BreadCrumb(course) }}
       {{ CourseCardWide(course) }}
     </div>
@@ -48,42 +48,41 @@
 <!-- Course Card -->
 
 {% macro CourseCardWide(course) %}
-<div class="">
+<div class="d-flex align-items-center mt-8">
-  <div class="d-flex align-items-center mt-2">
     {% for tag in get_tags(course.name) %}
     <div class="course-card-pills">{{ tag }}</div>
     {% endfor %}
-  </div>
+</div>
-  <div class="course-card-wide-title">
+<div class="course-card-wide-title">
     {{ course.title }}
-  </div>
+</div>
-  <div class="">
+<div class="">
     {{ course.short_introduction }}
-  </div>
-
-  {% if membership %}
-  {% set progress = frappe.utils.cint(membership.progress) %}
-  <div class="progress" title="{{ progress }}% Completed">
-    <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
-    aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
-    </div>
-  </div>
-  {% endif %}
-
-  <div class="mt-6">
-    <div class="bold-heading">Instructors:</div>
-    {% for instructor in get_instructors(course.name) %}
-      <div class="mt-1">
-       {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
-        <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
-          <span class="course-instructor"> {{ instructor.full_name }} </span>
-        </a>
-      </div>
-    {% endfor %}
-  </div>
-
 </div>
 
+<div class="mt-8">
+    <div class="bold-heading">Instructors:</div>
+    {% for instructor in get_instructors(course.name) %}
+    <div class="mt-1">
+    {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
+        <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
+        <span class="course-instructor"> {{ instructor.full_name }} </span>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+
+{% if membership %}
+{% set progress = frappe.utils.cint(membership.progress) %}
+<div class="mt-8">
+    <div class="progress-percent m-0">{{ progress }}% Completed</div>
+    <div class="progress" title="{{ progress }}% Completed">
+        <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
+        aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
+        </div>
+    </div>
+</div>
+{% endif %}
 {% endmacro%}
 
 {% macro CourseHeaderOverlay(course) %}
@@ -94,7 +93,7 @@
   {% endif %}
 
   <div class="course-overlay-content">
-    <div class="course-card-wide-title mb-4"> {{ course.title }} </div>
+    <div class="course-overlay-title"> {{ course.title }} </div>
 
     <div id="interest-alert" class="{% if not is_user_interested %} hide {% endif %}">
         {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
@@ -129,29 +128,31 @@
     </div>
     {% endif %}
 
-    <div class="vertically-center justify-content-center mb-2">
+    <div class="vertically-center mb-3">
-      <div class="">
         <svg class="icon icon-md mr-1">
           <use class="" href="#icon-users">
         </svg>
         {{ get_students(course.name) | length }} {{ _("Enrolled") }}
-      </div>
-
-      <span class="seperator"></span>
-
-      {% if get_lessons(course.name) | length %}
-      <div class="">
-        <svg class="icon icon-md mr-1">
-          <use href="#icon-education"></use>
-        </svg>
-        {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
-      </div>
-      {% endif %}
     </div>
 
+    {% if get_lessons(course.name) | length %}
+    <div class="vertically-center mb-3">
+        <svg class="icon icon-md mr-1">
+            <use href="#icon-education"></use>
+        </svg>
+        {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
+    </div>
+    {% endif %}
+
     {% if course.paid_certificate %}
-    <div class="certificate-price" data-price="{{ course.price_certificate }}">
+    <div class="vertically-center mb-3">
-        {{ _("Certificate Price:") }} {{ format_amount(course.price_certificate, course.currency) }}
+        <svg class="icon icon-md mr-1">
+            <use href="#icon-badge"></use>
+        </svg>
+        <span class="certificate-price" data-price="{{ course.price_certificate }}">
+            {{ format_amount(course.price_certificate, course.currency) }}
+        </span>
+        <span class="indicator-pill green ml-3"> {{ _("Get Certified") }} </span>
     </div>
     {% endif %}
 

lms/www/courses/course.js

@@ -217,7 +217,7 @@ const display_slots = (e) => {
         callback: (data) => {
             let options = "";
             data.message.forEach((obj) => {
-                options += `<button type="button" class="btn btn-sm btn-secondary mr-3 slot hide"
+                options += `<button type="button" class="btn btn-sm btn-secondary mb-3 mr-3 slot hide"
                     data-course="${$(e.currentTarget).data("course")}"
                     data-day="${obj.day}" data-start="${obj.start_time}" data-end="${obj.end_time}">
                     ${format_time(obj.start_time)} - ${format_time(obj.end_time)}</button>`;

lms/www/courses/index.html

@@ -1,8 +1,7 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ 'Courses' }}{% endblock %}
 {% block head_include %}
-<style>
+{% include "public/icons/symbol-defs.svg" %}
-</style>
 {% endblock %}
 
 {% block content %}