From 8e8111d27293bd909361b3531181f454bc3a68b0 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 17 Apr 2023 15:00:18 +0530 Subject: [PATCH] fix: certificate page UI --- .../doctype/lms_settings/lms_settings.json | 9 +-- .../print_format/certificate/certificate.json | 14 ++-- lms/public/css/style.css | 7 +- lms/templates/certificate.html | 47 ------------- lms/www/courses/certificate.html | 68 ++++++++++++++++--- lms/www/courses/certificate.py | 28 ++++---- lms/www/jobs/index.html | 2 +- lms/www/jobs/job.html | 2 +- 8 files changed, 90 insertions(+), 87 deletions(-) delete mode 100644 lms/templates/certificate.html diff --git a/lms/lms/doctype/lms_settings/lms_settings.json b/lms/lms/doctype/lms_settings/lms_settings.json index 7dbeed68..f3ed9073 100644 --- a/lms/lms/doctype/lms_settings/lms_settings.json +++ b/lms/lms/doctype/lms_settings/lms_settings.json @@ -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", diff --git a/lms/lms/print_format/certificate/certificate.json b/lms/lms/print_format/certificate/certificate.json index f5e01b26..cea5f505 100644 --- a/lms/lms/print_format/certificate/certificate.json +++ b/lms/lms/print_format/certificate/certificate.json @@ -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\":\"
\\n\\t

LMS Certificate

\\n\\t

{{ doc.name }}

\\n
\",\"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\n\n\n\n\n
\n
\n
\n \n \n
\n {{ _(\"This certifies that\") }}\n
\n \n
\n {{ member.full_name }}\n
\n
\n {{ _(\"has successfully completed the course on\") }}\n {{ course.title }} \n on {{ frappe.utils.format_date(certificate.issue_date, \"medium\") }}.\n
\n \n \n \n {% if instructors %}\n \n {% endif %}\n \n {% if certificate.expiry_date %}\n \n {% endif %}\n \n
\n
\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
\n
\n
{{ _(\"Course Instructor\") }}
\n 		\n
\n {{ frappe.utils.format_date(certificate.expiry_date, \"medium\") }}\n
\n
\n
{{ _(\"Expiry Date\") }}
\n
\n
\n
\n
", + "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\n\n\n\n\n
\n
\n \n \n
\n {{ _(\"This certifies that\") }}\n
\n \n
\n {{ member.full_name }}\n
\n
\n {{ _(\"has successfully completed the course on\") }}\n {{ course.title }} \n on {{ frappe.utils.format_date(certificate.issue_date, \"medium\") }}.\n
\n \n \n \n {% if instructors %}\n \n {% endif %}\n \n {% if certificate.expiry_date %}\n \n \n \n {% endif %}\n \n
\n
\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
\n
\n
{{ _(\"Course Instructor\") }}
\n 		\n
\n {{ frappe.utils.format_date(certificate.expiry_date, \"medium\") }}\n
\n
\n
{{ _(\"Expiry Date\") }}
\n
\n
\n
", "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", diff --git a/lms/public/css/style.css b/lms/public/css/style.css index b0893c43..be538353 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -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; diff --git a/lms/templates/certificate.html b/lms/templates/certificate.html deleted file mode 100644 index b72f2ebf..00000000 --- a/lms/templates/certificate.html +++ /dev/null @@ -1,47 +0,0 @@ - -
- -
- -
- - -
- {{ _("This certifies that") }} -
- -
- {{ member.full_name }} -
-
- {{ _("has successfully completed the course on") }} - {{ course.title }} - on {{ frappe.utils.format_date(certificate.issue_date, "medium") }}. -
- - - - {% if instructors %} - - {% endif %} - {% if certificate.expiry_date %} - - - {% endif %} - -
-
- {{ instructors }} -
-
-
{{ _("Course Instructor") }}
- 		-
- {{ frappe.utils.format_date(certificate.expiry_date, "medium") }} -
-
-
{{ _("Expiry date") }}
-
-
-
-
diff --git a/lms/www/courses/certificate.html b/lms/www/courses/certificate.html index 818527aa..3649e290 100644 --- a/lms/www/courses/certificate.html +++ b/lms/www/courses/certificate.html @@ -2,22 +2,70 @@ {% block title %} {{ member.full_name }} - {{ course.title }} {% endblock %} {% block content %} -
-
- - {% if certificate.member == frappe.session.user %} - - {{ _("Export") }} - - {% endif %} +
+
{{ _("All Courses") }} {{ course.title }}
- {% include "lms/templates/certificate.html" %} - + +
+ +
+ {{ final_template }} +
+ +
+ + {% if doc.member == frappe.session.user %} + + {% endif %} + +
+ {{ _("Certificate Recipient") }}: +
+ +
+ {{ widgets.Avatar(member=member, avatar_class="avatar-small") }} + + {{ member.full_name }} + +
+ +
+ {{ _("Issued On") }}: +
+ +
+ {{ frappe.utils.format_date(doc.issue_date, "medium") }} +
+ +
+ {{ _("About the Course") }}: +
+ +
+ {{ course.title }} +
+ + + + + +
+
+ +
diff --git a/lms/www/courses/certificate.py b/lms/www/courses/certificate.py index 8321862b..c4444142 100644 --- a/lms/www/courses/certificate.py +++ b/lms/www/courses/certificate.py @@ -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 = "" + template.html + context.final_template = render_template(final_template, context) def redirect_to_course_list(): diff --git a/lms/www/jobs/index.html b/lms/www/jobs/index.html index 1c464a59..54971584 100644 --- a/lms/www/jobs/index.html +++ b/lms/www/jobs/index.html @@ -20,7 +20,7 @@
-
{{ _(job.job_title) }}
+
{{ _(job.job_title) }}
{{ job.company_name }}
diff --git a/lms/www/jobs/job.html b/lms/www/jobs/job.html index 04d0c267..e148e218 100644 --- a/lms/www/jobs/job.html +++ b/lms/www/jobs/job.html @@ -15,7 +15,7 @@ class="company-logo">
-
{{ _(job.job_title) }}
+
{{ _(job.job_title) }}
{{ job.company_name }}