From 88d16db94bb905e8a4faff010612d0c6cc250ff2 Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Tue, 16 Aug 2022 18:14:10 +0200
Subject: [PATCH] reorder search UI to be more intuitive

---
 files/templates/search.html | 99 +++++++++++++++++++------------------
 1 file changed, 51 insertions(+), 48 deletions(-)

diff --git a/files/templates/search.html b/files/templates/search.html
index 5ba32f7b5..22a052868 100644
--- a/files/templates/search.html
+++ b/files/templates/search.html
@@ -6,10 +6,8 @@
 <title>Search for "{{query}}" - {{SITE_NAME}}"</title> <meta name="description" content="{{total}} result{{'s' if total != 1 else ''}}">
 {% endblock %}
 
-{% block PseudoSubmitForm %}{% endblock %}
-
-{% block navbar %}
-	<form class="form-inline search flex-nowrap mx-0 mx-lg-auto" action="/search/{% if '/posts' in request.path %}posts{% elif '/comments' in request.path %}comments{% else %}users{% endif %}" method="get" style="padding-top:42px">
+{% 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">
 		<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;">
@@ -17,50 +15,9 @@
 			</span>
 		</span>
 	</form>
-	{% if not '/users' in request.path %}
-		<div class="mt-5 d-flex align-items-center">
-			<div class="dropdown dropdown-actions">
-				<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					{% if t=="hour" %}<i class="fas fa-clock mr-1"></i>
-					{% elif t=="day" %}<i class="fas fa-calendar-day mr-1"></i>
-					{% elif t=="week" %}<i class="fas fa-calendar-week mr-1"></i>
-					{% elif t=="month" %}<i class="fas fa-calendar-alt mr-1"></i>
-					{% elif t=="year" %}<i class="fas fa-calendar mr-1"></i>
-					{% elif t=="all" %}<i class="fas fa-infinity mr-1"></i>
-					{% endif %}
-				{{t | capitalize}}
-				</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);">
-					{% if t != "hour" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=hour"><i class="fas fa-clock mr-2"></i>Hour</a>{% endif %}
-					{% if t != "day" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=day"><i class="fas fa-calendar-day mr-2"></i>Day</a>{% endif %}
-					{% if t != "week" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=week"><i class="fas fa-calendar-week mr-2"></i>Week</a>{% endif %}
-					{% if t != "month" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=month"><i class="fas fa-calendar-alt mr-2"></i>Month</a>{% endif %}
-					{% if t != "year" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=year"><i class="fas fa-calendar mr-2"></i>Year</a>{% endif %}
-					{% if t != "all" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=all"><i class="fas fa-infinity mr-2"></i>All</a>{% endif %}
-				</div>
-			</div>
+{% endblock %}
 
-			<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">
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-					{% if sort != "comments" and "/posts" in request.path %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
-				</div>
-			</div>
-		</div>
-	{% endif %}
+{% block navbar %}
 {% endblock %}
 
 {% block content %}
@@ -77,7 +34,7 @@
 					<li class="list-inline-item"><i class="fas fa-link text-gray-400"></i></li>
 				</ul>
 			</div>
-			<div class="card-body">
+			<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>
@@ -97,6 +54,52 @@
 					<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>
 
+					{% if not '/users' in request.path %}
+						<div class="mt-3 d-flex align-items-center" style="float:right">
+							<div class="dropdown dropdown-actions">
+								<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+									{% if t=="hour" %}<i class="fas fa-clock mr-1"></i>
+									{% elif t=="day" %}<i class="fas fa-calendar-day mr-1"></i>
+									{% elif t=="week" %}<i class="fas fa-calendar-week mr-1"></i>
+									{% elif t=="month" %}<i class="fas fa-calendar-alt mr-1"></i>
+									{% elif t=="year" %}<i class="fas fa-calendar mr-1"></i>
+									{% elif t=="all" %}<i class="fas fa-infinity mr-1"></i>
+									{% endif %}
+								{{t | capitalize}}
+								</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);">
+									{% if t != "hour" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=hour"><i class="fas fa-clock mr-2"></i>Hour</a>{% endif %}
+									{% if t != "day" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=day"><i class="fas fa-calendar-day mr-2"></i>Day</a>{% endif %}
+									{% if t != "week" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=week"><i class="fas fa-calendar-week mr-2"></i>Week</a>{% endif %}
+									{% if t != "month" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=month"><i class="fas fa-calendar-alt mr-2"></i>Month</a>{% endif %}
+									{% if t != "year" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=year"><i class="fas fa-calendar mr-2"></i>Year</a>{% endif %}
+									{% if t != "all" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort={{sort}}&t=all"><i class="fas fa-infinity mr-2"></i>All</a>{% endif %}
+								</div>
+							</div>
+
+							<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">
+									{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
+									{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
+									{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
+									{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
+									{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
+									{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
+									{{sort | capitalize}}
+								</button>
+								<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
+									{% if sort != "top" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
+									{% if sort != "bottom" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
+									{% if sort != "new" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
+									{% if sort != "old" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
+									{% if sort != "controversial" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
+									{% if sort != "comments" and "/posts" in request.path %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
+								</div>
+							</div>
+						</div>
+					{% endif %}
+
+
 				</div>
 			</div>
 		</div>