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

feat: onboarding ui

Browse Source
This commit is contained in:
Jannat Patel
2022-12-19 23:25:53 +05:30
parent f93d7b0193
commit de19abbc5e
5 changed files with 91 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
"field_order": [
"search_placeholder",
"portal_course_creation",
"add_to_navbar",
"is_onboarding_complete",
"column_break_2",
"custom_certificate_template",
"livecode_url",
@@ -141,15 +141,15 @@
},
{
"default": "0",
"fieldname": "add_to_navbar",
"fieldname": "is_onboarding_complete",
"fieldtype": "Check",
"label": "Add LMS pages to navbar"
"label": "Is Onboarding Complete"
}
],
"index_web_pages_for_search": 1,
"issingle": 1,
"links": [],
"modified": "2022-12-12 11:36:16.162795",
"modified": "2022-12-19 18:36:33.987735",
"modified_by": "Administrator",
"module": "LMS",
"name": "LMS Settings",

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

@@ -130,6 +130,10 @@ input[type=checkbox] {
stroke: none;
}
.onboarding-parent .icon {
stroke: none;
}
.course-card-content {
padding: 1rem;
display: flex;
@@ -1883,3 +1887,27 @@ select {
.clickable-row {
cursor: pointer;
}
.onboarding-parent {
background-color: var(--primary-light);
padding: 2rem 0;
}
.onboarding-steps {
display: flex;
justify-content: space-between;
padding-top: 1.5rem;
font-weight: 500;
color: var(--gray-900);
}
.onboarding-steps-link {
display: flex;
align-items: center;
color: inherit;
}
.onboarding-steps-link:hover {
text-decoration: none;
color: inherit;
}

8
lms/public/icons/symbol-defs.svg
View File

@@ -64,4 +64,12 @@
<path d="M27.8837 15.1677V15.6677H28.3837H34.6997V29.4519H22.3877V13.7919C22.3877 7.77141 27.1738 2.82244 33.1317 2.55889V8.06527C30.1784 8.31947 27.8837 10.8044 27.8837 13.7919V15.1677Z" stroke="#1F272E"/>
<path d="M10.7958 15.1677V15.6677H11.2958H17.6118V29.4517L5.2998 29.4518V13.7919C5.2998 7.77141 10.0859 2.82244 16.0438 2.55889V8.06527C13.0905 8.31947 10.7958 10.8044 10.7958 13.7919V15.1677Z" stroke="#1F272E"/>
</svg>
<svg id="icon-disabled-check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM14.8734 8.1402C15.264 7.74969 15.264 7.11652 14.8734 6.726C14.4829 6.33547 13.8498 6.33547 13.4592 6.726L12.6259 7.55933L10.9592 9.226L8.333 11.8522L7.37345 10.8927L6.54011 10.0593C6.14959 9.6688 5.51643 9.6688 5.1259 10.0593C4.73538 10.4499 4.73538 11.083 5.1259 11.4735L5.95923 12.3069L7.6259 13.9735C7.81344 14.1611 8.0678 14.2664 8.333 14.2664C8.5982 14.2664 8.8526 14.1611 9.0401 13.9735L12.3734 10.6402L14.0401 8.9735L14.8734 8.1402Z" fill="#A6B1B9"/>
</svg>
<svg id="icon-green-check-circled" width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.8734 10.1402C17.264 9.74969 17.264 9.11652 16.8734 8.726C16.4829 8.33547 15.8498 8.33547 15.4592 8.726L14.6259 9.55933L12.9592 11.226L10.333 13.8522L9.37345 12.8927L8.54011 12.0593C8.14959 11.6688 7.51643 11.6688 7.1259 12.0593C6.73538 12.4499 6.73538 13.083 7.1259 13.4735L7.95923 14.3069L9.6259 15.9735C9.81344 16.1611 10.0678 16.2664 10.333 16.2664C10.5982 16.2664 10.8526 16.1611 11.0401 15.9735L14.3734 12.6402L16.0401 10.9735L16.8734 10.1402Z" fill="#68D391"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

50
lms/templates/onboarding_header.html Normal file
View File

@@ -0,0 +1,50 @@
{% set is_onboarding_complete = frappe.db.get_single_value("LMS Settings", "is_onboarding_complete") %}
{% if has_course_moderator_role() and not is_onboarding_complete %}
{% set course_created = frappe.db.count("LMS Course") %}
{% set chapter_created = frappe.db.count("Course Chapter") %}
{% set lesson_created = frappe.db.count("Course Lesson") %}
{% set quiz_created = frappe.db.count("LMS Quiz") %}
<div class="onboarding-parent">
<div class="container">
<h3 class="mt-0"> {{ _("Welcome") }} 🎉</h3>
<div class="onboarding-subtitle">
{{ _("Lets start setting up your content on the LMS so that you can reclaim time and focus on growth.") }}
</div>
<div class="onboarding-steps">
<a class="onboarding-steps-link" href="/courses/new-course">
<svg class="icon icon-md">
<use href="{% if course_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
</use>
</svg>
{{ _("Create a Course") }}
</a>
<a class="onboarding-steps-link" {% if course_created %} href="" {% endif %}>
<svg class="icon icon-md">
<use href="{% if chapter_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
</use>
</svg>
{{ _("Add a Chapter") }}
</a>
<a class="onboarding-steps-link" {% if chapter_created %} href="" {% endif %}>
<svg class="icon icon-md">
<use href="{% if lesson_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
</use>
</svg>
{{ _("Add a Lesson") }}
</a>
<a class="onboarding-steps-link" {% if lesson_created %} href="" {% endif %}>
<svg class="icon icon-md">
<use href="{% if quiz_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
</use>
</svg>
{{ _("Create a Quiz") }}
</a>
</div>
</div>
</div>
{% endif %}

1
lms/www/courses/index.html
View File

@@ -12,6 +12,7 @@
{% block content %}
{% include "lms/templates/onboarding_header.html" %}
<div class="common-page-style">
<div class="container">
{% if restriction %}