From 0f314bc4e35fc7d56b39c1946df967ca4e38104d Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Thu, 22 Dec 2022 15:47:03 +0530 Subject: [PATCH] feat: new search ui --- lms/lms/doctype/lms_course/lms_course.py | 12 +--- lms/lms/md.py | 2 +- lms/public/css/style.css | 55 +++++++++++++++---- .../search_course/search_course.html | 9 ++- lms/templates/search_course/search_course.js | 28 +++++++++- lms/www/base.html | 6 ++ lms/www/courses/index.html | 6 +- 7 files changed, 92 insertions(+), 26 deletions(-) create mode 100644 lms/www/base.html diff --git a/lms/lms/doctype/lms_course/lms_course.py b/lms/lms/doctype/lms_course/lms_course.py index a420dec3..6299bced 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", "image"], ) - - """ 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/lms/md.py b/lms/lms/md.py index 1a6b9ed7..e7830722 100644 --- a/lms/lms/md.py +++ b/lms/lms/md.py @@ -114,7 +114,7 @@ def sanitize_html(html, macro): any broken tags. This makes sures that all those things are fixed before passing to the etree parser. """ - soup = BeautifulSoup(html, features="lxml") + soup = BeautifulSoup(html, features="html5lib") nodes = soup.body.children classname = "" if macro == "YouTubeVideo": diff --git a/lms/public/css/style.css b/lms/public/css/style.css index 1f9ea4ac..e5b219be 100644 --- a/lms/public/css/style.css +++ b/lms/public/css/style.css @@ -929,17 +929,17 @@ 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); + border: none; + border-radius: var(--border-radius-md); + font-size: var(--text-base); + padding: 0.625rem 0.75rem; + height: 36px; + width: 80%; + box-shadow: var(--shadow-base); +} + +.search:focus { + outline: none; } .course-search-header { @@ -1918,3 +1918,36 @@ select { cursor: pointer; margin-right: 1rem; } + +.modal-container { + display: none; + position: fixed; + z-index: 10; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); +} + +.modal-inner { + background: #ffffff; + margin: 15% auto 2rem; +} + + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/lms/templates/search_course/search_course.html b/lms/templates/search_course/search_course.html index 3de74cb2..2cc370a3 100644 --- a/lms/templates/search_course/search_course.html +++ b/lms/templates/search_course/search_course.html @@ -1,7 +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") %} - + + + +
×
diff --git a/lms/templates/search_course/search_course.js b/lms/templates/search_course/search_course.js index 9deba304..4f199165 100644 --- a/lms/templates/search_course/search_course.js +++ b/lms/templates/search_course/search_course.js @@ -6,6 +6,14 @@ frappe.ready(() => { $(".close-search-empty-state").click((e) => { close_search_empty_state(e); }); + + $("#open-search").click((e) => { + show_search_bar(); + }); + + $("#search-course").focusout((e) => { + hide_search_bar(); + }); }); const search_course = (e) => { @@ -28,7 +36,14 @@ const search_course = (e) => { text: input, }, callback: (data) => { - render_course_list(data.message); + let courses = data.message; + $(".result-row").remove(); + for (let i in courses) { + let element = `
+ ${courses[i].title} +
`; + $("#search-result").append(element); + } }, }); }; @@ -72,3 +87,14 @@ const close_search_empty_state = (e) => { $(".search-empty-state").addClass("hide"); $("#search-course").val(""); }; + +const show_search_bar = () => { + $("#open-search").addClass("hide"); + $("#search-modal").css("display", "block"); + $("#search-course").focus(); +}; + +const hide_search_bar = () => { + $("#open-search").removeClass("hide"); + $("#search-modal").css("display", "none"); +}; diff --git a/lms/www/base.html b/lms/www/base.html new file mode 100644 index 00000000..90ae1167 --- /dev/null +++ b/lms/www/base.html @@ -0,0 +1,6 @@ +{% extends "templates/base.html" %} + +{% block content %} +
Janant
+

Reder

+{% endblock %} 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") }} +