From e9d1f9d68f5ec685269c27bee27833dbb3c851ce Mon Sep 17 00:00:00 2001
From: envoyr <hello@envoyr.com>
Date: Sun, 10 Apr 2022 13:41:07 +0200
Subject: [PATCH] update search

---
 templates/Froxlor/src/js/components/search.js |  2 +-
 .../Froxlor/src/scss/components/_search.scss  | 32 +++++++++++++++++++
 templates/Froxlor/src/scss/main.scss          |  1 +
 templates/Froxlor/userarea.html.twig          | 11 ++++---
 4 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 templates/Froxlor/src/scss/components/_search.scss

diff --git a/templates/Froxlor/src/js/components/search.js b/templates/Froxlor/src/js/components/search.js
index d328cb57..40dd2c06 100644
--- a/templates/Froxlor/src/js/components/search.js
+++ b/templates/Froxlor/src/js/components/search.js
@@ -7,7 +7,7 @@ $(document).ready(function () {
 
 	search.find('input').on('keyup', function () {
 		let query = $(this).val();
-		let dropdown = $('#search-dropdown');
+		let dropdown = $('#search .search-results');
 		// Hide search if query is empty
 		if (!query.length) {
 			dropdown.hide().html('');
diff --git a/templates/Froxlor/src/scss/components/_search.scss b/templates/Froxlor/src/scss/components/_search.scss
new file mode 100644
index 00000000..c3fb1e66
--- /dev/null
+++ b/templates/Froxlor/src/scss/components/_search.scss
@@ -0,0 +1,32 @@
+#search {
+	display: flex;
+	position: relative;
+
+	i {
+		margin-right: .5rem;
+	}
+
+	.search-input {
+		outline: none;
+		border: none;
+	}
+
+	.search-results-box {
+		position: absolute;
+		top: 2.75rem;
+		z-index: 50;
+		width: 70vh;
+		max-height: 50vh;
+
+		background: #fff;
+		border: $border-color solid 1px;
+		border-radius: 0 0 $border-radius $border-radius;
+
+		.search-results {
+			width: 70vh; /** same as .search-results-box **/
+			max-height: calc(50vh - 2px); /** same as .search-results-box - border (top/bottom) **/
+			overflow: auto;
+			border-radius: $border-radius;
+		}
+	}
+}
diff --git a/templates/Froxlor/src/scss/main.scss b/templates/Froxlor/src/scss/main.scss
index 27c97f93..b8b1c648 100644
--- a/templates/Froxlor/src/scss/main.scss
+++ b/templates/Froxlor/src/scss/main.scss
@@ -12,3 +12,4 @@
 @import "components/form";
 @import "components/navbar";
 @import "components/sidebar";
+@import "components/search";
diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig
index 20bbc037..cda1945c 100644
--- a/templates/Froxlor/userarea.html.twig
+++ b/templates/Froxlor/userarea.html.twig
@@ -31,11 +31,14 @@
 				</button>
 			</div>
 			<div class="collapse navbar-collapse px-3 px-lg-5" id="navbar">
-				<form id="search" class="d-flex position-relative" method="post">
-					<div class="input-group">
-						<input title="search" type="search" class="form-control-plaintext" placeholder="Search for ..." style="outline: none">
+				<form id="search" method="post">
+					<div class="d-flex align-items-center">
+						<i class="fa fa-search text-muted"></i>
+						<input title="search" type="search" class="search-input" placeholder="Search for ...">
+					</div>
+					<div class="search-results-box">
+						<div class="search-results list-group-flush" style="display: none"></div>
 					</div>
-					<ul id="search-dropdown" class="bg-white border list-group list-group-flush position-absolute" style="top: 2.5rem; display:none; z-index: 50; max-height: 300px; overflow-y: scroll"></ul>
 				</form>
 				<ul class="navbar-nav ms-auto">
 					{% if call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is not empty and call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is iterable %}