mirror of
https://github.com/SpikeHD/MojoFrontend.git
synced 2024-11-25 10:07:26 +00:00
UI tweak for mobile devices
This commit is contained in:
parent
6af715bb5a
commit
09805016ba
@ -15,7 +15,7 @@ function genItem() {
|
|||||||
<input id="item-search" style="flex: 4" type="text" placeholder="Search Item Name" />
|
<input id="item-search" style="flex: 4" type="text" placeholder="Search Item Name" />
|
||||||
<button id="clear" style="margin-left: 0.25em; transition: all ease-in-out 0.5s; flex: 0; opacity: 0;">Clear</button>
|
<button id="clear" style="margin-left: 0.25em; transition: all ease-in-out 0.5s; flex: 0; opacity: 0;">Clear</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="name-list" style="overflow-y: auto; overflow-x: hidden; max-height: 20em;height: 100%; transition: all ease-in-out 0.5s;">
|
<div id="name-list" style="overflow-y: auto; overflow-x: hidden; max-height: 10em;height: 100%; transition: all ease-in-out 0.5s;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label for="amount">Amount:</label><input type="number" id="amount" name="amount" value=100 />
|
<label for="amount">Amount:</label><input type="number" id="amount" name="amount" value=100 />
|
||||||
@ -36,7 +36,7 @@ function genItem() {
|
|||||||
clearTimeout(delayedSearch);
|
clearTimeout(delayedSearch);
|
||||||
}
|
}
|
||||||
delayedSearch = setTimeout(() => updateItemList(), 500);
|
delayedSearch = setTimeout(() => updateItemList(), 500);
|
||||||
document.getElementById("name-list").style.height = "20em";
|
document.getElementById("name-list").style.height = "10em";
|
||||||
};
|
};
|
||||||
document.getElementById("clear").onclick = ()=>{
|
document.getElementById("clear").onclick = ()=>{
|
||||||
document.getElementById("item-search").value = "";
|
document.getElementById("item-search").value = "";
|
||||||
@ -88,7 +88,7 @@ function updateItemList() {
|
|||||||
var filter = document.getElementById("item-search").value;
|
var filter = document.getElementById("item-search").value;
|
||||||
var list = document.getElementById("name-list");
|
var list = document.getElementById("name-list");
|
||||||
list.innerHTML = "";
|
list.innerHTML = "";
|
||||||
list.style.height = "20em";
|
list.style.height = "10em";
|
||||||
item_data.forEach(element => {
|
item_data.forEach(element => {
|
||||||
if (filter == "" || element.name.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
|
if (filter == "" || element.name.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
|
||||||
var o = document.createElement("label");
|
var o = document.createElement("label");
|
||||||
|
@ -10,7 +10,7 @@ function genMonster() {
|
|||||||
<input id="entity-search" style="flex: 4" type="text" placeholder="Search Entity Name" />
|
<input id="entity-search" style="flex: 4" type="text" placeholder="Search Entity Name" />
|
||||||
<button id="clear" style="margin-left: 0.25em; transition: all ease-in-out 0.5s; flex: 0; opacity: 0;">Clear</button>
|
<button id="clear" style="margin-left: 0.25em; transition: all ease-in-out 0.5s; flex: 0; opacity: 0;">Clear</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="name-list" style="overflow-y: auto; overflow-x: hidden; max-height: 20em;height: 100%; transition: all ease-in-out 0.5s;">
|
<div id="name-list" style="overflow-y: auto; overflow-x: hidden; max-height: 10em;height: 100%; transition: all ease-in-out 0.5s;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label for="amount">Amount:</label><input type="number" id="amount" name="amount" value=1 />
|
<label for="amount">Amount:</label><input type="number" id="amount" name="amount" value=1 />
|
||||||
@ -32,7 +32,7 @@ function genMonster() {
|
|||||||
clearTimeout(delayedSearch);
|
clearTimeout(delayedSearch);
|
||||||
}
|
}
|
||||||
delayedSearch = setTimeout(() => updateEntityList(), 500);
|
delayedSearch = setTimeout(() => updateEntityList(), 500);
|
||||||
document.getElementById("name-list").style.height = "20em";
|
document.getElementById("name-list").style.height = "10em";
|
||||||
};
|
};
|
||||||
document.getElementById("clear").onclick = ()=>{
|
document.getElementById("clear").onclick = ()=>{
|
||||||
document.getElementById("entity-search").value = "";
|
document.getElementById("entity-search").value = "";
|
||||||
@ -84,7 +84,7 @@ function updateEntityList() {
|
|||||||
var filter = document.getElementById("entity-search").value;
|
var filter = document.getElementById("entity-search").value;
|
||||||
var list = document.getElementById("name-list");
|
var list = document.getElementById("name-list");
|
||||||
list.innerHTML = "";
|
list.innerHTML = "";
|
||||||
list.style.height = "20em";
|
list.style.height = "10em";
|
||||||
monster_data.forEach(element => {
|
monster_data.forEach(element => {
|
||||||
if (filter == "" || element.name.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
|
if (filter == "" || element.name.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
|
||||||
var o = document.createElement("label");
|
var o = document.createElement("label");
|
||||||
|
@ -201,7 +201,7 @@ function updateQualityList() {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
document.getElementById("search-box").style.height = "20em";
|
document.getElementById("search-box").style.height = "10em";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user