From 4d1fbe3b6264c496fcf1ebe63364e33e7f585bbf Mon Sep 17 00:00:00 2001
From: Yogesh Ojha <yogesh.ojha11@gmail.com>
Date: Sun, 29 Nov 2020 12:15:58 +0530
Subject: [PATCH] Datatables search updated

---
 .../templates/startScan/detail_vuln_scan.html      |  5 ++++-
 static/plugins/table/datatable/datatables.css      |  2 --
 static/plugins/table/datatable/dt-global_style.css | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/startScan/templates/startScan/detail_vuln_scan.html b/startScan/templates/startScan/detail_vuln_scan.html
index 1df6becb..ce0b5c5b 100644
--- a/startScan/templates/startScan/detail_vuln_scan.html
+++ b/startScan/templates/startScan/detail_vuln_scan.html
@@ -82,9 +82,12 @@ $(document).ready(function() {
 			"oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
 			"sInfo": "Showing page _PAGE_ of _PAGES_",
 			"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>',
-			"sSearchPlaceholder": "Search...",
+			"sSearchPlaceholder": "Search Query...",
 			"sLengthMenu": "Results :  _MENU_",
 		},
+		"dom": "<'row'<'col-lg-10 col-md-10 col-xs-12'f><'col-lg-2 col-md-2 col-xs-12'l>>" +
+           "<'row'<'col-sm-12'tr>>" +
+           "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
 		"stripeClasses": [],
 		"lengthMenu": [20, 50, 100, 500, 1000],
 		"pageLength": 20,
diff --git a/static/plugins/table/datatable/datatables.css b/static/plugins/table/datatable/datatables.css
index 738b2b81..2bd5353d 100644
--- a/static/plugins/table/datatable/datatables.css
+++ b/static/plugins/table/datatable/datatables.css
@@ -47,8 +47,6 @@ div.dataTables_wrapper div.dataTables_length select {
   width: 75px;
   display: inline-block; }
 
-div.dataTables_wrapper div.dataTables_filter {
-  text-align: right; }
   div.dataTables_wrapper div.dataTables_filter label {
     font-weight: normal;
     white-space: nowrap;
diff --git a/static/plugins/table/datatable/dt-global_style.css b/static/plugins/table/datatable/dt-global_style.css
index accf365b..2b5af5ed 100644
--- a/static/plugins/table/datatable/dt-global_style.css
+++ b/static/plugins/table/datatable/dt-global_style.css
@@ -123,7 +123,19 @@ div.dataTables_wrapper div.dataTables_filter svg {
   padding: 8px 30px 8px 14px; }
 
 div.dataTables_wrapper div.dataTables_filter input {
-  width: 150px; }
+  width: 100%;
+  float: left;
+  transition: all .2s ease-in-out;
+}
+
+div.dataTables_wrapper div.dataTables_filter input:focus {
+  width: 300%;
+  transform: scale(1);
+}
+
+div.dataTables_wrapper div.dataTables_length {
+  float: right;
+}
 
 .dataTables_wrapper .dataTables_length select.form-control {
   padding: 8px 17px 8px 14px;