From 929dc38c9b6348bd7113247ae52c2eef435ce8ae Mon Sep 17 00:00:00 2001
From: zhetic <>
Date: Sat, 22 May 2021 13:12:38 +0300
Subject: [PATCH] made search_bar into form and fixed styling

---
 about.html         |  7 ++++---
 catalog.html       |  9 +++++----
 css/stylesheet.css | 13 +++++++------
 js/search_bar.js   | 22 ----------------------
 search.html        | 15 +--------------
 title.html         |  7 ++++---
 6 files changed, 21 insertions(+), 52 deletions(-)
 delete mode 100644 js/search_bar.js
diff --git a/about.html b/about.html
index e4a8f60..2f39832 100644
--- a/about.html
+++ b/about.html
@@ -9,8 +9,10 @@
 <body>
     <div id="header">
         <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
-        <input id="search_bar" type="text" placeholder="Search">
-        <button id="search_button" onclick="search_bar()">Search</button>
+ 	<form action="/search.html">
+                <input id="search_bar" type="search" name="title" placeholder="Search">
+                <button id="search_button" type="submit">Search</button>
+        </form>
         <img id="logo" src="img/logo.png"/>
     </div>
 
@@ -19,6 +21,5 @@
         </div>
     </div>
 
-    <script type="text/javacript" src="js/search_bar.js"></script>
 </body>
 </html>
diff --git a/catalog.html b/catalog.html
index 9d78528..cadcd00 100644
--- a/catalog.html
+++ b/catalog.html
@@ -10,9 +10,11 @@
 <body>
     <div id="header">
         <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
-        <input  id="search_bar" type="text" placeholder="Search">
-        <button  id="search_button" onclick="search_bar()">Search</button>
-        <img  id="logo" src="img/logo.png"/>
+	<form action="/search.html">
+		<input id="search_bar" type="search" name="title" placeholder="Search">
+		<button id="search_button" type="submit">Search</button>
+	</form>
+        <img id="logo" src="img/logo.png"/>
     </div>
 
     <div id="content">
@@ -39,7 +41,6 @@
     </div>
 
     <script type="text/javascript" src="js/title_list.js"></script>
-    <script type="text/javascript" src="js/search_bar.js"></script>
     <script>
         document.onreadystatechange = load_titles("https://amangathing.ddns.net/instance");
     </script>
diff --git a/css/stylesheet.css b/css/stylesheet.css
index 965b9c0..a1eccd2 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -50,10 +50,10 @@ a:visited {
 
 #header {
     position: fixed;
-    top: 0%;
-    left: 0%;
     width: 100%;
     height: 5em;
+    top: 0%;
+    left: 0%;
     background-color: var(--medium-grey);
     z-index: 100;
     overflow: hidden;
@@ -61,34 +61,35 @@ a:visited {
 
 #header #home {
     position: relative;
-    top: 30%;
     height: 40%;
+    top: 30%;
     left: 2em;
 }
 
 #header #search_bar {
     position: absolute;
-    transform: translateY(50%);
     background-color: white;
     border: none;
     padding: 1em;
     border-radius: 1em;
-    left: 10em;
     width: 50%;
     height: 50%;
+    top: 30%;
+    left: 10em;
 }
 
 #header #search_button {
     position: absolute;
     height: 50%;
+    top: 30%;
     left: calc(10em + 50% + 1em);
-    transform: translateY(50%);
 }
 
 #header #logo {
     position: absolute;
     height: 180%;
     right: 5%;
+    top: 5%;
 }
 
 #content {
diff --git a/js/search_bar.js b/js/search_bar.js
deleted file mode 100644
index 1b8b2ca..0000000
--- a/js/search_bar.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// -------------------------------------------------------------
-// Search bar function
-// -------------------------------------------------------------
-
-function search_bar() {
-    var query = document.querySelector("#header #search_bar").value;
-    if(query != ""){
-        query = query.toLowerCase().replaceAll(" ", "+");
-        var url = "https://amangathing.ddns.net/search.html?title=" + query;
-        console.log(query);
-        window.location.href = url;
-    }
-}
-
-document.querySelector("#header #search_bar").addEventListener("keydown", function (e) {
-    e = e || window.event;
-    if(e.keyCode == 13){
-        search_bar();
-        e.preventDefault();
-    }
-});
-
diff --git a/search.html b/search.html
index 9fe4544..7f03551 100644
--- a/search.html
+++ b/search.html
@@ -75,7 +75,7 @@
     <script>
         var prefix = "https://amangathing.ddns.net/instance/manga/search?";
 
-        function load_results() {
+        document.onreadystatechange = function () {
             var query = search_full()
             if(query != ""){
                 console.log("on search", query);
@@ -84,19 +84,6 @@
                 document.querySelector("#label").textContent = "Result";
             }
         }
-
-        document.onreadystatechange = function () {
-                    if(document.readyState == "interactive"){
-                        var url = window.location.href;
-                        if(url.includes("?")){
-                            var query = url.split("?")[1];
-                            console.log("on load", query);
-                            load_titles(prefix+query);
-                            document.querySelector("#title_list").style.visibility = "visible";
-                            document.querySelector("#label").textContent = "Result";
-                        }
-                    }
-                };
     </script>
 </body>
 </html>
diff --git a/title.html b/title.html
index 1a6b594..b72d70b 100644
--- a/title.html
+++ b/title.html
@@ -11,8 +11,10 @@
 
     <div id="header">
         <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
-        <input  id="search_bar" type="text" placeholder="Search">
-        <button  id="search_button" onclick="search_bar()">Search</button>
+ 	<form action="/search.html">
+                <input id="search_bar" type="search" name="title" placeholder="Search">
+                <button id="search_button" type="submit">Search</button>
+        </form>
         <img  id="logo" src="img/logo.png"/>
     </div>
 
@@ -46,7 +48,6 @@
     </div>
 
     <script type="text/javascript" src="js/chapter_list.js"></script>
-    <script type="text/javascript" src="js/search_bar.js"></script>
     <script>
         document.onreadystatechange = load("https://amangathing.ddns.net/instance");
     </script>
