fix: ux issues
This commit is contained in:
Jannat Patel
@@ -6,99 +6,124 @@ frappe.ui.form.on('Course Lesson', {
|
||||
frm.trigger('setup_help');
|
||||
},
|
||||
setup_help(frm) {
|
||||
let quiz_link = `<a href="/app/lms-quiz"> ${__("Quiz List")} </a>`;
|
||||
let exercise_link = `<a href="/app/exercise"> ${__("Exercise List")} </a>`;
|
||||
let file_link = `<a href="/app/file"> ${__("File DocType")} </a>`;
|
||||
|
||||
frm.get_field('help').html(`
|
||||
<p>${__("You can add some more additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.")}</p>
|
||||
<div class="row font-weight-bold mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("Content Type")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
${__("Syntax")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("Video")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
{{ Video("url_of_source") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("YouTube Video")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
{{ YouTubeVideo("unique_embed_id") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
${"Exercise"}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
{{ Exercise("exercise_name") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("Quiz")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
{{ Quiz("lms_quiz_name") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("Assignment")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
{{ Assignment("id-filetype") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<tr style="background-color: var(--fg-hover-color); font-weight: bold">
|
||||
<th style="width: 20%;">
|
||||
${__("Content Type")}
|
||||
</th>
|
||||
<th style="width: 40%;">
|
||||
${__("Syntax")}
|
||||
</th>
|
||||
<th>
|
||||
${__("Description")}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
${__("YouTube Video")}
|
||||
</td>
|
||||
<td>
|
||||
{{ YouTubeVideo("unique_embed_id") }}
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
${ __("Copy and paste the syntax in the editor. Replace 'embed_src' with the embed source that YouTube provides. To get the source, follow the steps mentioned below.") }
|
||||
</span>
|
||||
<ul class="p-4">
|
||||
<li>
|
||||
${ __("Upload the video on youtube.") }
|
||||
</li>
|
||||
<li>
|
||||
${ __("When you share a youtube video, it shows an option called Embed.") }
|
||||
</li>
|
||||
<li>
|
||||
${ __("On clicking it, it provides an iframe. Copy the source (src) of the iframe and paste it here.") }
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
${__("Quiz")}
|
||||
</td>
|
||||
<td>
|
||||
{{ Quiz("lms_quiz_id") }}
|
||||
</td>
|
||||
<td>
|
||||
${ __("Copy and paste the syntax in the editor. Replace 'lms_quiz_id' with the ID of the Quiz you want to add. You can get the ID of the quiz from the {0}.", [quiz_link]) }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
${__("Video")}
|
||||
</td>
|
||||
<td>
|
||||
{{ Video("url_of_source") }}
|
||||
</td>
|
||||
<td>
|
||||
${ __("Upload a video from your local machine to the {0}. Copy and paste this syntax in the editor. Replace 'url_of_source' with the File URL field of the document you created in the File DocType.", [file_link]) }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
${"Exercise"}
|
||||
</td>
|
||||
<td>
|
||||
{{ Exercise("exercise_id") }}
|
||||
</td>
|
||||
<td>
|
||||
${ __("Copy and paste the syntax in the editor. Replace 'exercise_id' with the ID of the Exercise you want to add. You can get the ID of the exercise from the {0}.", [exercise_link]) }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
${__("Assignment")}
|
||||
</td>
|
||||
<td>
|
||||
{{ Assignment("id-filetype") }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
<div class="row font-weight-bold mb-3">
|
||||
<div class="col-sm-8">
|
||||
${__("Supported File Types for Assignment")}
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
${__("Syntax")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
${__("Document")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
.pdf
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
${__("PDF")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
.png, .jpg, .jpeg
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
${__("Image")}
|
||||
</div>
|
||||
</div>
|
||||
<table class="table">
|
||||
<tr style="background-color: var(--fg-hover-color); font-weight: bold">
|
||||
<th style="width: 90%">
|
||||
${__("Supported File Types for Assignment")}
|
||||
</th>
|
||||
<th>
|
||||
${__("Syntax")}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
.doc, .docx, .xml
|
||||
<td>
|
||||
${__("Document")}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
.pdf
|
||||
</td>
|
||||
<td>
|
||||
${__("PDF")}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
.png, .jpg, .jpeg
|
||||
</td>
|
||||
<td>
|
||||
${__("Image")}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1630,3 +1630,34 @@ li {
|
||||
top: 0;
|
||||
right: -30px;
|
||||
}
|
||||
|
||||
.tool-tip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tool-tip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 30rem;
|
||||
background-color: var(--gray-800);
|
||||
color: var(--fg-color);
|
||||
padding: 1rem;
|
||||
border-radius: var(--border-radius-md);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tool-tip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltiptext ul {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.help-article {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
@@ -133,6 +133,7 @@ const scroll_to_chapter_container = () => {
|
||||
const save_chapter = (e) => {
|
||||
let target = $(e.currentTarget);
|
||||
let parent = target.closest(".chapter-parent");
|
||||
|
||||
frappe.call({
|
||||
method: "lms.lms.doctype.lms_course.lms_course.save_chapter",
|
||||
args: {
|
||||
@@ -143,7 +144,13 @@ const save_chapter = (e) => {
|
||||
"chapter": target.data("chapter") ? target.data("chapter") : ""
|
||||
},
|
||||
callback: (data) => {
|
||||
window.location.reload();
|
||||
frappe.show_alert({
|
||||
message: __("Saved"),
|
||||
indicator: "green",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -163,7 +163,7 @@
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<a class="btn btn-primary next {% if membership.progress|int == 100 and not next_url %} hide {% endif %}"
|
||||
<a class="btn btn-primary next {% if not next_url and (membership.progress|int == 100 or is_instructor) %} hide {% endif %}"
|
||||
{% if next_url %} data-href="{{ next_url }}" {% endif %} href="">
|
||||
{% if next_url %} {{ _("Next") }} {% else %} {{ _("Mark as Complete") }} {% endif %}
|
||||
<img class="ml-2" src="/assets/lms/icons/side-arrow-white.svg">
|
||||
@@ -187,8 +187,8 @@
|
||||
<button class="btn btn-primary btn-sm btn-lesson pull-right ml-2"> {{ _("Save") }} </button>
|
||||
{% if lesson.name %}
|
||||
<button class="btn btn-secondary btn-sm pull-right btn-back ml-2"> {{ _("Back to Lesson") }} </button>
|
||||
<a class="btn btn-secondary btn-sm pull-right" href="/quizzes"> {{ _("Create Quiz") }} </a>
|
||||
{% endif %}
|
||||
<a class="btn btn-secondary btn-sm pull-right" href="/quizzes"> {{ _("Create a Quiz") }} </a>
|
||||
|
||||
<div class="attachments-parent">
|
||||
<div class="attachment-controls">
|
||||
@@ -217,32 +217,42 @@
|
||||
|
||||
<!-- Help Article -->
|
||||
{% macro HelpArticle() %}
|
||||
<div>
|
||||
<div class="help-article">
|
||||
<h3> {{ _("Help Article") }} </h3>
|
||||
<p>
|
||||
{{ _("You can add additional content to the lesson using a special syntax.The table below
|
||||
mentions all types of dynamic content that you can add to the lessons and the syntax for the
|
||||
same.") }}
|
||||
{{ _("You can add additional content to the lesson using a special syntax. The table below mentions
|
||||
all types of dynamic content that you can add to the lessons and the syntax for the same.") }}
|
||||
</p>
|
||||
<table class="table w-100">
|
||||
<tr>
|
||||
<th class="w-50"> {{ _("Content Type") }} </th>
|
||||
<th> {{ _("Syntax") }} </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ _("Video") }}
|
||||
</td>
|
||||
<td>
|
||||
{% raw %} {{ Video("url_of_source") }} {% endraw %}
|
||||
</td>
|
||||
<th style="width: 20%;"> {{ _("Content Type") }} </th>
|
||||
<th style="width: 40%;"> {{ _("Syntax") }} </th>
|
||||
<th> {{ _("Description") }} </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{ _("YouTube Video") }}
|
||||
</td>
|
||||
<td>
|
||||
{% raw %} {{ YouTubeVideo("unique_embed_id") }} {% endraw %}
|
||||
{% raw %} {{ YouTubeVideo("embed_src") }} {% endraw %}
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{ _("Copy and paste the syntax in the editor. Replace 'embed_src' with the embed source
|
||||
that YouTube provides. To get the source, follow the steps mentioned below.") }}
|
||||
</span>
|
||||
<ul class="p-4">
|
||||
<li>
|
||||
{{ _("Upload the video on youtube.") }}
|
||||
</li>
|
||||
<li>
|
||||
{{ _("When you share a youtube video, it shows an option called Embed.") }}
|
||||
</li>
|
||||
<li>
|
||||
{{ _("On clicking it, it provides an iframe. Copy the source (src) of the iframe and
|
||||
paste it here.") }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -250,7 +260,11 @@
|
||||
{{ _("Quiz") }}
|
||||
</td>
|
||||
<td>
|
||||
{% raw %} {{ Quiz("lms_quiz_name") }} {% endraw %}
|
||||
{% raw %} {{ Quiz("lms_quiz_id") }} {% endraw %}
|
||||
</td>
|
||||
<td>
|
||||
{% set quiz_link = "<a href='/quizzes'> Quiz List </a>" %}
|
||||
{{ _("Copy and paste the syntax in the editor. Replace 'lms_quiz_id' with the ID of the Quiz. You can get the ID of the quiz from the {0}.").format(quiz_link) }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -507,7 +507,7 @@ const show_upload_modal = () => {
|
||||
new frappe.ui.FileUploader({
|
||||
folder: "Home/Attachments",
|
||||
restrictions: {
|
||||
allowed_file_types: ['image/*']
|
||||
allowed_file_types: ['image/*', 'video/*']
|
||||
},
|
||||
on_success: (file_doc) => {
|
||||
$(".attachments").append(build_attachment_table(file_doc));
|
||||
@@ -521,11 +521,19 @@ const show_upload_modal = () => {
|
||||
|
||||
|
||||
const build_attachment_table = (file_doc) => {
|
||||
let video_types = ["mov", "mp4", "mkv"];
|
||||
let video_extension = file_doc.file_url.split(".").pop();
|
||||
let is_video = video_types.indexOf(video_extension) >= 0;
|
||||
let link = is_video ? `{{ Video('${file_doc.file_url}') }}` : ``;
|
||||
|
||||
return $(`
|
||||
<tr class="attachment-row">
|
||||
<td>${file_doc.file_name}</td>
|
||||
<td class=""><a class="button is-secondary button-links copy-link" data-link=""
|
||||
data-name="${file_doc.file_name}" > ${__("Copy Link")} </a></td>
|
||||
<td class="">
|
||||
<a class="button is-secondary button-links copy-link" data-link="${link}"
|
||||
data-name="${file_doc.file_name}" > ${__("Copy Link")}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
};
|
||||
|
||||
@@ -56,209 +56,226 @@
|
||||
|
||||
<!-- Course Card -->
|
||||
{% macro CourseCardWide(course) %}
|
||||
|
||||
<div class="d-flex align-items-center mt-8">
|
||||
{% for tag in get_tags(course.name) %}
|
||||
<div class="course-card-pills" {% if course.edit_mode %} contenteditable="true" {% endif %}>{{ tag }}
|
||||
<div class="d-flex align-items-center mt-8">
|
||||
{% for tag in get_tags(course.name) %}
|
||||
<div class="course-card-pills" {% if course.edit_mode %} contenteditable="true" {% endif %}>{{ tag }}
|
||||
{% if course.edit_mode %}
|
||||
<span class="btn-delete-tag">
|
||||
<svg class="icon icon-sm">
|
||||
<use class="" href="#icon-close"></use>
|
||||
</svg>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if course.edit_mode %}
|
||||
<span class="btn-delete-tag">
|
||||
<svg class="icon icon-sm">
|
||||
<use class="" href="#icon-close"></use>
|
||||
</svg>
|
||||
</span>
|
||||
<button class="btn btn-default btn-sm btn-tag"> {{ _("Add Tag") }} </button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div {% if course.edit_mode %} data-placeholder="{{ _('Title') }}" contenteditable="true" {% endif %}
|
||||
id="title" {% if course.name %} data-course="{{ course.name | urlencode }}" {% endif %}
|
||||
class="course-card-wide-title">{% if course.title %} {{ course.title }} {% endif %}</div>
|
||||
|
||||
<div {% if course.edit_mode %} contenteditable="true" data-placeholder="{{ _('Short Introduction') }}"
|
||||
{% endif %} id="intro" >{% if course.short_introduction %} {{ course.short_introduction }} {% endif %}</div>
|
||||
|
||||
{% if course.edit_mode %}
|
||||
<button class="btn btn-default btn-sm btn-tag"> {{ _("Add Tag") }} </button>
|
||||
<div class="preview-video-header">
|
||||
<div class="d-block mt-1" contenteditable="true" id="video-link"
|
||||
data-placeholder=" {{ _('Preview Video Link') }} ">{% if course.video_link %}{{ course.video_link }}{% endif %}</div>
|
||||
|
||||
<div class="preview-info">
|
||||
<div class="tool-tip">
|
||||
<div class="tooltiptext">
|
||||
<span>
|
||||
{{ _('If you have a video that provides a teaser or preview of the course, you can add it here.') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ _("Follow the steps mentioned below for the same.") }}
|
||||
</span>
|
||||
<ul>
|
||||
<li>
|
||||
{{ _("Upload the video on youtube.") }}
|
||||
</li>
|
||||
<li>
|
||||
{{ _("When you share a youtube video, it shows an option called Embed.") }}
|
||||
</li>
|
||||
<li>
|
||||
{{ _("On clicking it, it provides an iframe. Copy the source (src) of the iframe and paste it here.") }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg class="icon icon-md">
|
||||
<use href="#icon-solid-info"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-image-attachment {% if not course.image %} hide {% endif %} ">
|
||||
<a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a>
|
||||
<button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button>
|
||||
</div>
|
||||
<a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div {% if course.edit_mode %} data-placeholder="{{ _('Title') }}" contenteditable="true" {% endif %}
|
||||
id="title" {% if course.name %} data-course="{{ course.name | urlencode }}" {% endif %}
|
||||
class="course-card-wide-title">{% if course.title %} {{ course.title }} {% endif %}</div>
|
||||
|
||||
<div {% if course.edit_mode %} contenteditable="true" data-placeholder="{{ _('Short Introduction') }}"
|
||||
{% endif %} id="intro" >{% if course.short_introduction %} {{ course.short_introduction }} {% endif %}</div>
|
||||
|
||||
{% if course.edit_mode %}
|
||||
<div class="preview-video-header">
|
||||
<div class="d-block mt-1" contenteditable="true" id="video-link"
|
||||
data-placeholder=" {{ _('Preview Video Link') }} ">{% if course.video_link %}{{ course.video_link }}{% endif %}</div>
|
||||
<svg class="icon icon-md preview-info">
|
||||
<title>{{ _("If you have a video that provides a teaser or preview of the course, you can add it here. Upload the video on youtube. When you share a youtube video, it shows an option called Embed. On clicking it, it provides an iframe. Copy the source of the iframe and paste it here.") }}</title>
|
||||
<use href="#icon-solid-info"></use>
|
||||
</svg>
|
||||
{% if not course.edit_mode %}
|
||||
<div class="mt-8">
|
||||
<div class="bold-heading">{{ _("Instructors") }}:</div>
|
||||
{% for instructor in get_instructors(course.name) %}
|
||||
<div class="mt-1">
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
||||
<a class="button-links" href="{{ get_profile_url(instructor.username) }}">
|
||||
<span class="course-instructor"> {{ instructor.full_name }} </span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
{% if course.image %}
|
||||
<div class="course-image-attachment {% if not course.image %} hide {% endif %} ">
|
||||
<a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a>
|
||||
<button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button>
|
||||
</div>
|
||||
{% else %}
|
||||
<a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if not course.edit_mode %}
|
||||
<div class="mt-8">
|
||||
<div class="bold-heading">{{ _("Instructors") }}:</div>
|
||||
{% for instructor in get_instructors(course.name) %}
|
||||
<div class="mt-1">
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
||||
<a class="button-links" href="{{ get_profile_url(instructor.username) }}">
|
||||
<span class="course-instructor"> {{ instructor.full_name }} </span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if membership and not course.edit_mode %}
|
||||
{% set progress = frappe.utils.cint(membership.progress) %}
|
||||
<div class="mt-8">
|
||||
<div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
|
||||
<div class="progress" title="{{ progress }}% Completed">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
|
||||
{% if membership and not course.edit_mode %}
|
||||
{% set progress = frappe.utils.cint(membership.progress) %}
|
||||
<div class="mt-8">
|
||||
<div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
|
||||
<div class="progress" title="{{ progress }}% Completed">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
<!-- Overlay -->
|
||||
{% macro CourseHeaderOverlay(course) %}
|
||||
{% if not course.edit_mode %}
|
||||
<div class="course-overlay-card">
|
||||
{% if not course.edit_mode %}
|
||||
<div class="course-overlay-card">
|
||||
|
||||
{% if course.video_link %}
|
||||
<iframe class="preview-video" src="{{ course.video_link }}"></iframe>
|
||||
{% endif %}
|
||||
|
||||
<div class="course-overlay-content">
|
||||
<div class="course-overlay-title"> {{ course.title }} </div>
|
||||
|
||||
{{ Notes(course) }}
|
||||
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use class="" href="#icon-users">
|
||||
</svg>
|
||||
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
|
||||
</div>
|
||||
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-education"></use>
|
||||
</svg>
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</div>
|
||||
{% if course.video_link %}
|
||||
<iframe class="preview-video" src="{{ course.video_link }}"></iframe>
|
||||
{% endif %}
|
||||
|
||||
{% if course.paid_certificate %}
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-badge"></use>
|
||||
</svg>
|
||||
<span class="certificate-price" data-price="{{ course.price_certificate }}">
|
||||
{{ format_amount(course.price_certificate, course.currency) }}
|
||||
</span>
|
||||
<span class="indicator-pill green ml-3"> {{ _("Get Certified") }} </span>
|
||||
<div class="course-overlay-content">
|
||||
<div class="course-overlay-title"> {{ course.title }} </div>
|
||||
|
||||
{{ Notes(course) }}
|
||||
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use class="" href="#icon-users">
|
||||
</svg>
|
||||
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
|
||||
</div>
|
||||
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-education"></use>
|
||||
</svg>
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.paid_certificate %}
|
||||
<div class="vertically-center mb-3">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-badge"></use>
|
||||
</svg>
|
||||
<span class="certificate-price" data-price="{{ course.price_certificate }}">
|
||||
{{ format_amount(course.price_certificate, course.currency) }}
|
||||
</span>
|
||||
<span class="indicator-pill green ml-3"> {{ _("Get Certified") }} </span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ CTASection(course, membership) }}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ CTASection(course, membership) }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ SlotModal(course) }}
|
||||
{{ SlotModal(course) }}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
<!-- Description -->
|
||||
{% macro Description(course) %}
|
||||
<div class="course-description-section" {% if course.edit_mode %} style="min-height: 100px" {% endif %}
|
||||
{% if course.edit_mode %} contenteditable="true" {% endif %} id="description"
|
||||
data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_html(course.description) }}{% endif %}</div>
|
||||
<div class="course-description-section" {% if course.edit_mode %} style="min-height: 100px" {% endif %}
|
||||
{% if course.edit_mode %} contenteditable="true" {% endif %} id="description"
|
||||
data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_html(course.description) }}{% endif %}</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
<!-- Save -->
|
||||
{% macro Save(course) %}
|
||||
{% if course.edit_mode %}
|
||||
<div class="my-4">
|
||||
<button class="btn btn-primary btn-md btn-save-course">
|
||||
{{ _("Save Course Details") }}
|
||||
</button>
|
||||
{% if course.name %}
|
||||
<a class="btn btn-secondary btn-md btn-exit-edit ml-2" href="/courses/{{ course.name }}">
|
||||
{{ _("Back to Course") }}
|
||||
</a>
|
||||
{% if course.edit_mode %}
|
||||
<div class="my-4">
|
||||
<button class="btn btn-primary btn-md btn-save-course">
|
||||
{{ _("Save Course Details") }}
|
||||
</button>
|
||||
{% if course.name %}
|
||||
<a class="btn btn-secondary btn-md btn-exit-edit ml-2" href="/courses/{{ course.name }}">
|
||||
{{ _("Back to Course") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{% macro CourseCreator(course) %}
|
||||
<div class="course-home-headings"> {{ _("Course Creators") }} </div>
|
||||
|
||||
<div class="common-card-style course-creators-card">
|
||||
{% set instructors = get_instructors(course.name) %}
|
||||
{% for instructor in instructors %}
|
||||
<div class="d-flex align-items-center">
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }}
|
||||
<div class="ml-4">
|
||||
<div class="course-creator-name"> {{ instructor.full_name }} </div>
|
||||
<div class="course-meta"> {{ get_authored_courses(instructor.name) | length }} {{ _("Courses Created") }} </div>
|
||||
<div class="course-home-headings"> {{ _("Course Creators") }} </div>
|
||||
<div class="common-card-style course-creators-card">
|
||||
{% set instructors = get_instructors(course.name) %}
|
||||
{% for instructor in instructors %}
|
||||
<div class="d-flex align-items-center">
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }}
|
||||
<div class="ml-4">
|
||||
<div class="course-creator-name"> {{ instructor.full_name }} </div>
|
||||
<div class="course-meta"> {{ get_authored_courses(instructor.name) | length }} {{ _("Courses Created") }} </div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
<!-- Related Courses Section -->
|
||||
{% macro RelatedCourses(course) %}
|
||||
{% if course.related_courses | length %}
|
||||
<div class="related-courses">
|
||||
<div class="container">
|
||||
<div class="course-home-headings"> {{ _("Other Courses") }} </div>
|
||||
<div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
|
||||
<div class="carousel-inner">
|
||||
{% for crs in course.related_courses %}
|
||||
{% if loop.index % 3 == 1 %}
|
||||
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}"><div class="cards-parent">
|
||||
{% endif %}
|
||||
{{ widgets.CourseCard(course=crs, read_only=False) }}
|
||||
{% if loop.index % 3 == 0 or loop.index == course.related_courses | length %} </div> </div> {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if course.related_courses | length %}
|
||||
<div class="related-courses">
|
||||
<div class="container">
|
||||
<div class="course-home-headings"> {{ _("Other Courses") }} </div>
|
||||
<div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
|
||||
<div class="carousel-inner">
|
||||
{% for crs in course.related_courses %}
|
||||
{% if loop.index % 3 == 1 %}
|
||||
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}"><div class="cards-parent">
|
||||
{% endif %}
|
||||
{{ widgets.CourseCard(course=crs, read_only=False) }}
|
||||
{% if loop.index % 3 == 0 or loop.index == course.related_courses | length %} </div> </div> {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if course.related_courses | length > 3 %}
|
||||
<div class="slider-controls">
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
</a>
|
||||
{% if course.related_courses | length > 3 %}
|
||||
<div class="slider-controls">
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
@@ -327,10 +327,12 @@ const add_tag = (e) => {
|
||||
|
||||
|
||||
const save_course = (e) => {
|
||||
let tags = $('.course-card-pills').map((i, el) => $(el).text().trim()).get();
|
||||
tags = tags.filter(word => word.trim().length > 0);
|
||||
frappe.call({
|
||||
method: "lms.lms.doctype.lms_course.lms_course.save_course",
|
||||
args: {
|
||||
"tags": $('.course-card-pills').map((i, el) => $(el).text().trim()).get().join(", "),
|
||||
"tags": tags.join(", "),
|
||||
"title": $("#title").text(),
|
||||
"short_introduction": $("#intro").text(),
|
||||
"video_link": $("#video-link").text(),
|
||||
@@ -339,7 +341,13 @@ const save_course = (e) => {
|
||||
"course": $("#title").data("course") ? $("#title").data("course") : ""
|
||||
},
|
||||
callback: (data) => {
|
||||
window.location.href = `/courses/${data.message}?edit=1`;
|
||||
frappe.show_alert({
|
||||
message: __("Saved"),
|
||||
indicator: "green",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = `/courses/${data.message}?edit=1`;
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user