Fix the search box

Fix #277 : autoselect search field
Fix #1107: no spell checking/auto-correct on search field

assets/css/default.css

@@ -192,22 +192,26 @@ img.thumbnail {
   display: inline;
 }
 
-.searchbar .pure-form input[type="search"] {
-  margin-bottom: 1px;
+.searchbar .pure-form fieldset { padding: 0; }
 
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 1px solid #ccc;
+.searchbar input[type="search"] {
+	width: 100%;
+	margin: 1px;
+
+	border: 1px solid;
+	border-color: #0000 #0000 #CCC #0000;
 	border-radius: 0;
 
-  padding: initial 0;
-
 	box-shadow: none;
-
 	-webkit-appearance: none;
 }
 
+.searchbar input[type="search"]:focus {
+	margin: 0 0 0.5px 0;
+	border: 2px solid;
+	border-color: #0000 #0000 #FED #0000;
+}
+
 /* https://stackoverflow.com/a/55170420 */
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
@@ -217,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
-.searchbar .pure-form fieldset {
-  padding: 0;
-}
-
-/* attract focus to the searchbar by adding a subtle transition */
-.searchbar .pure-form input[type="search"]:focus {
-  margin-bottom: 0px;
-  border-bottom: 2px solid #aaa;
-}
-
 .user-field {
   display: flex;
   flex-direction: row;

src/invidious/views/components/search_box.ecr

@@ -0,0 +1,9 @@
+<form class="pure-form" action="/search" method="get">
+	<fieldset>
+		<input type="search" id="searchbox" autocomplete="off" autocorrect="off"
+		autocapitalize="none" spellcheck="false" autofocus name="q"
+		placeholder="<%= translate(locale, "search") %>"
+		title="<%= translate(locale, "search") %>"
+		value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+	</fieldset>
+</form>

src/invidious/views/search_homepage.ecr

@@ -14,11 +14,7 @@
     </div>
     <div class="pure-u-1-4"></div>
     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-        <form class="pure-form" action="/search" method="get">
-            <fieldset>
-                <input autofocus type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-            </fieldset>
-        </form>
+        <%= rendered "components/search_box" %>
     </div>
     <div class="pure-u-1-4"></div>
 </div>

src/invidious/views/template.ecr

@@ -35,11 +35,7 @@
                         <a href="/" class="index-link pure-menu-heading">Invidious</a>
                     </div>
                     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                        <form class="pure-form" action="/search" method="get">
-                            <fieldset>
-                                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-                            </fieldset>
-                        </form>
+                        <%= rendered "components/search_box" %>
                     </div>
                 <% end %>