improved responsiveness of weapon finder

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

View File

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

View File

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