made search_bar into form and fixed styling

master
zhetic 4 years ago
parent b2ace9d1dd
commit 929dc38c9b
  1. 7
      about.html
  2. 7
      catalog.html
  3. 13
      css/stylesheet.css
  4. 22
      js/search_bar.js
  5. 15
      search.html
  6. 7
      title.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>

@ -10,8 +10,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>
@ -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>

@ -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 {

@ -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();
}
});

@ -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>

@ -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>

Loading…
Cancel
Save