eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: certificate page UI

Browse Source
This commit is contained in:
Jannat Patel
2023-04-17 15:00:18 +05:30
parent 53d2e288d4
commit 8e8111d272
8 changed files with 90 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lms/lms/doctype/lms_settings/lms_settings.json
View File

@@ -15,7 +15,6 @@
"search_placeholder",
"portal_course_creation",
"column_break_2",
"custom_certificate_template",
"livecode_url",
"signup_settings_tab",
"signup_settings_section",
@@ -139,12 +138,6 @@
"fieldtype": "Check",
"label": "Ask User Category during Signup"
},
{
"fieldname": "custom_certificate_template",
"fieldtype": "Link",
"label": "Custom Certificate Template",
"options": "Web Template"
},
{
"default": "0",
"fieldname": "is_onboarding_complete",
@@ -192,7 +185,7 @@
"index_web_pages_for_search": 1,
"issingle": 1,
"links": [],
"modified": "2023-02-23 10:39:38.912549",
"modified": "2023-04-17 12:54:44.706101",
"modified_by": "Administrator",
"module": "LMS",
"name": "LMS Settings",

14
lms/lms/print_format/certificate/certificate.json
View File

@@ -2,7 +2,7 @@
"absolute_value": 0,
"align_labels_right": 0,
"creation": "2023-02-22 21:36:54.560420",
"css": ".certificate-card {\n background: #FFFFFF;\n font-family: \"Inter\" sans-serif;\n font-size: 16px;\n}\n\n.outer-border {\n border-radius: 0.5rem;\n border: 1px solid #EEF0F2;\n padding: 1rem;\n width: 80%;\n margin: auto;\n}\n\n.inner-border {\n border: 10px solid #0089FF;\n border-radius: 8px;\n text-align: center;\n padding: 6rem 4rem;\n background-color: #FFFFFF;\n}\n\n.certificate-logo {\n height: 1.5rem;\n margin-bottom: 4rem;\n}\n\n.certificate-name {\n font-size: 2rem;\n font-weight: 500;\n color: #192734;\n margin-bottom: 0.5rem;\n}\n\n.certificate-footer {\n margin: 4rem auto 0;\n width: 70%;\n text-align: center;\n}\n\n.certificate-footer-item {\n color: #192734;\n}\n\n.cursive-font {\n font-family: cursive;\n font-weight: 600;\n}\n\n.certificate-divider {\n margin: 0.5rem 0;\n}\n\n.certificate-expiry {\n margin-left: 2rem;\n}",
"css": ".outer-border {\n font-family: \"Inter\" sans-serif;\n font-size: 16px;\n border-radius: 0.5rem;\n border: 1px solid #E2E6E9;\n padding: 1rem;\n}\n\n.inner-border {\n border: 10px solid #0089FF;\n border-radius: 8px;\n text-align: center;\n padding: 6rem 4rem;\n background-color: #FFFFFF;\n}\n\n.certificate-logo {\n height: 1.5rem;\n margin-bottom: 4rem;\n}\n\n.certificate-name {\n font-size: 2rem;\n font-weight: 500;\n color: #192734;\n margin-bottom: 0.5rem;\n}\n\n.certificate-footer {\n margin: 4rem auto 0;\n width: 70%;\n text-align: center;\n}\n\n.certificate-footer-item {\n color: #192734;\n}\n\n.cursive-font {\n font-family: cursive;\n font-weight: 600;\n}\n\n.certificate-divider {\n margin: 0.5rem 0;\n}\n\n.certificate-expiry {\n margin-left: 2rem;\n}",
"custom_format": 1,
"disabled": 0,
"doc_type": "LMS Certificate",
@@ -10,14 +10,14 @@
"doctype": "Print Format",
"font_size": 14,
"format_data": "{\"header\":\"<div class=\\\"document-header\\\">\\n\\t<h3>LMS Certificate</h3>\\n\\t<p>{{ doc.name }}</p>\\n</div>\",\"sections\":[{\"label\":\"\",\"columns\":[{\"label\":\"\",\"fields\":[{\"label\":\"Course\",\"fieldname\":\"course\",\"fieldtype\":\"Link\",\"options\":\"LMS Course\"},{\"label\":\"Member\",\"fieldname\":\"member\",\"fieldtype\":\"Link\",\"options\":\"User\"},{\"label\":\"Member Name\",\"fieldname\":\"member_name\",\"fieldtype\":\"Data\"},{\"label\":\"Evaluator\",\"fieldname\":\"evaluator\",\"fieldtype\":\"Data\",\"options\":\"\"}]},{\"label\":\"\",\"fields\":[{\"label\":\"Issue Date\",\"fieldname\":\"issue_date\",\"fieldtype\":\"Date\"},{\"label\":\"Expiry Date\",\"fieldname\":\"expiry_date\",\"fieldtype\":\"Date\"},{\"label\":\"Version\",\"fieldname\":\"version\",\"fieldtype\":\"Select\",\"options\":\"V13\\nV14\"},{\"label\":\"Module Names for Certificate\",\"fieldname\":\"module_names_for_certificate\",\"fieldtype\":\"Data\"}]}],\"has_fields\":true}]}",
"html": "{% set certificate = frappe.db.get_value(\"LMS Certificate\", doc.name, [\"name\", \"member\", \"issue_date\", \"expiry_date\", \"course\"], as_dict=True) %}\n{% set member = frappe.db.get_value(\"User\", doc.member, [\"full_name\"], as_dict=True) %}\n{% set course = frappe.db.get_value(\"LMS Course\", doc.course, [\"title\", \"name\", \"image\"], as_dict=True) %}\n{% set logo = frappe.db.get_single_value(\"Website Settings\", \"banner_image\") %}\n{% set instructors = frappe.get_all(\"Course Instructor\", {\"parent\": doc.course}, pluck=\"instructor\", order_by=\"idx\") %}\n\n<meta name=\"pdfkit-orientation\" content=\"Landscape\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<div class=\"certificate-card\">\n <div class=\"outer-border\">\n <div class=\"inner-border\">\n \n <img src=\"{{ logo }}\" class=\"certificate-logo\">\n <div>\n {{ _(\"This certifies that\") }}\n </div>\n \n <div class=\"certificate-name\" style=\"\">\n {{ member.full_name }}\n </div>\n <div>\n {{ _(\"has successfully completed the course on\") }}\n <b> {{ course.title }} </b>\n on {{ frappe.utils.format_date(certificate.issue_date, \"medium\") }}.\n </div>\n \n <table class=\"certificate-footer\">\n <tr>\n {% if instructors %}\n <td>\n <div class=\"certificate-footer-item cursive-font\">\n {% for i in instructors %}\n \t\t\t\t\t{{ frappe.db.get_value(\"User\", i, \"full_name\") }}\n \t\t\t\t\t{% if not loop.last %}\n \t\t\t\t\t,\n \t\t\t\t\t{% endif %}\n \t\t\t\t\t{% endfor %}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Course Instructor\") }} </div>\n </td>\n {% endif %}\n <td style=\"width: 30%\"></td>\n {% if certificate.expiry_date %}\n <td class=\"certificate-expiry\">\n <div class=\"certificate-footer-item\">\n {{ frappe.utils.format_date(certificate.expiry_date, \"medium\") }}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Expiry Date\") }} </div>\n </td>\n {% endif %}\n </tr>\n </table>\n </div>\n </div>\n</div>",
"html": "{% set certificate = frappe.db.get_value(\"LMS Certificate\", doc.name, [\"name\", \"member\", \"issue_date\", \"expiry_date\", \"course\"], as_dict=True) %}\n{% set member = frappe.db.get_value(\"User\", doc.member, [\"full_name\"], as_dict=True) %}\n{% set course = frappe.db.get_value(\"LMS Course\", doc.course, [\"title\", \"name\", \"image\"], as_dict=True) %}\n{% set logo = frappe.db.get_single_value(\"Website Settings\", \"banner_image\") %}\n{% set instructors = frappe.get_all(\"Course Instructor\", {\"parent\": doc.course}, pluck=\"instructor\", order_by=\"idx\") %}\n\n<meta name=\"pdfkit-orientation\" content=\"Landscape\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<div class=\"outer-border\">\n <div class=\"inner-border\">\n \n <img src=\"{{ logo }}\" class=\"certificate-logo\">\n <div>\n {{ _(\"This certifies that\") }}\n </div>\n \n <div class=\"certificate-name\" style=\"\">\n {{ member.full_name }}\n </div>\n <div>\n {{ _(\"has successfully completed the course on\") }}\n <b> {{ course.title }} </b>\n on {{ frappe.utils.format_date(certificate.issue_date, \"medium\") }}.\n </div>\n \n <table class=\"certificate-footer\">\n <tr>\n {% if instructors %}\n <td>\n <div class=\"certificate-footer-item cursive-font\">\n {% for i in instructors %}\n \t\t\t\t\t{{ frappe.db.get_value(\"User\", i, \"full_name\") }}\n \t\t\t\t\t{% if not loop.last %}\n \t\t\t\t\t,\n \t\t\t\t\t{% endif %}\n \t\t\t\t\t{% endfor %}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Course Instructor\") }} </div>\n </td>\n {% endif %}\n \n {% if certificate.expiry_date %}\n <td style=\"width: 30%\"></td>\n \n <td class=\"certificate-expiry\">\n <div class=\"certificate-footer-item\">\n {{ frappe.utils.format_date(certificate.expiry_date, \"medium\") }}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Expiry Date\") }} </div>\n </td>\n {% endif %}\n </tr>\n </table>\n </div>\n </div>",
"idx": 0,
"line_breaks": 0,
"margin_bottom": 15.0,
"margin_left": 15.0,
"margin_right": 15.0,
"margin_top": 15.0,
"modified": "2023-04-14 11:01:24.545418",
"margin_bottom": 0.0,
"margin_left": 0.0,
"margin_right": 0.0,
"margin_top": 0.0,
"modified": "2023-04-17 13:46:38.633751",
"modified_by": "Administrator",
"module": "LMS",
"name": "Certificate",

7
lms/public/css/style.css
View File

@@ -859,6 +859,11 @@ pre {
text-align: center;
}
.certificate-parent {
display: grid;
grid-template-columns: 10fr 2fr;
grid-gap: 3rem;
}
.certificate-logo {
height: 1.5rem;
@@ -1189,7 +1194,7 @@ pre {
margin-bottom: 1.875rem;
}
.job-card-heading {
.card-heading {
font-weight: 600;
color: var(--gray-900);
margin-bottom: 0.5rem;

47
lms/templates/certificate.html
View File

@@ -1,47 +0,0 @@
<div id="certificate-card" class="certificate-card">
<div class="certificate-content">
<div class="certificate-border">
<img src="{{ logo }}" class="certificate-logo">
<div>
{{ _("This certifies that") }}
</div>
<div class="certificate-name">
{{ member.full_name }}
</div>
<div>
{{ _("has successfully completed the course on") }}
<b> {{ course.title }} </b>
on {{ frappe.utils.format_date(certificate.issue_date, "medium") }}.
</div>
<table class="certificate-footer">
<tr>
{% if instructors %}
<td>
<div class="certificate-footer-item cursive-font">
{{ instructors }}
</div>
<hr class="certificate-divider">
<div class="text-center"> {{ _("Course Instructor") }} </div>
</td>
{% endif %}
{% if certificate.expiry_date %}
<td style="width: 30%;"></td>
<td>
<div class="certificate-footer-item">
{{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
</div>
<hr class="certificate-divider">
<div class="text-center"> {{ _("Expiry date") }} </div>
</td>
{% endif %}
</tr>
</table>
</div>
</div>
</div>

68
lms/www/courses/certificate.html
View File

@@ -2,22 +2,70 @@
{% block title %} {{ member.full_name }} - {{ course.title }} {% endblock %}
{% block content %}
<div class="common-page-style">
<div class="container certificate-page">
{% if certificate.member == frappe.session.user %}
<a class="btn btn-default btn-sm pull-right" target="_blank" href="/api/method/frappe.utils.print_format.download_pdf?doctype=LMS%20Certificate&name={{ certificate.name }}&_lang=en">
{{ _("Export") }}
</a>
{% endif %}
<div class="common-page-style lms-page-style">
<div class="container">
<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" %}
<script src="/assets/lms/js/html2canvas.js"></script>
<div class="certificate-parent">
<div>
{{ final_template }}
</div>
<div>
{% if doc.member == frappe.session.user %}
<div class="">
<a class="btn btn-default btn-sm" target="_blank" href="/api/method/frappe.utils.print_format.download_pdf?doctype=LMS%20Certificate&name={{ doc.name }}&_lang=en">
{{ _("Download") }}
</a>
<a class="btn btn-default btn-sm ml-2" target="_blank" href="https://www.linkedin.com/shareArticle?summary=My+course+completion+certificate+for+%22Microsoft+Excel+-+Excel+from+Beginner+to+Advanced%22&url=http%3A%2F%2Fude.my%2FUC-0654a032-f576-449a-a373-c5f530ab6a24&source=udemy&title=Udemy+Course+Completion+Certificate&mini=true">
{{ _("Share") }}
</a>
</div>
{% endif %}
<div class="card-heading mt-4">
{{ _("Certificate Recipient") }}:
</div>
<div class="certificate-recipient">
{{ widgets.Avatar(member=member, avatar_class="avatar-small") }}
<span class="ml-2">
{{ member.full_name }}
</span>
</div>
<div class="card-heading mt-4">
{{ _("Issued On") }}:
</div>
<div>
{{ frappe.utils.format_date(doc.issue_date, "medium") }}
</div>
<div class="card-heading mt-4">
{{ _("About the Course") }}:
</div>
<div>
{{ course.title }}
</div>
</div>
</div>
</div>
</div>

28
lms/www/courses/certificate.py
View File

@@ -13,34 +13,38 @@ def get_context(context):
except KeyError:
redirect_to_course_list()
context.certificate = frappe.db.get_value(
context.doc = frappe.db.get_value(
"LMS Certificate",
certificate_name,
["name", "member", "issue_date", "expiry_date", "course"],
as_dict=True,
)
if context.certificate.course != course_name:
if context.doc.course != course_name:
redirect_to_course_list()
context.course = frappe.db.get_value(
"LMS Course", course_name, ["title", "name", "image"], as_dict=True
)
context.instructors = (", ").join([x.full_name for x in get_instructors(course_name)])
context.member = frappe.db.get_value(
"User", context.certificate.member, ["full_name"], as_dict=True
"User", context.doc.member, ["full_name", "username"], as_dict=True
)
context.logo = get_url(
frappe.db.get_single_value("Website Settings", "banner_image"), full_address=True
default_print_format = frappe.db.get_value(
"Property Setter",
{
"doc_type": "LMS Certificate",
"property": "default_print_format",
},
["value"],
as_dict=True,
)
template_name = frappe.db.get_single_value(
"LMS Settings", "custom_certificate_template"
template = frappe.db.get_value(
"Print Format", default_print_format.value, ["html", "css"], as_dict=True
)
context.custom_certificate_template = frappe.db.get_value(
"Web Template", template_name, "template"
)
context.custom_template = render_template(context.custom_certificate_template, context)
final_template = "<style> " + template.css + " </style>" + template.html
context.final_template = render_template(final_template, context)
def redirect_to_course_list():

2
lms/www/jobs/index.html
View File

@@ -20,7 +20,7 @@
<span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
class="company-logo"></span>
<div class="job-card-info">
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="card-heading">{{ _(job.job_title) }}</div>
<div class="job-company course-meta">
<div class="mr-5">{{ job.company_name }}</div>

2
lms/www/jobs/job.html
View File

@@ -15,7 +15,7 @@
class="company-logo"></span>
<div class="job-card-info">
<div class="job-card-heading">{{ _(job.job_title) }}</div>
<div class="card-heading">{{ _(job.job_title) }}</div>
<div class="job-company course-meta">
<div class="mr-5">{{ job.company_name }}</div>