From 8a78927ba565ea2b44542380e2f64e0ad33a30a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frederik=20Palm=C3=B8?= <frederik@palmoe.dk>
Date: Mon, 11 Apr 2022 00:55:42 +0200
Subject: [PATCH] improved responsiveness of weapon finder

---
 src/style/main.css | 10 ++++++++++
 src/weapon.html    | 44 +++++++++++++++++++++++++-------------------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/style/main.css b/src/style/main.css
index a773c84..0fd87ee 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -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,
diff --git a/src/weapon.html b/src/weapon.html
index e68ac01..2b2b057 100644
--- a/src/weapon.html
+++ b/src/weapon.html
@@ -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>