fix: search ux

lms/lms/doctype/lms_course/lms_course.py

@@ -176,7 +176,7 @@ def search_course(text):
 			"short_introduction": ["like", f"%{text}%"],
 			"description": ["like", f"%{text}%"],
 		},
-		fields=["name", "title", "image"],
+		fields=["name", "title"],
 	)
 	return courses
 

lms/public/css/style.css

@@ -929,13 +929,16 @@ pre {
 }
 
 .search {
+	background-image: url(/assets/frappe/icons/timeless/search.svg);
+	background-repeat: no-repeat;
+	background-position: 1rem;
+	text-indent: 1rem;
 	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);
+    border-radius: var(--border-radius-md);
+    font-size: var(--text-base);
+    padding: 1.5rem;
+    height: 36px;
+    width: 100%;
 }
 
 .search:focus {
@@ -1934,7 +1937,9 @@ select {
 
 .modal-inner {
 	background: #ffffff;
-	margin: 15% auto 2rem;
+    margin: 15% auto 2rem;
+    width: 70%;
+    border-radius: var(--border-radius-md);
 }
 
 
@@ -1951,3 +1956,28 @@ select {
 	text-decoration: none;
 	cursor: pointer;
 }
+
+.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;
+}

lms/templates/search_course/search_course.html

@@ -2,22 +2,13 @@
 {% set portal_course_creation = frappe.db.get_single_value("LMS Settings", "portal_course_creation") %}
 
 
-
-<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>
-        <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
-    </div>
-    <div class="empty-state-text">
-        <div class="empty-state-heading">{{ _("No results found") }}</div>
-        <div class="course-meta">{{ _("Try some other keyword or explore our list of courses.") }}</div>
+<div class="modal fade search-modal" id="search-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-body">
+                <input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search for courses' }}">
+            </div>
+        </div>
     </div>
 </div>
-
 <script> {% include "lms/templates/search_course/search_course.js" %} </script>

lms/templates/search_course/search_course.js

@@ -8,25 +8,22 @@ frappe.ready(() => {
 	});
 
 	$("#open-search").click((e) => {
-		show_search_bar();
+		show_search_bar(e);
 	});
 
-	$("#search-course").focusout((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;
 	}
 
@@ -36,51 +33,30 @@ const search_course = (e) => {
 			text: input,
 		},
 		callback: (data) => {
-			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);
-			}
+			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");
+	if (! courses.length) {
+		let element = `<a class="result-row">
+			${__("No result found")}
+		</a>`;
+		$(element).insertAfter("#search-course");
 		return;
 	}
 
-	$(".course-card").addClass("hide");
-	for (course in courses) {
-		$("[data-course=" + courses[course].name + "]").removeClass("hide");
+
+	for (let i in courses) {
+		let element = `<a class="result-row" href="/courses/${courses[i].name}">
+			${courses[i].title}
+		</a>`;
+		$(element).insertAfter("#search-course");
 	}
-
-	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");
-	}
-};
-
-const fix_heading_styles = () => {
-	$(".course-home-headings").removeClass("hide");
-	$(".upcoming-courses").addClass("mt-10");
 };
 
 const close_search_empty_state = (e) => {
@@ -88,13 +64,14 @@ const close_search_empty_state = (e) => {
 	$("#search-course").val("");
 };
 
-const show_search_bar = () => {
-	$("#open-search").addClass("hide");
-	$("#search-modal").css("display", "block");
-	$("#search-course").focus();
-};
+const show_search_bar = (e) => {
+	$("#search-modal").modal("show");
+	setTimeout(() => {
+		$("#search-course").focus();
+	}, 1000)
+}
 
-const hide_search_bar = () => {
-	$("#open-search").removeClass("hide");
-	$("#search-modal").css("display", "none");
-};
+const hide_search_bar = (e) => {
+	$("#search-course").val("");
+	$(".result-row").remove();
+}