feat: new search ui

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
 
 

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":

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;
+}

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") %}
 
-<input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search' }}">
+
+
+<div id="search-modal" class="modal-container">
+	<div class="modal-inner">
+		<input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search for courses' }}">
+	</div>
+</div>
+
 <div class="empty-state alert alert-dismissible search-empty-state hide">
     <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
     <div>

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 = `<div class="result-row">
+					${courses[i].title}
+				</div>`;
+				$("#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");
+};

lms/www/base.html

@@ -0,0 +1,6 @@
+{% extends "templates/base.html" %}
+
+{% block content %}
+<div>Janant</div>
+<h1>Reder</h1>
+{% endblock %}

lms/www/courses/index.html

@@ -22,7 +22,7 @@
 
         {% else %}
 
-            <!-- {% include "lms/templates/search_course/search_course.html" %} -->
+            {% include "lms/templates/search_course/search_course.html" %}
 
 			<div class="course-list-cta">
                 {% if frappe.session.user != "Guest" %}
@@ -36,6 +36,10 @@
                     {{ _("Create a Course") }}
                 </a>
                 {% endif %}
+
+				<a class="btn btn-default btn-sm ml-2" id="open-search">
+					{{ _("Search") }}
+				</a>
             </div>
 
             <div class="course-home-headings">