cynic
/
frontend
mirror of https://github.com/kurisufriend/frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

made search_bar into form and fixed styling

Browse Source
master
zhetic 4 years ago
parent 2a255c3808
commit 9562a029c4
6 changed files with 21 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

7
about.html
Unescape View File

@ -9,8 +9,10 @@
<body> <body>
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <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"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -19,6 +21,5 @@
</div> </div>
</div> </div>
<script type="text/javacript" src="js/search_bar.js"></script>
</body> </body>
</html> </html>

7
catalog.html
Unescape View File

@ -10,8 +10,10 @@
<body> <body>
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <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"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -39,7 +41,6 @@
</div> </div>
<script type="text/javascript" src="js/title_list.js"></script> <script type="text/javascript" src="js/title_list.js"></script>
<script type="text/javascript" src="js/search_bar.js"></script>
<script> <script>
document.onreadystatechange = load_titles("https://amangathing.ddns.net/instance"); document.onreadystatechange = load_titles("https://amangathing.ddns.net/instance");
</script> </script>

13
css/stylesheet.css
Unescape View File

@ -50,10 +50,10 @@ a:visited {
#header { #header {
position: fixed; position: fixed;
top: 0%;
left: 0%;
width: 100%; width: 100%;
height: 5em; height: 5em;
top: 0%;
left: 0%;
background-color: var(--medium-grey); background-color: var(--medium-grey);
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
@ -61,34 +61,35 @@ a:visited {
#header #home { #header #home {
position: relative; position: relative;
top: 30%;
height: 40%; height: 40%;
top: 30%;
left: 2em; left: 2em;
} }
#header #search_bar { #header #search_bar {
position: absolute; position: absolute;
transform: translateY(50%);
background-color: white; background-color: white;
border: none; border: none;
padding: 1em; padding: 1em;
border-radius: 1em; border-radius: 1em;
left: 10em;
width: 50%; width: 50%;
height: 50%; height: 50%;
top: 30%;
left: 10em;
} }
#header #search_button { #header #search_button {
position: absolute; position: absolute;
height: 50%; height: 50%;
top: 30%;
left: calc(10em + 50% + 1em); left: calc(10em + 50% + 1em);
transform: translateY(50%);
} }
#header #logo { #header #logo {
position: absolute; position: absolute;
height: 180%; height: 180%;
right: 5%; right: 5%;
top: 5%;
} }
#content { #content {

22
js/search_bar.js
Unescape View File

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

15
search.html
Unescape View File

@ -75,7 +75,7 @@
<script> <script>
var prefix = "https://amangathing.ddns.net/instance/manga/search?"; var prefix = "https://amangathing.ddns.net/instance/manga/search?";
function load_results() { document.onreadystatechange = function () {
var query = search_full() var query = search_full()
if(query != ""){ if(query != ""){
console.log("on search", query); console.log("on search", query);
@ -84,19 +84,6 @@
document.querySelector("#label").textContent = "Result"; 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> </script>
</body> </body>
</html> </html>

7
title.html
Unescape View File

@ -11,8 +11,10 @@
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <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"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -46,7 +48,6 @@
</div> </div>
<script type="text/javascript" src="js/chapter_list.js"></script> <script type="text/javascript" src="js/chapter_list.js"></script>
<script type="text/javascript" src="js/search_bar.js"></script>
<script> <script>
document.onreadystatechange = load("https://amangathing.ddns.net/instance"); document.onreadystatechange = load("https://amangathing.ddns.net/instance");
</script> </script>

Write Preview
Loading…
Cancel
Save