vodofrede/erdtree
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved responsiveness of weapon finder

Browse Source
This commit is contained in:
Frederik Palmø 2022-04-11 00:55:42 +02:00
parent 50c6606065
commit 8a78927ba5
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/style/main.css
View File

@ -182,23 +182,33 @@ li {
} }
table { table {
overflow-x: auto;
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 5px; border-radius: 5px;
border-spacing: 0px; border-spacing: 0px;
overflow: scroll;
background-color: var(--primary); background-color: var(--primary);
} }
table tbody,
table thead {
width: 100%;
}
th { th {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
td, td,
th { th {
overflow: scroll;
text-overflow: ellipsis;
padding: 0.4rem; padding: 0.4rem;
font-size: 0.9rem;
} }
thead, thead,

44
src/weapon.html
View File

@ -34,7 +34,7 @@
<main> <main>
<div class="app"> <div class="app">
<!-- parameters --> <!-- parameters -->
<article style="flex-basis: 20%"> <article style="flex-basis: 15%">
<div> <div>
<b>Parameters</b> <b>Parameters</b>
<button onclick="resetAll()" style="margin-bottom: 0px"> <button onclick="resetAll()" style="margin-bottom: 0px">
@ -268,7 +268,7 @@
</div> </div>
</article> </article>
<!-- results --> <!-- results -->
<article style="flex-basis: 55%; min-width: 700px"> <article style="flex-basis: 55%">
<b>Results</b> <b>Results</b>
<hr /> <hr />
<template id="weapon"> <template id="weapon">
@ -292,7 +292,7 @@
<td></td> <td></td>
</tr> </tr>
</template> </template>
<div> <div style="overflow: auto">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -309,85 +309,91 @@
<th id="standard" name="damage-result"> <th id="standard" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/standard.jpg" src="/resource/icon/standard.jpg"
height="25px" title="Standard" style="max-width: 20px" title="Standard"
alt="Standard" alt="Standard"
onclick="changeSort('standard')" /> onclick="changeSort('standard')" />
</th> </th>
<th id="heavy" name="damage-result"> <th id="heavy" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/heavy.jpg" src="/resource/icon/heavy.jpg"
height="25px" title="Heavy" alt="Heavy" style="max-width: 20px" title="Heavy"
alt="Heavy"
onclick="changeSort('heavy')" /> onclick="changeSort('heavy')" />
</th> </th>
<th id="keen" name="damage-result"> <th id="keen" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/keen.jpg" src="/resource/icon/keen.jpg"
height="25px" title="Keen" alt="Keen" style="max-width: 20px" title="Keen"
alt="Keen"
onclick="changeSort('keen')" /> onclick="changeSort('keen')" />
</th> </th>
<th id="quality" name="damage-result"> <th id="quality" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/quality.jpg" src="/resource/icon/quality.jpg"
height="25px" title="Quality" style="max-width: 20px" title="Quality"
alt="Quality" alt="Quality"
onclick="changeSort('quality')" /> onclick="changeSort('quality')" />
</th> </th>
<th id="fire" name="damage-result"> <th id="fire" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/fire.jpg" src="/resource/icon/fire.jpg"
height="25px" title="Fire" alt="Fire" style="max-width: 20px" title="Fire"
alt="Fire"
onclick="changeSort('fire')" /> onclick="changeSort('fire')" />
</th> </th>
<th id="flame-art" name="damage-result"> <th id="flame-art" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/flame-art.jpg" src="/resource/icon/flame-art.jpg"
height="25px" title="Flame Art" style="max-width: 20px"
alt="Flame Art" title="Flame Art" alt="Flame Art"
onclick="changeSort('flame-art')" /> onclick="changeSort('flame-art')" />
</th> </th>
<th id="lightning" name="damage-result"> <th id="lightning" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/lightning.jpg" src="/resource/icon/lightning.jpg"
height="25px" title="Lightning" style="max-width: 20px"
alt="Lightning" title="Lightning" alt="Lightning"
onclick="changeSort('lightning')" /> onclick="changeSort('lightning')" />
</th> </th>
<th id="sacred" name="damage-result"> <th id="sacred" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/sacred.jpg" src="/resource/icon/sacred.jpg"
height="25px" title="Sacred" style="max-width: 20px" title="Sacred"
alt="Sacred" alt="Sacred"
onclick="changeSort('sacred')" /> onclick="changeSort('sacred')" />
</th> </th>
<th id="magic" name="damage-result"> <th id="magic" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/magic.jpg" src="/resource/icon/magic.jpg"
height="25px" title="Magic" alt="Magic" style="max-width: 20px" title="Magic"
alt="Magic"
onclick="changeSort('magic')" /> onclick="changeSort('magic')" />
</th> </th>
<th id="cold" name="damage-result"> <th id="cold" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/cold.jpg" src="/resource/icon/cold.jpg"
height="25px" title="Cold" alt="Cold" style="max-width: 20px" title="Cold"
alt="Cold"
onclick="changeSort('cold')" /> onclick="changeSort('cold')" />
</th> </th>
<th id="poison" name="damage-result"> <th id="poison" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/poison.jpg" src="/resource/icon/poison.jpg"
height="25px" title="Poison" style="max-width: 20px" title="Poison"
alt="Poison" alt="Poison"
onclick="changeSort('poison')" /> onclick="changeSort('poison')" />
</th> </th>
<th id="blood" name="damage-result"> <th id="blood" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/blood.jpg" src="/resource/icon/blood.jpg"
height="25px" title="Blood" alt="Blood" style="max-width: 20px" title="Blood"
alt="Blood"
onclick="changeSort('blood')" /> onclick="changeSort('blood')" />
</th> </th>
<th id="occult" name="damage-result"> <th id="occult" name="damage-result">
<input type="image" <input type="image"
src="/resource/icon/occult.jpg" src="/resource/icon/occult.jpg"
height="25px" title="Occult" style="max-width: 20px" title="Occult"
alt="Occult" alt="Occult"
onclick="changeSort('occult')" /> onclick="changeSort('occult')" />
</th> </th>
@ -398,7 +404,7 @@
</div> </div>
</article> </article>
<!-- categories --> <!-- categories -->
<article style="flex-basis: 20%"> <article style="flex-basis: 15%">
<div> <div>
<b>Categories</b> <b>Categories</b>
<span> <span>