eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: search empty state improvements

Browse Source
This commit is contained in:
Jannat Patel
2021-11-22 10:05:04 +05:30
parent 08ea7401cc
commit 3f0309c36a
3 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
school/public/css/style.css
View File

@@ -1376,7 +1376,7 @@ pre {
} }
.search-course { .search-course {
background-image: url(/assets/frappe/icons/timeless/search.svg); background-image: url(/assets/frappe/icons/timeless/search.svg);
border: 1px solid #C8CFD5; border: 1px solid #C8CFD5;
box-sizing: border-box; box-sizing: border-box;
border-radius: 6px; border-radius: 6px;
@@ -1384,8 +1384,8 @@ pre {
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
height: 36px; height: 36px;
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: 1.5rem; text-indent: 1.5rem;
background-position: 1rem 0.65rem; background-position: 1rem 0.65rem;
} }
.section-heading { .section-heading {
@@ -1461,3 +1461,22 @@ pre {
top: 4rem; top: 4rem;
margin-bottom: 5rem; margin-bottom: 5rem;
} }
.close-search-empty-state {
position: absolute;
top: 0;
right: 0;
padding: 0.75rem 1.25rem;
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
.close-search-empty-state:hover {
text-decoration: none;
color: #000;
}

2
school/templates/search_course/search_course.html
View File

@@ -1,7 +1,7 @@
<input class="search-course w-25 float-right" placeholder="{{ _("Try `Manufacturing` or `Accounting`") }}"> <input class="search-course w-25 float-right" placeholder="{{ _("Try `Manufacturing` or `Accounting`") }}">
<div id="" class="alert alert-dismissible empty-state search-empty-state hide"> <div id="" class="alert alert-dismissible empty-state search-empty-state hide">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
<img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg"> <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
<div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("No results found") }} </div> <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("No results found") }} </div>
<div class="small mb-6"> {{ _("Try some other keyword or explore our list of courses.") }} </div> <div class="small mb-6"> {{ _("Try some other keyword or explore our list of courses.") }} </div>

10
school/templates/search_course/search_course.js
View File

@@ -2,6 +2,11 @@ frappe.ready(() => {
$(".search-course").keyup((e) => { $(".search-course").keyup((e) => {
search_course(e); search_course(e);
}); });
$(".close-search-empty-state").click((e) => {
close_search_empty_state(e);
});
}); });
const search_course = (e) => { const search_course = (e) => {
@@ -62,3 +67,8 @@ const fix_heading_styles = () => {
$(".course-home-headings").removeClass("hide"); $(".course-home-headings").removeClass("hide");
$(".upcoming-courses").addClass("mt-10"); $(".upcoming-courses").addClass("mt-10");
} }
const close_search_empty_state = (e) => {
$(".search-empty-state").addClass("hide");
$(".search-course").val("");
}