improved responsiveness of weapon finder
This commit is contained in:
parent
50c6606065
commit
8a78927ba5
@ -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,
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user