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