From 6f5302043d2c978cbb1aae20ff99b4447d6fb54c Mon Sep 17 00:00:00 2001
From: mid <>
Date: Mon, 5 Aug 2024 21:56:13 +0300
Subject: [PATCH] Improve index search form

---
 index.html.l | 48 ++++++++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/index.html.l b/index.html.l
index ae94661..e6284f0 100644
--- a/index.html.l
+++ b/index.html.l
@@ -2,32 +2,38 @@
 
 {% function content() %}
 <div style="text-align:center;height:50%;margin-top:25vh;">
-	<div style="max-width:15cm;display:inline-block;">
+	<div style="width:12cm;display:inline-block;">
 		<h1>{{ Escapes.htmlescape(BigGlobe.cfg.sitename) }}</h1>
 		<form action="/search" method="GET" id="searchform">
 			<input type="text" name="n" placeholder="Filter by name..." style="position:relative;width:100%;" />
 			
-			{% if BigGlobe.cfg.enable18plus then %}
-				<ul class="over18">
-					<li>
-						<input type="radio" name="a" value="-1" id="o18h" onchange="upd(-1)" checked />
-						<label for="o18h">Hide 18+</label>
-					</li><li>
-						<input type="radio" name="a" value="0" id="o18s" onchange="upd(0)" />
-						<label for="o18s">Show 18+</label>
-					</li><li>
-						<input type="radio" name="a" value="1" id="o18o" onchange="upd(1)" />
-						<label for="o18o">Only 18+</label>
-					</li>
-				</ul>
-			{% end %}
-			
 			<input type="hidden" id="tparam" name="t" value="" />
-			<div data-formid="searchform" data-formparaminputid="tparam" style="position:relative;width:100%;margin-top:1em;" class="tagbox">
-				<p>Filter by tags...</p>
-				<span style="position:relative;min-width:4px;left:0;" contenteditable></span>
+			
+			<div style="position: relative;">
+				<div data-formid="searchform" data-formparaminputid="tparam" style="position:relative;width:58%;margin-top:1em;display:inline-block;vertical-align:top;white-space:nowrap;overflow-x:scroll;" class="tagbox">
+					<p>Filter by tags...</p>
+					
+					<!-- Firefox has a 10-year old bug where a contenteditable with 0 padding loses focus when you press the right arrow key to the end -->
+					<span style="position:relative;min-width:4px;left:0;padding-right:1px;" contenteditable autofocus></span>
+				</div>
+				
+				{% if BigGlobe.cfg.enable18plus then %}
+					<ul class="over18" style="width:40%;display:inline-block;vertical-align:middle;">
+						<li>
+							<input type="radio" name="a" value="-1" id="o18h" onchange="upd(-1)" checked />
+							<label for="o18h">&#x1F6C7;</label>
+						</li><li>
+							<input type="radio" name="a" value="0" id="o18s" onchange="upd(0)" />
+							<label for="o18s">18+?</label>
+						</li><li>
+							<input type="radio" name="a" value="1" id="o18o" onchange="upd(1)" />
+							<label for="o18o">&check;</label>
+						</li>
+					</ul>
+				{% end %}
+
+				<div class="autocomplete" style="visibility:hidden;width:100%;position:absolute;top:70%;box-sizing:border-box;"></div>
 			</div>
-			<div class="autocomplete" style="visibility:hidden;width:100%;"></div>
 			
 			<input type="submit" value="Search" style="margin-top:1em;" />
 			
@@ -77,6 +83,8 @@
 		
 		showalltags = function() {}
 	}
+	
+	document.querySelector("[autofocus]").focus()
 </script>
 
 {% end %}