diff --git a/lms/lms/doctype/lms_course/lms_course.py b/lms/lms/doctype/lms_course/lms_course.py index a420dec3..0019f743 100644 --- a/lms/lms/doctype/lms_course/lms_course.py +++ b/lms/lms/doctype/lms_course/lms_course.py @@ -167,7 +167,6 @@ def reindex_exercises(doc): @frappe.whitelist(allow_guest=True) def search_course(text): - search_courses = [] courses = frappe.get_all( "LMS Course", filters={"published": True}, @@ -177,17 +176,8 @@ def search_course(text): "short_introduction": ["like", f"%{text}%"], "description": ["like", f"%{text}%"], }, + fields=["name", "title"], ) - - """ for course in courses: - search_courses.append(frappe.get_doc("LMS Course", course)) """ - - """ template = frappe.render_template("lms/templates/course_list.html", { - "title": _("Search Results"), - "courses": search_courses, - "widgets": Widgets() - }) """ - return courses diff --git a/lms/public/css/style.css b/lms/public/css/style.css index 1f9ea4ac..1697920b 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -929,17 +929,29 @@ pre { } .search { - background-image: url(/assets/frappe/icons/timeless/search.svg); - border: none; - border-radius: var(--border-radius-md); - font-size: var(--text-sm); - padding: 0.625rem 0.75rem; - height: 36px; - background-repeat: no-repeat; - text-indent: 1.5rem; - background-position: 1rem 0.7rem; - width: 30%; - box-shadow: var(--shadow-sm); + background-image: url(/assets/frappe/icons/timeless/search.svg); + border: none; + border-radius: var(--border-radius-md); + font-size: var(--text-sm); + padding: 0.625rem 0.75rem; + height: 36px; + background-repeat: no-repeat; + text-indent: 1.5rem; + background-position: 1rem 0.7rem; + width: 30%; + box-shadow: var(--shadow-sm); +} + +.search-course { + background-position: 1rem; + text-indent: 1rem; + font-size: var(--text-base); + padding: 1.5rem; + width: 100%; +} + +.search:focus { + outline: none; } .course-search-header { @@ -1918,3 +1930,28 @@ select { cursor: pointer; margin-right: 1rem; } + +.result-row { + display: block; + padding: 1rem; + border-top: 1px solid var(--gray-300); + font-weight: 500; + color: var(--gray-900); + font-size: var(--text-base); + cursor: pointer; +} + +.result-row:hover { + color: inherit; + text-decoration: none; +} + +.search-modal .modal-dialog { + max-width: 70%; + margin: 15% auto !important; +} + +.search-modal .modal-body { + padding: 0 !important; + margin: 0 !important; +} diff --git a/lms/templates/search_course/search_course.html b/lms/templates/search_course/search_course.html index 3de74cb2..22bcd2a2 100644 --- a/lms/templates/search_course/search_course.html +++ b/lms/templates/search_course/search_course.html @@ -1,16 +1,14 @@ {% set search_placeholder = frappe.db.get_single_value("LMS Settings", "search_placeholder") %} {% set portal_course_creation = frappe.db.get_single_value("LMS Settings", "portal_course_creation") %} - -
- × -
- -
-
-
{{ _("No results found") }}
-
{{ _("Try some other keyword or explore our list of courses.") }}
+ + - diff --git a/lms/templates/search_course/search_course.js b/lms/templates/search_course/search_course.js index 9deba304..9d2580fa 100644 --- a/lms/templates/search_course/search_course.js +++ b/lms/templates/search_course/search_course.js @@ -3,22 +3,22 @@ frappe.ready(() => { search_course(e); }); - $(".close-search-empty-state").click((e) => { - close_search_empty_state(e); + $("#open-search").click((e) => { + show_search_bar(e); + }); + + $("#search-modal").on("hidden.bs.modal", () => { + hide_search_bar(); }); }); const search_course = (e) => { let input = $(e.currentTarget).val(); - if (input == window.input) return; - window.input = input; if (input.length < 3 || input.trim() == "") { - $(".course-card").removeClass("hide"); - $(".search-empty-state").addClass("hide"); - fix_heading_styles(); + $(".result-row").remove(); return; } @@ -28,47 +28,39 @@ const search_course = (e) => { text: input, }, callback: (data) => { - render_course_list(data.message); + render_course_list(data); }, }); }; -const render_course_list = (courses) => { - fix_heading_styles(); - $(".search-empty-state").addClass("hide"); +const render_course_list = (data) => { + let courses = data.message; + $(".result-row").remove(); if (!courses.length) { - $(".course-card").removeClass("hide"); - $(".search-empty-state").removeClass("hide"); + let element = ` + ${__("No result found")} + `; + $(element).insertAfter("#search-course"); return; } - $(".course-card").addClass("hide"); - for (course in courses) { - $("[data-course=" + courses[course].name + "]").removeClass("hide"); - } - - const visible_live_courses = $(".live-courses .course-card").not(".hide"); - const visible_upcoming_courses = $(".upcoming-courses .course-card").not( - ".hide" - ); - - if (!visible_live_courses.length) { - $(".live-courses .course-home-headings").addClass("hide"); - $(".upcoming-courses").removeClass("mt-10"); - } - - if (!visible_upcoming_courses.length) { - $(".upcoming-courses .course-home-headings").addClass("hide"); + for (let i in courses) { + let element = ` + ${courses[i].title} + `; + $(element).insertAfter("#search-course"); } }; -const fix_heading_styles = () => { - $(".course-home-headings").removeClass("hide"); - $(".upcoming-courses").addClass("mt-10"); +const show_search_bar = (e) => { + $("#search-modal").modal("show"); + setTimeout(() => { + $("#search-course").focus(); + }, 1000); }; -const close_search_empty_state = (e) => { - $(".search-empty-state").addClass("hide"); +const hide_search_bar = (e) => { $("#search-course").val(""); + $(".result-row").remove(); }; diff --git a/lms/www/courses/index.html b/lms/www/courses/index.html index 1d618468..52aaeece 100644 --- a/lms/www/courses/index.html +++ b/lms/www/courses/index.html @@ -22,7 +22,7 @@ {% else %} - + {% include "lms/templates/search_course/search_course.html" %}
{% if frappe.session.user != "Guest" %} @@ -36,6 +36,10 @@ {{ _("Create a Course") }} {% endif %} + + + {{ _("Search") }} +