From c1e9fb112ff6cf14f10907eee684eafa664b24cd Mon Sep 17 00:00:00 2001
From: Peter Bjerg Lidegaard <dbf.black.bull@gmail.com>
Date: Wed, 18 Jan 2023 12:54:49 +0100
Subject: [PATCH] Improved styling of textarea for holding spell effect

---
 ADnD_2E_Revised/2ESheet.html                  | 121 +++++++++---------
 ADnD_2E_Revised/2EStyle.css                   |  17 +++
 ADnD_2E_Revised/css/2EStyle-base.css          |  17 +++
 .../html/shared/new-spell-template.html       | 121 +++++++++---------
 4 files changed, 158 insertions(+), 118 deletions(-)

diff --git a/ADnD_2E_Revised/2ESheet.html b/ADnD_2E_Revised/2ESheet.html
index baaf76dbdc..5c7d0737c6 100644
--- a/ADnD_2E_Revised/2ESheet.html
+++ b/ADnD_2E_Revised/2ESheet.html
@@ -19193,34 +19193,34 @@
                     <td><input type="text" name="attr_level-wizard" title="@{level-wizard}" class="sheet-display" placeholder="Select level" list="monster-level-select"></td>
                 </tr>
             </table>
-            <fieldset class="repeating_spells-test">
-              <div>
-                <table class="sheet-default-header-first-row sheet-inline-5">
+            <fieldset class="repeating_spells-wizmonster">
+              <div style="display: flex; align-items: flex-end; justify-content: space-between">
+                <table class="sheet-default-header-first-row sheet-inline-5" style="flex-grow: 5">
                   <tr class="sheet-collapse sheet-show-first">
                     <th>Spell name</th>
                     <th>Range</th>
-                    <th>Area of<br>effect</th>
-              <!--      <th>Spell points</th>-->
-              <!--      <th></th>-->
-              <!--      <th>Arc</th>-->
+                    <th>Area of effect</th>
+                      <!--      <th>Spell points</th>-->
+                      <!--      <th></th>-->
+                      <!--      <th>Arc</th>-->
                     <th colspan="2">Casting time</th>
                     <th colspan="2">Macro</th>
                   </tr>
                   <tr>
-                    <td><input></td>
-                    <td><input class="sheet-short"></td>
-                    <td><input class="sheet-short"></td>
-              <!--      <td><input class="sheet-table-dynamic"></td>-->
-              <!--      <td class="sheet-centering-padding-5">/</td>-->
-              <!--      <td><input class="sheet-short"></td>-->
+                    <td class="sheet-td-dynamic50"><input type="text" name="attr_spell-name" style="width: 100%"></td>
+                    <td class="sheet-td-dynamic25"><input class="sheet-short" style="width: 100%"></td>
+                    <td class="sheet-td-dynamic25"><input class="sheet-short" style="width: 100%"></td>
+                      <!--      <td><input class="sheet-table-dynamic"></td>-->
+                      <!--      <td class="sheet-centering-padding-5">/</td>-->
+                      <!--      <td><input class="sheet-short"></td>-->
                     <td><input class="sheet-short"></td>
                     <td><button type="roll">Initiative</button></td>
                     <td><button type="roll">T</button></td>
                     <td><button type="action" name="act_show" class="btn sheet-hidden sheet-show">▼</button><button type="action" name="act_hide" class="btn sheet-hidden">▲</button></td>
                   </tr>
                 </table>
-                <table class="sheet-default-header-first-row sheet-inline">
-                  <tr>
+                <table class="sheet-default-header-first-row">
+                  <tr class="sheet-collapse sheet-show-first">
                     <th>Cast</th>
                     <th></th>
                     <th>Memorized</th>
@@ -19232,50 +19232,53 @@
                   </tr>
                 </table>
               </div>
-              <table class="">
-                <tr>
-                  <th>School</th>
-                  <td><input></td>
-                  <th>Sphere</th>
-                  <td><input></td>
-                </tr>
-                <tr>
-                  <th>Duration</th>
-                  <td><input></td>
-                  <th>Saving Throw</th>
-                  <td><input></td>
-                </tr>
-                <tr>
-                  <th>Subtlety</th>
-                  <td><input></td>
-                  <th>Sensory</th>
-                  <td><input></td>
-                </tr>
-                <tr>
-                  <th>Knockdown</th>
-                  <td><input></td>
-                  <th>Critical</th>
-                  <td><input></td>
-                </tr>
-                <tr>
-                  <th>Damage</th>
-                  <td><input></td>
-                  <th>Damage Type</th>
-                  <td><input></td>
-                </tr>
-                <tr>
-                  <th>Healing</th>
-                  <td colspan="3"><input></td>
-                </tr>
-                <tr>
-                  <th>Reference</th>
-                  <td colspan="3"><input></td>
-                </tr>
-                <tr>
-                  <th>Materials</th>
-                  <td colspan="3"><input></td>
-                </tr>
-              </table>
+              <div class="sheet-flex" style="justify-content: space-between; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; column-gap: 10px;">
+                <table class="sheet-default-header-odd-column" style="align-self: flex-start">
+                  <tr>
+                    <th>School:</th>
+                    <td><input class="sheet-spell-half"></td>
+                    <th>Sphere:</th>
+                    <td><input class="sheet-spell-half"></td>
+                  </tr>
+                  <tr>
+                    <th>Duration:</th>
+                    <td><input class="sheet-spell-half"></td>
+                    <th style="white-space: nowrap">Saving Throw:</th>
+                    <td><input class="sheet-spell-half"></td>
+                  </tr>
+                  <tr>
+                    <th>Subtlety:</th>
+                    <td><input class="sheet-spell-half"></td>
+                    <th>Sensory:</th>
+                    <td><input class="sheet-spell-half"></td>
+                  </tr>
+                  <tr>
+                    <th>Knockdown:</th>
+                    <td><input class="sheet-spell-half"></td>
+                    <th>Critical:</th>
+                    <td><input class="sheet-spell-half"></td>
+                  </tr>
+                  <tr>
+                    <th>Damage:</th>
+                    <td><input class="sheet-spell-half"></td>
+                    <th>Damage Type:</th>
+                    <td><input class="sheet-spell-half"></td>
+                  </tr>
+                  <tr>
+                    <th>Healing:</th>
+                    <td colspan="3"><input style="width: 100%"></td>
+                  </tr>
+                  <tr>
+                    <th>Reference:</th>
+                    <td colspan="3"><input style="width: 100%"></td>
+                  </tr>
+                  <tr>
+                    <th>Materials:</th>
+                    <td colspan="3"><input style="width: 100%"></td>
+                  </tr>
+                </table>
+                <textarea style="height: unset;"></textarea>
+              </div>
             </fieldset>
             <br>
         </details>
diff --git a/ADnD_2E_Revised/2EStyle.css b/ADnD_2E_Revised/2EStyle.css
index a1ad9b7db1..cba60cc68f 100644
--- a/ADnD_2E_Revised/2EStyle.css
+++ b/ADnD_2E_Revised/2EStyle.css
@@ -205,6 +205,16 @@ textarea {
     min-width: 90%;
 }
 
+.charsheet th.sheet-td-dynamic20,
+.charsheet td.sheet-td-dynamic20 {
+    width: 20%;
+}
+
+.charsheet th.sheet-td-dynamic25,
+.charsheet td.sheet-td-dynamic25 {
+    width: 25%;
+}
+
 .charsheet th.sheet-td-dynamic30,
 .charsheet td.sheet-td-dynamic30 {
     width: 30%;
@@ -215,6 +225,11 @@ textarea {
     width: 50%;
 }
 
+.charsheet th.sheet-td-dynamic60,
+.charsheet td.sheet-td-dynamic60 {
+    width: 60%;
+}
+
 .charsheet th.sheet-td-dynamic70,
 .charsheet td.sheet-td-dynamic70 {
     width: 70%;
@@ -1584,7 +1599,9 @@ table.sheet-default-header-every-third-row tr:nth-child(3n+1),
 table.sheet-default-header-first-column td:first-child,
 table.sheet-default-header-first-column th:first-child,
 table.sheet-default-header-even-column td:nth-child(even),
+table.sheet-default-header-even-column th:nth-child(even),
 table.sheet-default-header-odd-column td:nth-child(odd),
+table.sheet-default-header-odd-column th:nth-child(odd),
 table.sheet-default-header-every-third-column td:nth-child(3n+1),
 .sheet-default-header {
     background-color: #7C0303;
diff --git a/ADnD_2E_Revised/css/2EStyle-base.css b/ADnD_2E_Revised/css/2EStyle-base.css
index 2c1a0a9221..e17f179336 100644
--- a/ADnD_2E_Revised/css/2EStyle-base.css
+++ b/ADnD_2E_Revised/css/2EStyle-base.css
@@ -205,6 +205,16 @@ textarea {
     min-width: 90%;
 }
 
+.charsheet th.sheet-td-dynamic20,
+.charsheet td.sheet-td-dynamic20 {
+    width: 20%;
+}
+
+.charsheet th.sheet-td-dynamic25,
+.charsheet td.sheet-td-dynamic25 {
+    width: 25%;
+}
+
 .charsheet th.sheet-td-dynamic30,
 .charsheet td.sheet-td-dynamic30 {
     width: 30%;
@@ -215,6 +225,11 @@ textarea {
     width: 50%;
 }
 
+.charsheet th.sheet-td-dynamic60,
+.charsheet td.sheet-td-dynamic60 {
+    width: 60%;
+}
+
 .charsheet th.sheet-td-dynamic70,
 .charsheet td.sheet-td-dynamic70 {
     width: 70%;
@@ -890,7 +905,9 @@ table.sheet-default-header-every-third-row tr:nth-child(3n+1),
 table.sheet-default-header-first-column td:first-child,
 table.sheet-default-header-first-column th:first-child,
 table.sheet-default-header-even-column td:nth-child(even),
+table.sheet-default-header-even-column th:nth-child(even),
 table.sheet-default-header-odd-column td:nth-child(odd),
+table.sheet-default-header-odd-column th:nth-child(odd),
 table.sheet-default-header-every-third-column td:nth-child(3n+1),
 .sheet-default-header {
     background-color: #7C0303;
diff --git a/ADnD_2E_Revised/html/shared/new-spell-template.html b/ADnD_2E_Revised/html/shared/new-spell-template.html
index 73dd926e67..75b93f70c8 100644
--- a/ADnD_2E_Revised/html/shared/new-spell-template.html
+++ b/ADnD_2E_Revised/html/shared/new-spell-template.html
@@ -1,31 +1,31 @@
-<fieldset class="repeating_spells-test">
-  <div>
-    <table class="sheet-default-header-first-row sheet-inline-5">
+<fieldset class="repeating_spells-wizmonster">
+  <div style="display: flex; align-items: flex-end; justify-content: space-between">
+    <table class="sheet-default-header-first-row sheet-inline-5" style="flex-grow: 5">
       <tr class="sheet-collapse sheet-show-first">
         <th>Spell name</th>
         <th>Range</th>
-        <th>Area of<br>effect</th>
-  <!--      <th>Spell points</th>-->
-  <!--      <th></th>-->
-  <!--      <th>Arc</th>-->
+        <th>Area of effect</th>
+          <!--      <th>Spell points</th>-->
+          <!--      <th></th>-->
+          <!--      <th>Arc</th>-->
         <th colspan="2">Casting time</th>
         <th colspan="2">Macro</th>
       </tr>
       <tr>
-        <td><input></td>
-        <td><input class="sheet-short"></td>
-        <td><input class="sheet-short"></td>
-  <!--      <td><input class="sheet-table-dynamic"></td>-->
-  <!--      <td class="sheet-centering-padding-5">/</td>-->
-  <!--      <td><input class="sheet-short"></td>-->
+        <td class="sheet-td-dynamic50"><input type="text" name="attr_spell-name" style="width: 100%"></td>
+        <td class="sheet-td-dynamic25"><input class="sheet-short" style="width: 100%"></td>
+        <td class="sheet-td-dynamic25"><input class="sheet-short" style="width: 100%"></td>
+          <!--      <td><input class="sheet-table-dynamic"></td>-->
+          <!--      <td class="sheet-centering-padding-5">/</td>-->
+          <!--      <td><input class="sheet-short"></td>-->
         <td><input class="sheet-short"></td>
         <td><button type="roll">Initiative</button></td>
         <td><button type="roll">T</button></td>
         <td><button type="action" name="act_show" class="btn sheet-hidden sheet-show">▼</button><button type="action" name="act_hide" class="btn sheet-hidden">▲</button></td>
       </tr>
     </table>
-    <table class="sheet-default-header-first-row sheet-inline">
-      <tr>
+    <table class="sheet-default-header-first-row">
+      <tr class="sheet-collapse sheet-show-first">
         <th>Cast</th>
         <th></th>
         <th>Memorized</th>
@@ -37,48 +37,51 @@
       </tr>
     </table>
   </div>
-  <table class="">
-    <tr>
-      <th>School</th>
-      <td><input></td>
-      <th>Sphere</th>
-      <td><input></td>
-    </tr>
-    <tr>
-      <th>Duration</th>
-      <td><input></td>
-      <th>Saving Throw</th>
-      <td><input></td>
-    </tr>
-    <tr>
-      <th>Subtlety</th>
-      <td><input></td>
-      <th>Sensory</th>
-      <td><input></td>
-    </tr>
-    <tr>
-      <th>Knockdown</th>
-      <td><input></td>
-      <th>Critical</th>
-      <td><input></td>
-    </tr>
-    <tr>
-      <th>Damage</th>
-      <td><input></td>
-      <th>Damage Type</th>
-      <td><input></td>
-    </tr>
-    <tr>
-      <th>Healing</th>
-      <td colspan="3"><input></td>
-    </tr>
-    <tr>
-      <th>Reference</th>
-      <td colspan="3"><input></td>
-    </tr>
-    <tr>
-      <th>Materials</th>
-      <td colspan="3"><input></td>
-    </tr>
-  </table>
+  <div class="sheet-flex" style="justify-content: space-between; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; column-gap: 10px;">
+    <table class="sheet-default-header-odd-column" style="align-self: flex-start">
+      <tr>
+        <th>School:</th>
+        <td><input class="sheet-spell-half"></td>
+        <th>Sphere:</th>
+        <td><input class="sheet-spell-half"></td>
+      </tr>
+      <tr>
+        <th>Duration:</th>
+        <td><input class="sheet-spell-half"></td>
+        <th style="white-space: nowrap">Saving Throw:</th>
+        <td><input class="sheet-spell-half"></td>
+      </tr>
+      <tr>
+        <th>Subtlety:</th>
+        <td><input class="sheet-spell-half"></td>
+        <th>Sensory:</th>
+        <td><input class="sheet-spell-half"></td>
+      </tr>
+      <tr>
+        <th>Knockdown:</th>
+        <td><input class="sheet-spell-half"></td>
+        <th>Critical:</th>
+        <td><input class="sheet-spell-half"></td>
+      </tr>
+      <tr>
+        <th>Damage:</th>
+        <td><input class="sheet-spell-half"></td>
+        <th>Damage Type:</th>
+        <td><input class="sheet-spell-half"></td>
+      </tr>
+      <tr>
+        <th>Healing:</th>
+        <td colspan="3"><input style="width: 100%"></td>
+      </tr>
+      <tr>
+        <th>Reference:</th>
+        <td colspan="3"><input style="width: 100%"></td>
+      </tr>
+      <tr>
+        <th>Materials:</th>
+        <td colspan="3"><input style="width: 100%"></td>
+      </tr>
+    </table>
+    <textarea style="height: unset;"></textarea>
+  </div>
 </fieldset>
\ No newline at end of file