UI tweak for mobile devices

This commit is contained in:
mingjun97 2022-05-10 00:51:11 -07:00
parent 6af715bb5a
commit 09805016ba
3 changed files with 7 additions and 7 deletions

View File

@ -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");

View File

@ -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");

View File

@ -201,7 +201,7 @@ function updateQualityList() {
}) })
}) })
}) })
document.getElementById("search-box").style.height = "20em"; document.getElementById("search-box").style.height = "10em";
} }
} }