From 52d0ab537f32b34b726790b3d79b770386a0b7fe Mon Sep 17 00:00:00 2001
From: booosy <robertomarlero@gmail.com>
Date: Wed, 24 Aug 2022 00:57:33 -0700
Subject: [PATCH] add search help dropdown

---
 files/assets/css/main.css   | 13 +++++++-
 files/assets/js/search.js   |  8 +++++
 files/templates/search.html | 66 +++++++++++++++++++++++++++----------
 3 files changed, 68 insertions(+), 19 deletions(-)
 create mode 100644 files/assets/js/search.js

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index f1b0ca277..a299089c4 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -3637,7 +3637,7 @@ small, .small {
 	color: var(--muted);
 	font-weight: 600;
 	font-size: 12px;
-	z-index: 3;
+	z-index: 100;
 }
 .dropdown-actions .fa, .dropdown-actions .fas, .dropdown-actions .far {
 	font-size: 12px;
@@ -6239,4 +6239,15 @@ div.custom-control:last-of-type {
 	div.custom-control:last-of-type {
 		margin-bottom: 7px;
 	}
+}
+
+.dropdown-menu button.searchparam {
+	color: var(--gray-100);
+	text-decoration: none;
+	text-transform: none;
+	background-color: transparent;
+	border: 2px solid gray;
+	border-radius: 3px;
+	padding: 6px;
+	width: 150px;
 }
\ No newline at end of file
diff --git a/files/assets/js/search.js b/files/assets/js/search.js
new file mode 100644
index 000000000..3f70b202d
--- /dev/null
+++ b/files/assets/js/search.js
@@ -0,0 +1,8 @@
+function addParam(e) {
+  e = e || window.event;
+  let paramExample = e.target.innerText;
+  let param = paramExample.split(":")[0];
+  let searchInput = document.querySelector("#large_searchbar input");
+  searchInput.value = `${searchInput.value} ${param}:`;
+  searchInput.focus();
+}
\ No newline at end of file
diff --git a/files/templates/search.html b/files/templates/search.html
index 1cbf1320c..3fd7a9b43 100644
--- a/files/templates/search.html
+++ b/files/templates/search.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block PseudoSubmitForm %}
-	<form class="form-inline search flex-nowrap mx-0 mx-lg-auto mt-1" action="/search/{% if '/posts' in request.path %}posts{% elif '/comments' in request.path %}comments{% else %}users{% endif %}" method="get">
+	<form id="large_searchbar" class="form-inline search flex-nowrap mx-0 mx-lg-auto mt-1" action="/search/{% if '/posts' in request.path %}posts{% elif '/comments' in request.path %}comments{% else %}users{% endif %}" method="get">
 		<input autocomplete="off" class="form-control w-100" type="search" placeholder="Search" aria-label="Search" name="q" value="{{query}}">
 		<span class="input-group-append">
 			<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem;">
@@ -37,23 +37,53 @@
 			<div class="card-body pb-2">
 				<div class="pl-md-3">
 					{% if not request.path.startswith('/search/users') %}
-						<strong>Advanced search parameters (with examples)</strong>
-						<ul class="mt-2">
-							<li class="mb-1">author:quadnarca</li>
-							<li class="mb-1">domain:reddit.com</li>
-							<li class="mb-1">over18:true</li>
-							<li class="mb-1">{{HOLE_NAME}}:music</li>
-							<li class="mb-1">before:2022-12-30</li>
-							<li class="mb-1">after:2022-12-30</li>
-							{% if request.path.startswith('/search/comments') %}
-								<li class="mb-1">post:504</li>
-							{% endif %}
-							{% if request.path.startswith('/search/posts') %}
-								<li class="mb-1">title:true</li> 
-							{% endif %}
-							<li class="mb-1">exact:true</li>
-						</ul>
+						<div class="dropdown dropdown-actions">
+							<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><strong>Advanced search parameters (with examples)</strong></button>
+							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">Author:</div>
+									<button onClick="addParam()" class="searchparam mb-1">author:quadnarca</button>
+								</div>
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">Domain:</div>
+									<button onClick="addParam()" class="searchparam mb-1">domain:reddit.com</button>
+								</div>
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">NSFW:</div>
+									<button onClick="addParam()" class="searchparam mb-1">over18:true</button>
+								</div>
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">Hole:</div>
+									<button onClick="addParam()" class="searchparam mb-1">{{HOLE_NAME}}:music</button>
+								</div>
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">Before Date:</div>
+									<button onClick="addParam()" class="searchparam mb-1">before:2022-12-30</button>
+								</div>
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">After Date:</div>
+									<button onClick="addParam()" class="searchparam mb-1">after:2022-12-30</button>
+								</div>
+								{% if request.path.startswith('/search/comments') %}
+									<div>
+										<div style="display: inline-block; width: 150px; text-align: center;">Post ID:</div>
+										<button onClick="addParam()" class="searchparam mb-1">post:504</button>
+									</div>
+								{% endif %}
+								{% if request.path.startswith('/search/posts') %}
+									<div>
+										<div style="display: inline-block; width: 150px; text-align: center;">Post Title Only:</div>
+										<button onClick="addParam()" class="searchparam mb-1">title:true</button> 
+									</div>
+								{% endif %}
+								<div>
+									<div style="display: inline-block; width: 150px; text-align: center;">Exact Match Only:</div>
+									<button onClick="addParam()" class="searchparam mb-1">exact:true</button>
+								</div>
+							</div>
+						</div>
 						<br>
+						<script src="/assets/js/search.js"></script>
 					{% endif %}
 					<div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div>
 					<h1 class="h4 mb-0">{{query}}</h1>
@@ -190,4 +220,4 @@
 			</ul>
 		</nav>
 
-	{% endblock %}
+	{% endblock %}
\ No newline at end of file