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

fix: ux issues

Browse Source
This commit is contained in:
Jannat Patel
2022-08-26 16:35:02 +05:30
parent 4499b34b51
commit 7d697f068f
7 changed files with 380 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
lms/lms/doctype/course_lesson/course_lesson.js
View File

@@ -6,99 +6,124 @@ frappe.ui.form.on('Course Lesson', {
frm.trigger('setup_help'); frm.trigger('setup_help');
}, },
setup_help(frm) { 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(` 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> <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"> <table class="table">
<div class="col-sm-8"> <tr style="background-color: var(--fg-hover-color); font-weight: bold">
<th style="width: 20%;">
${__("Content Type")} ${__("Content Type")}
</div> </th>
<div class="col-sm-4"> <th style="width: 40%;">
${__("Syntax")} ${__("Syntax")}
</div> </th>
</div> <th>
${__("Description")}
<div class="row mb-3"> </th>
<div class="col-sm-8"> </tr>
${__("Video")} <tr>
</div> <td>
<div class="col-sm-4">
{{ Video("url_of_source") }}
</div>
</div>
<div class="row mb-3">
<div class="col-sm-8">
${__("YouTube Video")} ${__("YouTube Video")}
</div> </td>
<div class="col-sm-4"> <td>
{{ YouTubeVideo("unique_embed_id") }} {{ YouTubeVideo("unique_embed_id") }}
</div> </td>
</div> <td>
<span>
<div class="row mb-3"> ${ __("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.") }
<div class="col-sm-8"> </span>
${"Exercise"} <ul class="p-4">
</div> <li>
<div class="col-sm-4"> ${ __("Upload the video on youtube.") }
{{ Exercise("exercise_name") }} </li>
</div> <li>
</div> ${ __("When you share a youtube video, it shows an option called Embed.") }
</li>
<div class="row mb-3"> <li>
<div class="col-sm-8"> ${ __("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")} ${__("Quiz")}
</div> </td>
<div class="col-sm-4"> <td>
{{ Quiz("lms_quiz_name") }} {{ Quiz("lms_quiz_id") }}
</div> </td>
</div> <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]) }
<div class="row mb-3"> </td>
<div class="col-sm-8"> </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")} ${__("Assignment")}
</div> </td>
<div class="col-sm-4"> <td>
{{ Assignment("id-filetype") }} {{ Assignment("id-filetype") }}
</div> </td>
</div> </tr>
</table>
<hr> <hr>
<table class="table">
<div class="row font-weight-bold mb-3"> <tr style="background-color: var(--fg-hover-color); font-weight: bold">
<div class="col-sm-8"> <th style="width: 90%">
${__("Supported File Types for Assignment")} ${__("Supported File Types for Assignment")}
</div> </th>
<div class="col-sm-4"> <th>
${__("Syntax")} ${__("Syntax")}
</div> </th>
</div> </tr>
<tr>
<div class="row mb-3"> <td>
<div class="col-sm-8"> .doc, .docx, .xml
.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document <td>
</div>
<div class="col-sm-4">
${__("Document")} ${__("Document")}
</div> </td>
</div> </tr>
<tr>
<div class="row mb-3"> <td>
<div class="col-sm-8">
.pdf .pdf
</div> </td>
<div class="col-sm-4"> <td>
${__("PDF")} ${__("PDF")}
</div> </td>
</div> </tr>
<tr>
<div class="row mb-3"> <td>
<div class="col-sm-8">
.png, .jpg, .jpeg .png, .jpg, .jpeg
</div> </td>
<div class="col-sm-4"> <td>
${__("Image")} ${__("Image")}
</div> </td>
</div> </tr>
</table>
`); `);
} }
}); });

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

@@ -1630,3 +1630,34 @@ li {
top: 0; top: 0;
right: -30px; 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);
}

7
lms/public/js/common_functions.js
View File

@@ -133,6 +133,7 @@ const scroll_to_chapter_container = () => {
const save_chapter = (e) => { const save_chapter = (e) => {
let target = $(e.currentTarget); let target = $(e.currentTarget);
let parent = target.closest(".chapter-parent"); let parent = target.closest(".chapter-parent");
frappe.call({ frappe.call({
method: "lms.lms.doctype.lms_course.lms_course.save_chapter", method: "lms.lms.doctype.lms_course.lms_course.save_chapter",
args: { args: {
@@ -143,7 +144,13 @@ const save_chapter = (e) => {
"chapter": target.data("chapter") ? target.data("chapter") : "" "chapter": target.data("chapter") ? target.data("chapter") : ""
}, },
callback: (data) => { callback: (data) => {
frappe.show_alert({
message: __("Saved"),
indicator: "green",
});
setTimeout(() => {
window.location.reload(); window.location.reload();
}, 1000)
} }
}); });
}; };

50
lms/www/batch/learn.html
View File

@@ -163,7 +163,7 @@
{% endif %} {% endif %}
<div> <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 %} data-href="{{ next_url }}" {% endif %} href="">
{% if next_url %} {{ _("Next") }} {% else %} {{ _("Mark as Complete") }} {% endif %} {% if next_url %} {{ _("Next") }} {% else %} {{ _("Mark as Complete") }} {% endif %}
<img class="ml-2" src="/assets/lms/icons/side-arrow-white.svg"> <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> <button class="btn btn-primary btn-sm btn-lesson pull-right ml-2"> {{ _("Save") }} </button>
{% if lesson.name %} {% if lesson.name %}
<button class="btn btn-secondary btn-sm pull-right btn-back ml-2"> {{ _("Back to Lesson") }} </button> <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 %} {% endif %}
<a class="btn btn-secondary btn-sm pull-right" href="/quizzes"> {{ _("Create a Quiz") }} </a>
<div class="attachments-parent"> <div class="attachments-parent">
<div class="attachment-controls"> <div class="attachment-controls">
@@ -217,32 +217,42 @@
<!-- Help Article --> <!-- Help Article -->
{% macro HelpArticle() %} {% macro HelpArticle() %}
<div> <div class="help-article">
<h3> {{ _("Help Article") }} </h3> <h3> {{ _("Help Article") }} </h3>
<p> <p>
{{ _("You can add additional content to the lesson using a special syntax.The table below {{ _("You can add additional content to the lesson using a special syntax. The table below mentions
mentions all types of dynamic content that you can add to the lessons and the syntax for the all types of dynamic content that you can add to the lessons and the syntax for the same.") }}
same.") }}
</p> </p>
<table class="table w-100"> <table class="table w-100">
<tr> <tr>
<th class="w-50"> {{ _("Content Type") }} </th> <th style="width: 20%;"> {{ _("Content Type") }} </th>
<th> {{ _("Syntax") }} </th> <th style="width: 40%;"> {{ _("Syntax") }} </th>
</tr> <th> {{ _("Description") }} </th>
<tr>
<td>
{{ _("Video") }}
</td>
<td>
{% raw %} {{ Video("url_of_source") }} {% endraw %}
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
{{ _("YouTube Video") }} {{ _("YouTube Video") }}
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@@ -250,7 +260,11 @@
{{ _("Quiz") }} {{ _("Quiz") }}
</td> </td>
<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> </td>
</tr> </tr>
</table> </table>

14
lms/www/batch/learn.js
View File

@@ -507,7 +507,7 @@ const show_upload_modal = () => {
new frappe.ui.FileUploader({ new frappe.ui.FileUploader({
folder: "Home/Attachments", folder: "Home/Attachments",
restrictions: { restrictions: {
allowed_file_types: ['image/*'] allowed_file_types: ['image/*', 'video/*']
}, },
on_success: (file_doc) => { on_success: (file_doc) => {
$(".attachments").append(build_attachment_table(file_doc)); $(".attachments").append(build_attachment_table(file_doc));
@@ -521,11 +521,19 @@ const show_upload_modal = () => {
const build_attachment_table = (file_doc) => { 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}') }}` : `![](${file_doc.file_url})`;
return $(` return $(`
<tr class="attachment-row"> <tr class="attachment-row">
<td>${file_doc.file_name}</td> <td>${file_doc.file_name}</td>
<td class=""><a class="button is-secondary button-links copy-link" data-link="![](${file_doc.file_url})" <td class="">
data-name="${file_doc.file_name}" > ${__("Copy Link")} </a></td> <a class="button is-secondary button-links copy-link" data-link="${link}"
data-name="${file_doc.file_name}" > ${__("Copy Link")}
</a>
</td>
</tr> </tr>
`); `);
}; };

101
lms/www/courses/course.html
View File

@@ -56,8 +56,7 @@
<!-- Course Card --> <!-- Course Card -->
{% macro CourseCardWide(course) %} {% macro CourseCardWide(course) %}
<div class="d-flex align-items-center mt-8">
<div class="d-flex align-items-center mt-8">
{% for tag in get_tags(course.name) %} {% for tag in get_tags(course.name) %}
<div class="course-card-pills" {% if course.edit_mode %} contenteditable="true" {% endif %}>{{ tag }} <div class="course-card-pills" {% if course.edit_mode %} contenteditable="true" {% endif %}>{{ tag }}
{% if course.edit_mode %} {% if course.edit_mode %}
@@ -72,38 +71,57 @@
{% if course.edit_mode %} {% if course.edit_mode %}
<button class="btn btn-default btn-sm btn-tag"> {{ _("Add Tag") }} </button> <button class="btn btn-default btn-sm btn-tag"> {{ _("Add Tag") }} </button>
{% endif %} {% endif %}
</div> </div>
<div {% if course.edit_mode %} data-placeholder="{{ _('Title') }}" contenteditable="true" {% endif %} <div {% if course.edit_mode %} data-placeholder="{{ _('Title') }}" contenteditable="true" {% endif %}
id="title" {% if course.name %} data-course="{{ course.name | urlencode }}" {% endif %} id="title" {% if course.name %} data-course="{{ course.name | urlencode }}" {% endif %}
class="course-card-wide-title">{% if course.title %} {{ course.title }} {% endif %}</div> class="course-card-wide-title">{% if course.title %} {{ course.title }} {% endif %}</div>
<div {% if course.edit_mode %} contenteditable="true" data-placeholder="{{ _('Short Introduction') }}" <div {% if course.edit_mode %} contenteditable="true" data-placeholder="{{ _('Short Introduction') }}"
{% endif %} id="intro" >{% if course.short_introduction %} {{ course.short_introduction }} {% endif %}</div> {% endif %} id="intro" >{% if course.short_introduction %} {{ course.short_introduction }} {% endif %}</div>
{% if course.edit_mode %} {% if course.edit_mode %}
<div class="preview-video-header"> <div class="preview-video-header">
<div class="d-block mt-1" contenteditable="true" id="video-link" <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> 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> <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> <use href="#icon-solid-info"></use>
</svg> </svg>
</div> </div>
</div>
</div>
{% if course.image %}
<div class="course-image-attachment {% if not course.image %} hide {% endif %} "> <div class="course-image-attachment {% if not course.image %} hide {% endif %} ">
<a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a> <a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a>
<button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button> <button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button>
</div> </div>
{% else %}
<a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a> <a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
{% endif %} {% endif %}
{% endif %}
{% if not course.edit_mode %} {% if not course.edit_mode %}
<div class="mt-8"> <div class="mt-8">
<div class="bold-heading">{{ _("Instructors") }}:</div> <div class="bold-heading">{{ _("Instructors") }}:</div>
{% for instructor in get_instructors(course.name) %} {% for instructor in get_instructors(course.name) %}
<div class="mt-1"> <div class="mt-1">
@@ -113,27 +131,27 @@
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if membership and not course.edit_mode %} {% if membership and not course.edit_mode %}
{% set progress = frappe.utils.cint(membership.progress) %} {% set progress = frappe.utils.cint(membership.progress) %}
<div class="mt-8"> <div class="mt-8">
<div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div> <div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
<div class="progress" title="{{ progress }}% Completed"> <div class="progress" title="{{ progress }}% Completed">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}" <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%"> aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
</div> </div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
<!-- Overlay --> <!-- Overlay -->
{% macro CourseHeaderOverlay(course) %} {% macro CourseHeaderOverlay(course) %}
{% if not course.edit_mode %} {% if not course.edit_mode %}
<div class="course-overlay-card"> <div class="course-overlay-card">
{% if course.video_link %} {% if course.video_link %}
<iframe class="preview-video" src="{{ course.video_link }}"></iframe> <iframe class="preview-video" src="{{ course.video_link }}"></iframe>
@@ -175,25 +193,25 @@
{{ CTASection(course, membership) }} {{ CTASection(course, membership) }}
</div> </div>
</div> </div>
{{ SlotModal(course) }} {{ SlotModal(course) }}
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
<!-- Description --> <!-- Description -->
{% macro Description(course) %} {% macro Description(course) %}
<div class="course-description-section" {% if course.edit_mode %} style="min-height: 100px" {% endif %} <div class="course-description-section" {% if course.edit_mode %} style="min-height: 100px" {% endif %}
{% if course.edit_mode %} contenteditable="true" {% endif %} id="description" {% if course.edit_mode %} contenteditable="true" {% endif %} id="description"
data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_html(course.description) }}{% endif %}</div> data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_html(course.description) }}{% endif %}</div>
{% endmacro %} {% endmacro %}
<!-- Save --> <!-- Save -->
{% macro Save(course) %} {% macro Save(course) %}
{% if course.edit_mode %} {% if course.edit_mode %}
<div class="my-4"> <div class="my-4">
<button class="btn btn-primary btn-md btn-save-course"> <button class="btn btn-primary btn-md btn-save-course">
{{ _("Save Course Details") }} {{ _("Save Course Details") }}
</button> </button>
@@ -202,15 +220,14 @@ data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_
{{ _("Back to Course") }} {{ _("Back to Course") }}
</a> </a>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro CourseCreator(course) %} {% macro CourseCreator(course) %}
<div class="course-home-headings"> {{ _("Course Creators") }} </div> <div class="course-home-headings"> {{ _("Course Creators") }} </div>
<div class="common-card-style course-creators-card">
<div class="common-card-style course-creators-card">
{% set instructors = get_instructors(course.name) %} {% set instructors = get_instructors(course.name) %}
{% for instructor in instructors %} {% for instructor in instructors %}
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
@@ -221,14 +238,14 @@ data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endmacro %} {% endmacro %}
<!-- Related Courses Section --> <!-- Related Courses Section -->
{% macro RelatedCourses(course) %} {% macro RelatedCourses(course) %}
{% if course.related_courses | length %} {% if course.related_courses | length %}
<div class="related-courses"> <div class="related-courses">
<div class="container"> <div class="container">
<div class="course-home-headings"> {{ _("Other Courses") }} </div> <div class="course-home-headings"> {{ _("Other Courses") }} </div>
<div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false"> <div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
@@ -257,8 +274,8 @@ data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_
</div> </div>
</div> </div>
</div> </div>
{% endif%} {% endif %}
{% endmacro %} {% endmacro %}

10
lms/www/courses/course.js
View File

@@ -327,10 +327,12 @@ const add_tag = (e) => {
const save_course = (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({ frappe.call({
method: "lms.lms.doctype.lms_course.lms_course.save_course", method: "lms.lms.doctype.lms_course.lms_course.save_course",
args: { args: {
"tags": $('.course-card-pills').map((i, el) => $(el).text().trim()).get().join(", "), "tags": tags.join(", "),
"title": $("#title").text(), "title": $("#title").text(),
"short_introduction": $("#intro").text(), "short_introduction": $("#intro").text(),
"video_link": $("#video-link").text(), "video_link": $("#video-link").text(),
@@ -339,7 +341,13 @@ const save_course = (e) => {
"course": $("#title").data("course") ? $("#title").data("course") : "" "course": $("#title").data("course") ? $("#title").data("course") : ""
}, },
callback: (data) => { callback: (data) => {
frappe.show_alert({
message: __("Saved"),
indicator: "green",
});
setTimeout(() => {
window.location.href = `/courses/${data.message}?edit=1`; window.location.href = `/courses/${data.message}?edit=1`;
}, 1000);
} }
}); });
}; };