From 4eb5390ad82ace8e179c4907323cf22a68cb258a Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Tue, 25 Apr 2023 20:54:57 +0530 Subject: [PATCH] feat: redesign lesson page --- lms/hooks.py | 1 + lms/lms/utils.py | 31 +++++--- lms/lms/widgets/CourseOutline.html | 10 ++- lms/public/css/style.css | 81 ++++++++++--------- lms/public/icons/symbol-defs.svg | 3 + lms/www/batch/learn.html | 121 ++++++++++------------------- lms/www/batch/learn.py | 1 + lms/www/courses/course.html | 63 ++------------- lms/www/courses/create.html | 112 +++++++++++++++----------- lms/www/courses/create.js | 84 ++++++++++++++++---- lms/www/courses/create.py | 16 ++-- lms/www/courses/outline.html | 37 +++++++++ lms/www/courses/outline.py | 8 ++ lms/www/utils.py | 1 + 14 files changed, 314 insertions(+), 255 deletions(-) create mode 100644 lms/www/courses/outline.html create mode 100644 lms/www/courses/outline.py diff --git a/lms/hooks.py b/lms/hooks.py index 6eadb4a5..2a6e7f15 100644 --- a/lms/hooks.py +++ b/lms/hooks.py @@ -139,6 +139,7 @@ website_route_rules = [ {"from_route": "/sketches/", "to_route": "sketches/sketch"}, {"from_route": "/courses/", "to_route": "courses/course"}, {"from_route": "/courses//edit", "to_route": "courses/create"}, + {"from_route": "/courses//outline", "to_route": "courses/outline"}, {"from_route": "/courses//", "to_route": "courses/certificate"}, {"from_route": "/courses//learn", "to_route": "batch/learn"}, { diff --git a/lms/lms/utils.py b/lms/lms/utils.py index 4086e111..a7c0870b 100644 --- a/lms/lms/utils.py +++ b/lms/lms/utils.py @@ -502,12 +502,17 @@ def can_create_courses(member=None): if not member: member = frappe.session.user + if frappe.session.user == "Guest": + return False + + if has_course_instructor_role(member) or has_course_moderator_role(member): + return True + portal_course_creation = frappe.db.get_single_value( "LMS Settings", "portal_course_creation" ) - return frappe.session.user != "Guest" and ( - portal_course_creation == "Anyone" or has_course_instructor_role(member) - ) + + return portal_course_creation == "Anyone" def has_course_moderator_role(member=None): @@ -618,15 +623,17 @@ def get_filtered_membership(course, memberships): def show_start_learing_cta(course, membership): - return ( - not course.disable_self_learning - and not membership - and not course.upcoming - and not check_profile_restriction() - and not is_instructor(course.name) - and course.status == "Approved" - and has_lessons(course) - ) + + if course.disable_self_learning or course.upcoming: + return False + if is_instructor(course.name): + return False + if course.status != "Approved": + return False + if not has_lessons(course): + return False + if not membership: + return True def has_lessons(course): diff --git a/lms/lms/widgets/CourseOutline.html b/lms/lms/widgets/CourseOutline.html index 69ac09c8..f7da14a6 100644 --- a/lms/lms/widgets/CourseOutline.html +++ b/lms/lms/widgets/CourseOutline.html @@ -4,6 +4,7 @@ {% if chapters | length %}
+ {% if not lesson_page %}
{{ _("Course Content") }}
@@ -16,9 +17,10 @@ . {{ get_lessons(course.name, None, False) }} lessons
+ {% endif %} {% if chapters | length %} -
+
{% for chapter in chapters %} {% set lessons = get_lessons(course.name, chapter) %} @@ -41,7 +43,7 @@
{% if chapter.description %} -
+
{{ chapter.description }}
{% endif %} @@ -67,8 +69,8 @@ {{ lesson.title }} {% if membership %} - - + + {% endif %} diff --git a/lms/public/css/style.css b/lms/public/css/style.css index e01adfbd..2ed8e865 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -29,6 +29,30 @@ letter-spacing: 0.005em; } +.sticky { + position: sticky; + top: -1px; + z-index: 1020; +} + +.is-pinned { + background: #FFFFFF; + padding: 0.5rem 0; + border-bottom: 1px solid var(--gray-300); +} + +.field-parent { + margin-top: 2rem; +} + +.frappe-control .ql-editor:not(.read-mode) { + background-color: #FFFFFF; +} + +.ql-toolbar.ql-snow, .ql-container.ql-snow { + border: 1px solid var(--gray-300); +} + .rating .icon { background: var(--gray-200); border-radius: var(--border-radius-md); @@ -60,16 +84,20 @@ border: 1px solid var(--gray-300); border-radius: var(--border-radius-md); padding: 0.5rem; - width: 75%; - margin: 0.25rem 0 1rem; + width: 100%; + margin-top: 0.25rem; } .field-input:focus-visible { outline: none; } +.field-group { + margin-bottom: 2rem; +} + .field-description { - font-size: var(--text-sm); + font-size: var(--text-md); } .invisible-input { @@ -480,7 +508,8 @@ input[type=checkbox] { color: var(--gray-900); display: flex; align-items: center; - padding-bottom: 0.5rem; + padding-bottom: 0.25rem; + padding-right: 0.5rem; font-size: var(--text-lg); } @@ -491,6 +520,8 @@ input[type=checkbox] { .chapter-description { color: var(--gray-900); font-size: var(--text-sm); + margin-left: 0.5rem; + margin-bottom: 0.5rem; } .course-content-parent .chapter-description { @@ -663,7 +694,7 @@ input[type=checkbox] { } .course-details-outline { - margin-top: 1rem; + margin-top: 2.5rem; } .lesson-content { @@ -672,7 +703,7 @@ input[type=checkbox] { } .lesson-content-card { - margin-top: 2rem; + margin-top: 1.5rem; } .lesson-content-card .alert-dismissible .close { @@ -682,7 +713,7 @@ input[type=checkbox] { .course-content-parent { display: grid; grid-gap: 2rem; - grid-template-columns: 2fr minmax(600px, 5fr); + grid-template-columns: 1fr 3fr; } @media (max-width: 1024px) { @@ -704,16 +735,6 @@ input[type=checkbox] { margin-top: 2rem } -.lesson-pagination-parent { - margin-top: 1rem; -} - -@media (max-width: 768px) { - .lesson-pagination-parent { - margin-left: 0px; - } -} - .lesson-video { width: 100%; } @@ -723,12 +744,6 @@ input[type=checkbox] { border-radius: var(--border-radius-md); } -.lesson-title { - display: flex; - align-items: center; - margin-bottom: 1rem; -} - .profile-page { padding-top: 0; } @@ -993,12 +1008,12 @@ pre { } .empty-state { - background: var(--gray-200); - border-radius: var(--border-radius-lg); - padding: 4rem; - display: flex; - justify-content: center; - align-items: center; + border: 1px solid var(--gray-300); + border-radius: var(--border-radius-lg); + padding: 4rem; + display: flex; + justify-content: center; + align-items: center; } .empty-state-text { @@ -1568,14 +1583,6 @@ li { margin-bottom: 1.25rem; } -.course-card-wide .avatar .standard-image { - border: 1px solid var(--gray-400); -} - -.lesson-progress-tick { - margin: 0 0.5rem -} - .no-preview { color: var(--gray-600); } diff --git a/lms/public/icons/symbol-defs.svg b/lms/public/icons/symbol-defs.svg index 37a0ec86..0e7bb679 100644 --- a/lms/public/icons/symbol-defs.svg +++ b/lms/public/icons/symbol-defs.svg @@ -74,4 +74,7 @@ + + + diff --git a/lms/www/batch/learn.html b/lms/www/batch/learn.html index f106a366..21d2911e 100644 --- a/lms/www/batch/learn.html +++ b/lms/www/batch/learn.html @@ -3,11 +3,7 @@ {% block title %} -{% if lesson.title %} {{ lesson.title }} - {{ course.title }} -{% else %} -{{ _("New Lesson") }} -{% endif %} {% endblock %} @@ -21,16 +17,35 @@ {% block page_content %} -
+ +
- {{ BreadCrumb(course, lesson) }} +
-
- {{ widgets.CourseOutline(course=course, membership=membership) }} +
+
+ {{ course.title }} +
+ + {% if membership %} +
+
{{ progress }}% {{ _("Completed") }}
+
+
+
+
+
+ {% endif %} + +
+ {{ widgets.CourseOutline(course=course, membership=membership, lesson_page=True) }} +
+ {{ BreadCrumb(course, lesson) }} {{ LessonContent(lesson) }} - {% if not lesson.edit_mode and course.status == "Approved" and not course.upcoming %} + {% if course.status == "Approved" and not course.upcoming %} {{ Discussions() }} {% endif %}
@@ -57,25 +72,24 @@ {% set instructors = get_instructors(course.name) %} {% set is_instructor = is_instructor(course.name) %} -
-
+
+
+
+ {% if get_progress(course.name, lesson.name) == 'Complete' %} + {{ _("COMPLETED") }} + {% endif %} - -
{{ _("Edit") }} + {% endif %} +
+ +
{% if lesson.title %}{{ lesson.title }}{% endif %}
- - {% if get_progress(course.name, lesson.name) == 'Complete' %} - {{ _("COMPLETED") }} - {% endif %} - - - {% if (is_instructor or has_course_moderator_role()) and not lesson.edit_mode %} - - {% endif %}
@@ -107,21 +121,17 @@
-
+
{% if show_lesson %} - {% if is_instructor and not lesson.include_in_preview and not lesson.edit_mode %} + {% if is_instructor and not lesson.include_in_preview %}
{{ _("This lesson is not available for preview. As you are the Instructor of the course only you can see it.") }} ×
{% endif %} - {% if lesson.edit_mode %} - {{ EditLesson(lesson) }} - {% else %} {{ render_html(lesson) }} - {% endif %} {% else %} {% set course_link = "" + _('here') + "" %} @@ -133,9 +143,8 @@ {% endif %}
- {% if not lesson.edit_mode %} {{ pagination(prev_url, next_url) }} - {% endif %} +
{% endmacro %} @@ -164,56 +173,6 @@ {% endif %} {% endmacro %} - - -{% macro EditLesson(lesson) %} - -
-
{% if lesson.youtube %}{{ lesson.youtube }}{% endif %}
- -
{% if lesson.quiz_id %}{{ lesson.quiz_id }}{% endif %}
-
- - {% if lesson.body %} -
{{ lesson.body }}
- {% endif %} -
- -
-
{% if lesson.question %}{{ lesson.question }}{% endif %}
- - -
- - - - -
- - {% if lesson.name %} - - {{ _("Create Quiz") }} - {% endif %} - - {{ UploadAttachments() }} - -
- - {{ HelpArticle() }} -{% endmacro %} - - {% macro UploadAttachments() %}
diff --git a/lms/www/batch/learn.py b/lms/www/batch/learn.py index 3b37d21c..98161f6c 100644 --- a/lms/www/batch/learn.py +++ b/lms/www/batch/learn.py @@ -27,6 +27,7 @@ def get_context(context): context.lesson = get_current_lesson_details(lesson_number, context) instructor = is_instructor(context.course.name) + context.show_lesson = ( context.membership or (context.lesson and context.lesson.include_in_preview) diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html index 843f94cc..b89868cb 100644 --- a/lms/www/courses/course.html +++ b/lms/www/courses/course.html @@ -12,11 +12,9 @@
{{ CourseHeaderOverlay(course) }} - {{ CourseSettings(course) }} {{ Description(course) }} - {{ Save(course) }} {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }} - {% if not course.edit_mode and course.status == "Approved" and not frappe.utils.cint(course.upcoming) %} + {% if course.status == "Approved" and not frappe.utils.cint(course.upcoming) %} {% include "lms/templates/reviews.html" %} {% endif %}
@@ -69,6 +67,7 @@ {% endif %}
+ {% if not course.upcoming %}
{% for i in [1, 2, 3, 4, 5] %} @@ -78,10 +77,9 @@ {% endfor %}
+ {% endif %} - - -
+
{{ _("Instructors") }}:
{% for instructor in get_instructors(course.name) %}
@@ -149,8 +147,6 @@
{% endif %} - -
{{ SlotModal(course) }} @@ -160,54 +156,12 @@ {% macro Description(course) %} - {% if course.edit_mode %} - {% if course.description %} -
{{ course.description }}
- {% endif %} -
- {% else %} -
- {{ frappe.utils.md_to_html(course.description) }} -
- {% endif %} +
+ {{ course.description }} +
{% endmacro %} - -{% macro CourseSettings(course) %} - - {% if course.edit_mode and has_course_moderator_role() %} -
- - -
- {% endif %} - -{% endmacro %} - - - -{% macro Save(course) %} - {% if course.edit_mode %} -
- - {% if course.name %} - - {{ _("Back to Course") }} - - {% endif %} -
- {% endif %} -{% endmacro %} - {% macro RelatedCourses(course) %} @@ -251,7 +205,6 @@ {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and membership.current_lesson else "1.1" if first_lesson_exists(course.name) else None %} -
{% if is_instructor(course.name) and not course.published and course.status != "Under Review" %}
@@ -310,7 +263,7 @@
{% if is_instructor(course.name) or has_course_moderator_role() %} - + diff --git a/lms/www/courses/create.html b/lms/www/courses/create.html index 72c7493c..c3cbe242 100644 --- a/lms/www/courses/create.html +++ b/lms/www/courses/create.html @@ -5,10 +5,21 @@ {% block content %}
-
-
{{ _("Course Details") }}
-
-
+ +
+
+ + +
{{ _("Course Details") }}
+
+
+ +
+ +
+
{{ _("Title") }} @@ -18,11 +29,11 @@
- +
-
+
{{ _("Preview Video") }} @@ -32,11 +43,11 @@
- +
-
+
{{ _("Short Introduction") }} @@ -46,11 +57,11 @@
- +
-
+
{{ _("Tags") }} @@ -74,34 +85,7 @@
-
-
-
- {{ _("Course Image") }} -
-
- {{ _("Add an appropriate image") }} -
-
-
- -
- -
- -
-
-
- {{ _("Course Description") }} -
-
- {{ _("Add a detailed description") }} -
-
- -
- -
+
-
+
+
+
+ {{ _("Course Image") }} +
+
+ {{ _("Add an appropriate image") }} +
+
+
+ +
+ +
+ +
+
+
+ {{ _("Course Description") }} +
+
+ {{ _("Add a detailed description") }} +
+
+
+ {% if course.description %} +
+ {{ course.description }} +
+ {% endif %} +
+ +
{{ _("Instructor") }}
-
- {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }} {{ member.full_name }} +
+ {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }} + + {{ member.full_name }} +
- -
{% endblock %} + +{%- block script %} + {{ super() }} + {{ include_script('controls.bundle.js') }} +{% endblock %} \ No newline at end of file diff --git a/lms/www/courses/create.js b/lms/www/courses/create.js index 13af5328..09324f74 100644 --- a/lms/www/courses/create.js +++ b/lms/www/courses/create.js @@ -1,4 +1,6 @@ frappe.ready(() => { + pin_header(); + $(".tags").click((e) => { e.preventDefault(); $("#tags-input").focus(); @@ -12,17 +14,25 @@ frappe.ready(() => { $(e.target).parent().parent().remove(); }); - $("#image").change((e) => { - $(e.target) - .parent() - .siblings("img") - .addClass("image-preview") - .attr("src", URL.createObjectURL(e.target.files[0])); - }); - $(".btn-save-course").click((e) => { save_course(e); }); + + if ($("#description").length) { + make_editor(); + } + + $("#tags-input").focus((e) => { + $(e.target).keypress((e) => { + if (e.which == 13) { + create_tag(e); + } + }); + }); + + $(".btn-upload").click((e) => { + upload_file(e); + }); }); const create_tag = (e) => { @@ -50,11 +60,11 @@ const save_course = (e) => { method: "lms.lms.doctype.lms_course.lms_course.save_course", args: { tags: tags.join(", "), - title: $("#title").text(), - short_introduction: $("#intro").text(), - video_link: $("#video-link").text(), - image: $("#image").attr("href"), - description: this.code_field_group.fields_dict["code_md"].value, + title: $("#title").val(), + short_introduction: $("#intro").val(), + video_link: $("#video-link").val(), + image: $(".image-preview").attr("src"), + description: this.description.fields_dict["description"].value, course: $("#title").data("course") ? $("#title").data("course") : "", @@ -67,8 +77,54 @@ const save_course = (e) => { indicator: "green", }); setTimeout(() => { - window.location.href = `/courses/${data.message}?edit=1`; + window.location.href = `/courses/${data.message}`; }, 1000); }, }); }; + +const make_editor = () => { + this.description = new frappe.ui.FieldGroup({ + fields: [ + { + fieldname: "description", + fieldtype: "Text Editor", + default: $("#description-data").html(), + }, + ], + body: $("#description").get(0), + }); + this.description.make(); + $("#description .form-section:last").removeClass("empty-section"); + $("#description .frappe-control").removeClass("hide-control"); + $("#description .form-column").addClass("p-0"); +}; + +const pin_header = () => { + const el = document.querySelector(".sticky"); + const observer = new IntersectionObserver( + ([e]) => + e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), + { threshold: [1] } + ); + + observer.observe(el); +}; + +const upload_file = (e) => { + new frappe.ui.FileUploader({ + disable_file_browser: true, + folder: "Home/Attachments", + make_attachments_public: true, + restrictions: { + allowed_file_types: ["image/*"], + }, + on_success: (file_doc) => { + $(e.target) + .parent() + .siblings("img") + .addClass("image-preview") + .attr("src", file_doc.file_url); + }, + }); +}; diff --git a/lms/www/courses/create.py b/lms/www/courses/create.py index 747bb9e1..49cf5803 100644 --- a/lms/www/courses/create.py +++ b/lms/www/courses/create.py @@ -5,24 +5,26 @@ from frappe import _ def get_context(context): context.no_cache = 1 + try: course_name = frappe.form_dict["course"] except KeyError: redirect_to_courses_list() + if not can_create_courses(): + message = "You do not have permission to access this page." + if frappe.session.user == "Guest": + message = "Please login to access this page." + + raise frappe.PermissionError(_(message)) + if course_name == "new-course": - if not can_create_courses(): - message = "You do not have permission to access this page." - if frappe.session.user == "Guest": - message = "Please login to access this page." - - raise frappe.PermissionError(_(message)) - context.course = frappe._dict() context.course.edit_mode = True context.membership = None else: set_course_context(context, course_name) + context.member = frappe.db.get_value( "User", frappe.session.user, ["full_name", "username"], as_dict=True ) diff --git a/lms/www/courses/outline.html b/lms/www/courses/outline.html new file mode 100644 index 00000000..a20f11c9 --- /dev/null +++ b/lms/www/courses/outline.html @@ -0,0 +1,37 @@ +{% extends "lms/templates/lms_base.html" %} + + +{% block title %} +{{ _("Outline") }} - {{ course.title }} +{% endblock %} + +{% block page_content %} +
+
+ {{ EmptyState() }} +
+
+{% endblock %} + +{% macro EmptyState() %} +
+
+
+ {{ _("You have not added any chapter yet") }} +
+
+ {{ _("Create and manage your chapters from here.") }} +
+
+ +
+
+
+{% endmacro %} \ No newline at end of file diff --git a/lms/www/courses/outline.py b/lms/www/courses/outline.py new file mode 100644 index 00000000..873e3656 --- /dev/null +++ b/lms/www/courses/outline.py @@ -0,0 +1,8 @@ +import frappe + + +def get_context(context): + context.no_cache = 1 + context.course = frappe.db.get_value( + "LMS Course", frappe.form_dict["course"], ["name", "title"], as_dict=True + ) diff --git a/lms/www/utils.py b/lms/www/utils.py index 0ed23bce..3eca7d10 100644 --- a/lms/www/utils.py +++ b/lms/www/utils.py @@ -25,6 +25,7 @@ def get_common_context(context): context.lessons = get_lessons(course.name) membership = get_membership(course.name, frappe.session.user, batch_name) context.membership = membership + context.progress = frappe.utils.cint(membership.progress) if membership else 0 context.batch = membership.batch if membership and membership.batch else None context.course.query_parameter = ( "?batch=" + membership.batch if membership and membership.batch else ""