Added placeholder text for the search box and a footer

master
Wynd 2024-07-01 18:24:37 +03:00
parent e140f2a57e
commit 2c60b23287
6 changed files with 28 additions and 5 deletions

View File

@ -1,6 +1,6 @@
[package] [package]
name = "khguide" name = "khguide"
version = "0.1.0" version = "1.0.1"
edition = "2021" edition = "2021"
[dependencies] [dependencies]

View File

@ -8,10 +8,16 @@
color: #fff; color: #fff;
} }
footer {
text-align: center;
}
table { table {
width: 100%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px;
thead th { thead th {
background-color: #252525; background-color: #252525;
@ -55,6 +61,7 @@
const searchFilter = document.getElementById("filter"); const searchFilter = document.getElementById("filter");
let filterHandler = debounce(() => filter()); let filterHandler = debounce(() => filter());
searchFilter.addEventListener("keyup", filterHandler); searchFilter.addEventListener("keyup", filterHandler);
searchFilter.placeholder = "Search commands...";
const searchInputs = document.querySelectorAll( const searchInputs = document.querySelectorAll(
'input[type="radio"][name="search"]', 'input[type="radio"][name="search"]',
@ -63,6 +70,7 @@
searchInputs.forEach(function (item, index) { searchInputs.forEach(function (item, index) {
item.addEventListener("input", function () { item.addEventListener("input", function () {
searchType = this.checked ? this.value : ""; searchType = this.checked ? this.value : "";
searchFilter.placeholder = "Search " + this.value + "...";
filter(); filter();
}); });
}); });
@ -111,7 +119,7 @@
resetStyle(child, tds); resetStyle(child, tds);
if (search.length > 0) { if (search.length > 0) {
if (searchType === "result") { if (searchType === "commands") {
// Check for command name // Check for command name
if (!tds[1].innerText.toLowerCase().includes(search)) { if (!tds[1].innerText.toLowerCase().includes(search)) {
child.style.display = "none"; child.style.display = "none";
@ -183,7 +191,7 @@
id="searchResult" id="searchResult"
name="search" name="search"
autocomplete="off" autocomplete="off"
value="result" value="commands"
checked checked
/> />
<label for="searchResult">Result</label> <label for="searchResult">Result</label>
@ -4133,5 +4141,8 @@
<td>-</td> <td>-</td>
<td>5%</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr></tbody> <td>5%</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr></tbody>
</table></div> </table></div>
<footer>
<p>v1.0.1</p>
</footer>
</body> </body>
</html> </html>

View File

@ -131,6 +131,7 @@ struct CommandsTemplate {
const ABILITIES_PATH: &str = "./input/abilities.json"; const ABILITIES_PATH: &str = "./input/abilities.json";
const FINISHERS_PATH: &str = "./input/finish-commands.json"; const FINISHERS_PATH: &str = "./input/finish-commands.json";
const COMMANDS_PATH: &str = "./input/commands.json"; const COMMANDS_PATH: &str = "./input/commands.json";
pub const VERSION: &str = env!("CARGO_PKG_VERSION");
fn main() { fn main() {
// Initialize tracing // Initialize tracing

View File

@ -5,7 +5,7 @@
id="searchResult" id="searchResult"
name="search" name="search"
autocomplete="off" autocomplete="off"
value="result" value="commands"
checked checked
/> />
<label for="searchResult">Result</label> <label for="searchResult">Result</label>

View File

@ -8,10 +8,16 @@
color: #fff; color: #fff;
} }
footer {
text-align: center;
}
table { table {
width: 100%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px;
thead th { thead th {
background-color: #252525; background-color: #252525;
@ -53,5 +59,8 @@
<body> <body>
<div id="content">{% block content %}{% endblock %}</div> <div id="content">{% block content %}{% endblock %}</div>
<footer>
<p>v{{ crate::VERSION }}</p>
</footer>
</body> </body>
</html> </html>

View File

@ -12,6 +12,7 @@
const searchFilter = document.getElementById("filter"); const searchFilter = document.getElementById("filter");
let filterHandler = debounce(() => filter()); let filterHandler = debounce(() => filter());
searchFilter.addEventListener("keyup", filterHandler); searchFilter.addEventListener("keyup", filterHandler);
searchFilter.placeholder = "Search commands...";
const searchInputs = document.querySelectorAll( const searchInputs = document.querySelectorAll(
'input[type="radio"][name="search"]', 'input[type="radio"][name="search"]',
@ -20,6 +21,7 @@
searchInputs.forEach(function (item, index) { searchInputs.forEach(function (item, index) {
item.addEventListener("input", function () { item.addEventListener("input", function () {
searchType = this.checked ? this.value : ""; searchType = this.checked ? this.value : "";
searchFilter.placeholder = "Search " + this.value + "...";
filter(); filter();
}); });
}); });
@ -68,7 +70,7 @@
resetStyle(child, tds); resetStyle(child, tds);
if (search.length > 0) { if (search.length > 0) {
if (searchType === "result") { if (searchType === "commands") {
// Check for command name // Check for command name
if (!tds[1].innerText.toLowerCase().includes(search)) { if (!tds[1].innerText.toLowerCase().includes(search)) {
child.style.display = "none"; child.style.display = "none";