feat(ui): update search bar and bg color

frappe · Aug 29, 2023 · 338374a · 338374a
1 parent 8ab5a53
commit 338374a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/hrms/www/jobs/index.css b/hrms/www/jobs/index.css
@@ -1,3 +1,7 @@
+body {
+	background-color: var(--gray-50);
+}
+
 h3 {
 	font-size: 1.7rem;
 }
@@ -24,17 +28,17 @@ p {
 .full-time-badge {
 	background: var(--bg-green);
 	color: var(--text-on-green);
-	border-radius: var(--border-radius)
+	border-radius: var(--border-radius);
 }
 
 .part-time-badge {
 	background: var(--bg-orange);
 	color: var(--text-on-orange);
-	border-radius: var(--border-radius)
+	border-radius: var(--border-radius);
 }
 
 .other-badge {
 	background: var(--bg-blue);
 	color: var(--text-on-blue);
-	border-radius: var(--border-radius)
+	border-radius: var(--border-radius);
 }
diff --git a/hrms/www/jobs/index.html b/hrms/www/jobs/index.html
@@ -1,13 +1,16 @@
 {% extends "templates/web.html" %}
+{% block title %}
+    {{ _("Job Openings") }}
+{% endblock title %}
 {% block header %}
     <h3 class="mt-0 mb-10">{{ _("Job Openings") }}</h3>
 {% endblock header %}
 {% block page_content %}
     <div class="row">
         <div class="col-3 md-text">
             <div class="mb-10 flex align-items-center">
-                <p class="lg-text font-weight-bold">Filters</p>
-                <a class="ml-auto sm-text" href="/jobs">{{ _("Clear All") }}</a>
+                <p class="lg-text font-weight-bold">{{ _("Filters") }}</p>
+                <a id="clear-filters" class="ml-auto sm-text" role="button">{{ _("Clear All") }}</a>
             </div>
             {% for name, values in filters.items() %}
                 <div class="mb-10">
@@ -27,23 +30,31 @@ <h3 class="mt-0 mb-10">{{ _("Job Openings") }}</h3>
             {% endfor %}
         </div>
         <div class="col-9">
-            <div class="mb-12">
-                <div class="input-group mb-2">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text" id="basic-addon1">
-                            <svg class="icon icon-md ml-0 mr-1">
-                                <use href="#icon-search"></use>
-                            </svg>
-                        </span>
-                    </div>
-                    <input type="text"
-                           class="form-control"
-                           placeholder="Search for Jobs"
-                           aria-label="Username"
-                           aria-describedby="basic-addon1">
+            <div class="mb-12 col-8 pl-0">
+                <input type="search"
+                       name="query"
+                       id="search-box"
+                       class="form-control border font-md"
+                       placeholder="Search for Jobs"
+                       aria-label="Jobs Search"
+                       style="height: 36px">
+                <div class="search-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         width="16"
+                         height="16"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         stroke="currentColor"
+                         stroke-width="2"
+                         stroke-linecap="round"
+                         stroke-linejoin="round"
+                         class="feather feather-search">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
                 </div>
             </div>
-            <p class="text-secondary font-weight-bold mb-4">Showing {{ job_openings|length }} results</p>
+            <p class="text-secondary mb-4 md-text">Showing {{ job_openings|length }} results</p>
             {% for jo in job_openings %}
                 <div class="mb-8 card border p-6">
                     <div class="flex">

diff --git a/hrms/www/jobs/index.js b/hrms/www/jobs/index.js
@@ -4,6 +4,9 @@ $(() => {
 		const filters = $("input:checked").serialize();
 		scroll_up_and_update_filters(filters);
 	});
+	$("#clear-filters").on("click", function () {
+		scroll_up_and_update_filters();
+	});
 });
 
 function select_applied_filters() {
@@ -18,7 +21,7 @@ function select_applied_filters() {
 	}
 }
 
-function scroll_up_and_update_filters(filters) {
+function scroll_up_and_update_filters(filters="") {
 	if (window.scrollY === 0) {
 		window.location.href = "/jobs?" + filters;
 	} else {