fix: certificate design

lms/lms/doctype/lms_certificate/lms_certificate.json

@@ -1,6 +1,5 @@
 {
  "actions": [],
- "autoname": "format:CERT-{#####}",
  "creation": "2021-08-16 15:47:19.494055",
  "doctype": "DocType",
  "editable_grid": 1,
@@ -49,11 +48,10 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2022-04-01 18:40:27.651944",
+ "modified": "2022-04-05 14:19:34.409244",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Certificate",
- "naming_rule": "Expression",
  "owner": "Administrator",
  "permissions": [
   {
@@ -72,5 +70,6 @@
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": [],
+ "title_field": "member",
  "track_changes": 1
 }

lms/patches.txt

@@ -26,5 +26,5 @@ school.patches.v0_0.set_course_in_lesson #21-03-2022
 school.patches.v0_0.set_status_in_course #21-03-2022
 lms.patches.v0_0.change_published_field_data #25-03-2022
 execute:frappe.delete_doc("Workspace", "School", ignore_missing=True, force=True)
-lms.patches.v0_0.certification_member_field_data #01-04-2022
+lms.patches.v0_0.certification_member_field_data #04-04-2022
 lms.patches.v0_0.move_certification_to_certificate

lms/patches/v0_0/move_certification_to_certificate.py

@@ -1,7 +1,7 @@
 import frappe
 
 def execute():
-    old = frappe.get_all("LMS Certification", fields=["name", "course", "member", "student", "issue_date", "expiry_date"])
+    old = frappe.get_all("LMS Certification", fields=["name", "course", "student", "issue_date", "expiry_date"])
     for data in old:
         frappe.get_doc({
             "doctype": "LMS Certificate",

lms/public/css/style.css

@@ -856,41 +856,54 @@ pre {
 
 .certificate-content {
   padding: 2.5rem 3rem;
+  background-color: #FFFFFF;
 }
 
 .certificate-footer {
-  margin-top: 4.5rem;
+    display: flex;
-  display: flex;
+    justify-content: space-between;
-}
+    width: 50%;
-
+    margin: 5rem auto 0;
-.certificate-footer-item {
-  margin-right: 3.5rem;
 }
 
 .certificate-ribbon {
   background-color: var(--primary-color);
-  margin-left: auto;
+  padding: 1rem;
-  margin-right: 2.5rem;
+  border-radius: var(--border-radius-md);
-  width: 4.5rem;
 }
 
 .certificate-heading {
-  font-size: 3rem;
+  font-size: 1.5rem;
   font-weight: 500;
-  color: var(--gray-800);
+  color: var(--text-color);
 }
 
 .certificate-para {
   margin-bottom: 4rem;
 }
 
+.certificate-card {
+    background: #FFFFFF;
+    border-radius: var(--border-radius-md);
+    position: relative;
+    box-shadow: var(--shadow-sm);
+    padding: 2rem;
+    text-align: center;
+    margin: 0 6rem;
+}
+
+.certificate-footer-item {
+    color: var(--text-color);
+    font-weight: 500;
+}
+
 .certificate-logo {
-  height: 20px;
+  height: 1.5rem;
 }
 
 @media (max-width: 768px) {
   .certificate-heading {
-    font-size: 2rem;
+    font-size: 1rem;
   }
 }
 
@@ -898,25 +911,16 @@ pre {
   .certificate-footer {
     flex-direction: column;
   }
-
-  .certificate-footer-item {
-    margin-bottom: 1rem;
-  }
 }
 
 @media (max-width: 500px) {
   .certificate-heading {
-    font-size: 1.5rem;
+    font-size: 0.5rem;
   }
 
   .certificate-content {
     padding: 2.5rem 2rem;
   }
-
-  .certificate-ribbon {
-    margin-right: 1rem;
-    width: 1.5rem;
-  }
 }
 
 .profile-card {

lms/templates/certificate.html

@@ -1,49 +1,50 @@
-<div class="common-card-style">
+<div class="certificate-card">
-  <div class="certificate-content">
+    <div class="certificate-ribbon">
-    <img src="{{ logo }}" class="certificate-logo">
+        <div class="certificate-content">
-    <div class="text-muted mt-18">
+            <img src="{{ logo }}" class="certificate-logo">
-      Completion Certificate
+            <div class="mt-20">
+              {{ _("This certifies that") }}
+            </div>
+            <div class="certificate-heading"> {{ member.full_name }} </div>
+            <div class="mt-5"> {{ _("has successfully completed the course on") }} </div>
+            <div class="certificate-heading"> {{ course.title }} </div>
+
+            <div class="certificate-footer">
+              {% if certificate.issue_date %}
+              <div class="">
+                <div class="certificate-footer-item">
+                  {{ frappe.utils.format_date(certificate.issue_date, "medium") }}
+                </div>
+                <div>
+                  {{ _("Issue date") }}
+                </div>
+              </div>
+              {% endif %}
+
+              {% if certificate.expiry_date %}
+              <div class="">
+                <div class="certificate-footer-item">
+                  {{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
+                </div>
+                <div>
+                  {{ _("Expiry date") }}
+                </div>
+              </div>
+              {% endif %}
+
+              {% if instructor.full_name %}
+              <div class="">
+                <div class="certificate-footer-item">
+                {{ instructor.full_name }}
+                </div>
+                <div>
+                  {{ _("Instructor") }}
+                </div>
+              </div>
+              {% endif %}
+
+            </div>
+        </div>
     </div>
-    <div class="certificate-heading"> {{ course.title }} </div>
-    <div class="text-muted mt-18"> Awarded To </div>
-    <div class="certificate-heading"> {{ student.full_name }} </div> 
-
-    <div class="certificate-footer">
-      {% if certificate.issue_date %}
-      <div class="certificate-footer-item">
-        <div class="font-weight-bold">
-          {{ frappe.utils.format_date(certificate.issue_date, "medium") }}
-        </div>
-        <div>
-          Issue date
-        </div>
-      </div>
-      {% endif %}
-
-      {% if certificate.expiry_date %}
-      <div class="certificate-footer-item">
-        <div class="font-weight-bold">
-          {{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
-        </div>
-        <div>
-          Expiry date
-        </div>
-      </div>
-      {% endif %}
-
-      {% if instructor.full_name %}
-      <div class="certificate-footer-item">
-        <div class="font-weight-bold">
-        {{ instructor.full_name }}
-        </div>
-        <div>
-          Instructor
-        </div>
-      </div>
-      {% endif %}
-
-    </div>
-  </div>
-  <div class="certificate-ribbon"></div>
 </div>
 <script src="/assets/lms/js/html2canvas.js"></script>

lms/www/courses/certificate.html

@@ -1,24 +1,21 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/common_macro.html" import MentorsSection %}
+{% block title %} {{ member.full_name }} - {{ course.title }} {% endblock %}
-
-{% block title %} {{ student.full_name }} - {{ course.title }} {% endblock %}
 
 {% block content %}
 <div class="common-page-style">
   <div class="container certificate-page">
 
-    <div class="breadcrumb">
+    {% if certificate.member == frappe.session.user %}
-      <a class="dark-links" href="/courses">All Courses</a>
+    <div class="button is-secondary pull-right mt-4" id="export-as-pdf" data-certificate="{{ certificate.name }}"
-      <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
+        data-certificate-name="{{ member.full_name }} - {{ course.title }}">{{ _("Export") }}</div>
-      <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
-    </div>
-
-    {% if certificate.student == frappe.session.user %}
-    <div class="d-flex justify-content-end mb-5">
-      <div class="button is-secondary pull-right" id="export-as-pdf" data-certificate="{{ certificate.name }}"
-        data-certificate-name="{{ student.full_name }} - {{ course.title }}">Export</div>
-    </div>
     {% endif %}
+
+    <div class="breadcrumb">
+        <a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
+        <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
+        <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
+      </div>
+
     {% include "lms/templates/certificate.html" %}
   </div>
 </div>

lms/www/courses/certificate.py

@@ -10,7 +10,7 @@ def get_context(context):
         redirect_to_course_list()
 
     context.certificate = frappe.db.get_value("LMS Certificate", certificate_name,
-                ["name", "student", "issue_date", "expiry_date", "course"], as_dict=True)
+                ["name", "member", "issue_date", "expiry_date", "course"], as_dict=True)
 
     if context.certificate.course != course_name:
         redirect_to_course_list()
@@ -21,7 +21,7 @@ def get_context(context):
     context.instructor = frappe.db.get_value("User", context.course.instructor,
                 ["full_name", "username"], as_dict=True)
 
-    context.student = frappe.db.get_value("User", context.certificate.student,
+    context.member = frappe.db.get_value("User", context.certificate.member,
                 ["full_name"], as_dict=True)
 
     context.logo = frappe.db.get_single_value("Website Settings", "banner_image")