fix: course card buttons

community/lms/widgets/CourseCard.html

@@ -1,15 +1,19 @@
 {% set membership = course.get_membership(frappe.session.user) %}
-
+{% set progress = course.get_course_progress() %}
 <div class="common-card-style course-card">
+
   <div class="course-image {% if not course.image %}default-image{% endif %}" {% if course.image %}
     style="background-image: url( {{ course.image }} );" {% endif %}>
     <div class="course-tags">
       {% for tag in course.get_tags() %}
       <div class="course-card-pills">{{ tag }}</div>
       {% endfor %}
-      {% set progress = course.get_course_progress() %}
       {% if membership and not read_only %}
-      <div class="course-card-pills ml-auto">{{ frappe.utils.rounded(progress) }}% </div>
+      {% if progress < 100 %}
+       <div class="course-card-pills dark-pills ml-auto">{{ frappe.utils.rounded(progress) }}% Completed</div>
+      {% else %}
+      <div class="course-card-pills dark-pills ml-auto"> <img src="/assets/community/icons/check.svg"> Completed </div>
+      {% endif %}
       {% endif %}
     </div>
     {% if not course.image %}
@@ -17,97 +21,121 @@
     {% endif %}
   </div>
 
-  <div class="course-card-content">
+<div class="course-card-content">
-
+  <div class="course-card-meta muted-text">
-    <div class="course-card-meta muted-text">
+    {% if course.get_chapters() | length %}
-      {% if course.get_chapters() | length %}
+    <span>
-      <span>
+      {{ course.get_chapters() | length }} Chapters
-        {{ course.get_chapters() | length }} Chapters
+    </span>
-      </span>
-      {% endif %}
-      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
-      <span class="font-weight-bold ml-3 mr-3"> . </span>
-      {% endif %}
-      {% if course.get_upcoming_batches() | length %}
-      <span class="">
-        {{ course.get_upcoming_batches() | length }} Open Batches
-      </span>
-      {% endif %}
-    </div>
-
-    <div class="course-card-title">{{ course.title }}</div>
-
-    <div {% if not read_only %} class="mb-4" {% endif %}>
-      <span class="zindex">
-        {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
-        <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
-          <span class="course-instructor">
-            {{ course.get_instructor().full_name }}
-          </span>
-        </a>
-      </span>
-      <span class="course-student-count">
-        {% if course.get_students() | length %}
-        <span class="mr-4">
-          <img class="icon-background" src="/assets/community/icons/user.svg" />
-          {{ course.get_students() | length }}
-        </span>
-        {% endif %}
-        {% set avg_rating = course.get_average_rating() %}
-        {% if avg_rating %}
-        <span class="">
-          <img class="icon-background" src="/assets/community/icons/rating.svg" />
-          {{ avg_rating }}
-        </span>
-        {% endif %}
-      </span>
-    </div>
-
-    {% if not read_only %}
-
-    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
-    membership.current_lesson
-    else '1.1' %}
-
-    {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
-
-    {% set certificate = course.is_certified() %}
-    {% if certificate and not read_only %}
-    <div class="view-course-link is-secondary border">
-      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
-
-    {% elif course.upcoming %}
-    <div class="view-course-link is-secondary border">
-      Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
-
-    {% elif membership %}
-    <div class="view-course-link is-primary">
-      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
-
-    {% else %}
-    <div class="view-course-link is-default">
-      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
     {% endif %}
-
+    {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
+    <span class="font-weight-bold ml-3 mr-3"> . </span>
+    {% endif %}
+    {% if course.get_upcoming_batches() | length %}
+    <span class="">
+      {{ course.get_upcoming_batches() | length }} Open Batches
+    </span>
     {% endif %}
-
   </div>
+  <div class="course-card-title">{{ course.title }}</div>
+  <div {% if not read_only %} class="mb-4" {% endif %}>
+    <span class="zindex">
+      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
+      <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
+        <span class="course-instructor">
+          {{ course.get_instructor().full_name }}
+        </span>
+      </a>
+    </span>
+    <span class="course-student-count">
+      {% if course.get_students() | length %}
+      <span class="mr-4">
+        <img class="icon-background" src="/assets/community/icons/user.svg" />
+        {{ course.get_students() | length }}
+      </span> {% endif %}
+      {% set avg_rating = course.get_average_rating() %}
+      {% if avg_rating %}
+      <span class="">
+        <img class="icon-background" src="/assets/community/icons/rating.svg" />
+        {{ avg_rating }}
+      </span>
+      {% endif %}
+    </span>
+  </div>
+
+  {% if not read_only %}
+
+  {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+  membership.current_lesson else '1.1' %}
+  {% set query_parameter = "?batch=" + membership.batch if membership and
+  membership.batch else "" %}
+  {% set certificate = course.is_certified() %}
+
+  {% if certificate %}
+  <div class="view-course-link is-default">
+    Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+  </div>
+  <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
+
+  {% elif course.enable_certification and progress == 100 %}
+  <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
+    Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+  </div>
+
+  {% elif progress == 100 %}
+  <div class="view-course-link is-default">
+    Course Completed <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+  </div>
+  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+  {% elif course.upcoming %}
+  <div class="view-course-link is-secondary border">
+    Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+  </div>
+  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+  {% elif membership %}
+  <div class="view-course-link is-primary">
+    Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
+  </div>
+  <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
+
+  {% else %}
+  <div class="view-course-link is-default">
+    View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+  </div>
+  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+  {% endif %}
+  {% endif %}
+</div>
 </div>
 <script>
   frappe.ready(() => {
+    trim_course_titles();
+    $("#certification").unbind().click((e) => {
+      create_certificate(e);
+    });
+  })
+  var trim_course_titles = () => {
     $(".course-card-title").each((i, element) => {
       var title = $(element).text();
       var length = $(window).width() <= 375 ? 60 : 65;
       var suffix = title.length > length ? "..." : "";
       $(element).text(title.substring(0, length) + suffix);
+    });
+  }
+  var create_certificate = (e) => {
+    e.preventDefault();
+    course = $(e.currentTarget).attr("data-course");
+    frappe.call({
+      method: "community.lms.doctype.lms_certification.lms_certification.create_certificate",
+      args: {
+        "course": course
+      },
+      callback: (data) => {
+        window.location.href = `/courses/${course}/${data.message}`;
+      }
     })
-  })
+  }
 </script>

community/public/css/style.css

@@ -76,7 +76,6 @@ input[type=checkbox] {
   border-radius: 4px;
   padding: 4px 6px;
   font-size: 10px;
-  line-height: 120%;
   text-align: center;
   letter-spacing: 0.011em;
   text-transform: uppercase;
@@ -85,6 +84,15 @@ input[type=checkbox] {
   box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
 }
 
+.dark-pills {
+  background: rgba(25, 39, 52, 0.8);
+  color: #ffffff;
+}
+.dark-pills img {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .common-page-style {
   background: #F4F5F6;
   padding-bottom: 5rem;
@@ -172,6 +180,7 @@ input[type=checkbox] {
   padding: 8px 0px 8px;
   text-align: center;
   line-height: 135%;
+  cursor: pointer;
 }
 
 .cards-parent {

community/www/profiles/profile.py

@@ -1,4 +1,5 @@
 import frappe
+from community.page_renderers import get_profile_url_prefix
 
 def get_context(context):
     context.no_cache = 1
@@ -8,7 +9,7 @@ def get_context(context):
     except KeyError:
         username = frappe.db.get_value("User", frappe.session.user, ["username"])
         if username:
-            frappe.local.flags.redirect_location = "/users/" + username
+            frappe.local.flags.redirect_location = get_profile_url_prefix() + username
             raise frappe.Redirect
     try:
         context.member = frappe.get_doc("User", {"username": username})