From 04a0d012fc6d50e1b6f4a6ef3db164617cdd759d Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Fri, 6 Oct 2023 05:27:36 +0900
Subject: [PATCH] WI: quick cope for mobile entry display

---
 public/css/mobile-styles.css | 19 +++++++-
 public/index.html            | 88 +++++++++++++++++++-----------------
 2 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 388aaff01..c6b6c6659 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -35,7 +35,7 @@
         max-width: 90svw;
     }
 
-    .world_entry_thin_controls,
+    /* .world_entry_thin_controls, */
     #persona-management-block,
     #character_popup .flex-container {
         flex-direction: column;
@@ -63,6 +63,15 @@
         display: none;
     }
 
+    .world_entry .inline-drawer-toggle {
+        padding-bottom: 5px;
+    }
+
+    #worldInfoScanningCheckboxes {
+        flex-flow: row;
+        flex-wrap: wrap;
+    }
+
     body {
         touch-action: none;
         overflow: hidden;
@@ -71,7 +80,7 @@
     }
 
     .world_entry_form_control {
-        width: 100%;
+        /* width: 100%; */
     }
 
     .drawer-content {
@@ -129,6 +138,12 @@
 
     .wi-settings {
         flex-direction: column;
+        gap: 5px !important;
+    }
+
+    .WIEntryTitleAndStatus,
+    .WIEntryHeaderControls {
+        width: 100%;
     }
 
     #character_popup,
diff --git a/public/index.html b/public/index.html
index 4e8b2a0fb..c3d5b3ada 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2700,33 +2700,33 @@
                             </div>
                         </div>
 
-                        <div data-newbie-hidden class="alignitemsflexstart flex1 range-block flex-container flexFlowColumn">
-                            <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label">
+                        <div id="worldInfoScanningCheckboxes" data-newbie-hidden class="alignitemsflexstart flex1 flex-container flexFlowColumn">
+                            <label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
                                 <input id="world_info_recursive" type="checkbox" />
-                                <small data-i18n="Recursive Scan">
+                                <small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
                                     Recursive Scan
                                 </small>
                             </label>
-                            <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label">
+                            <label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
                                 <input id="world_info_case_sensitive" type="checkbox" />
-                                <small data-i18n="Case Sensitive">
+                                <small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
                                     Case-sensitive
                                 </small>
                             </label>
-                            <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label">
+                            <label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
                                 <input id="world_info_match_whole_words" type="checkbox" />
-                                <small data-i18n="Match whole words">
+                                <small data-i18n="Match whole words" class="whitespacenowrap flex1">
                                     Match whole words
                                 </small>
                             </label>
-                            <label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label">
+                            <label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
                                 <input id="world_info_overflow_alert" type="checkbox" />
-                                <small data-i18n="Alert On Overflow">
+                                <small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
                                     Alert On Overflow
                                 </small>
                             </label>
                         </div>
-                        <div id="WIInputWidthReference" style="visibility: hidden;">10000</div>
+                        <div id="WIInputWidthReference" style="visibility: hidden; height:1px;">10000</div>
                     </div>
 
                     <div id="world_popup">
@@ -3935,42 +3935,46 @@
                             <div class="fa-fw fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
 
                             <span class="flex-container alignitemscenter wide100p">
-                                <div class="flex-container flex1">
-                                    <textarea class="text_pole" name="comment" maxlength="2000" data-i18n="[placeholder]Entry Title/Memo" placeholder="Entry Title/Memo"></textarea>
-                                </div>
-                                <!-- <span class="world_entry_form_position_value"></span> -->
-                                <select title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" name="entryStateSelector" class="widthNatural margin0">
-                                    <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="constant">🔵</option>
-                                    <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="normal">🟢</option>
-                                    <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="disabled">❌</option>
-                                </select>
-                                <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text">
-                                    <!-- <label for="position" data-i18n="Position:">Position:</label> -->
-                                    <select name="position" class="widthNatural margin0" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">
-                                        <option value="0" data-i18n="Before Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑Char</option>
-                                        <option value="1" data-i18n="After Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓Char</option>
-                                        <option value="2" data-i18n="Before AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑AN</option>
-                                        <option value="3" data-i18n="After AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓AN</option>
-                                        <option value="4" data-i18n="at Depth" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">@D</option>
+                                <div class="WIEntryTitleAndStatus flex-container flex1 alignitemscenter">
+                                    <div class="flex-container flex1">
+                                        <textarea class="text_pole" name="comment" maxlength="2000" data-i18n="[placeholder]Entry Title/Memo" placeholder="Entry Title/Memo"></textarea>
+                                    </div>
+                                    <!-- <span class="world_entry_form_position_value"></span> -->
+                                    <select title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" name="entryStateSelector" class="widthNatural margin0">
+                                        <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="constant">🔵</option>
+                                        <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="normal">🟢</option>
+                                        <option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="disabled">❌</option>
                                     </select>
                                 </div>
 
-                                <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap">
-                                    <!-- <label for="depth" data-i18n="Depth:">Depth:</label> -->
-                                    <input title="Depth" class="text_pole wideMax100px margin0" type="number" name="depth" placeholder="" min="0" max="999" />
-                                </div>
 
-                                <div class="world_entry_form_control wi-enter-footer-text  flex-container flexNoGap">
-                                    <!--  <label for="order" data-i18n="Order:">Order:</label> -->
-                                    <input title="Order" class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="999" />
-                                </div>
-                                <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
-                                    <input title="Probability" class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
-                                </div>
-                                <!--                                 <div class="flex-container flex1">
-                                    <textarea class="text_pole" name="comment" maxlength="2000" data-i18n="[placeholder]Entry Title/Memo" placeholder="Entry Title/Memo"></textarea>
-                                </div> -->
+                                <div class="WIEnteryHeaderControls flex-container">
+                                    <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text">
+                                        <!-- <label for="position" data-i18n="Position:">Position:</label> -->
+                                        <select name="position" class="widthNatural margin0" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">
+                                            <option value="0" data-i18n="Before Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑Char</option>
+                                            <option value="1" data-i18n="After Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓Char</option>
+                                            <option value="2" data-i18n="Before AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑AN</option>
+                                            <option value="3" data-i18n="After AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓AN</option>
+                                            <option value="4" data-i18n="at Depth" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">@D</option>
+                                        </select>
+                                    </div>
+                                    <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap">
+                                        <!-- <label for="depth" data-i18n="Depth:">Depth:</label> -->
+                                        <input title="Depth" class="text_pole wideMax100px margin0" type="number" name="depth" placeholder="" min="0" max="999" />
+                                    </div>
 
+                                    <div class="world_entry_form_control wi-enter-footer-text  flex-container flexNoGap">
+                                        <!--  <label for="order" data-i18n="Order:">Order:</label> -->
+                                        <input title="Order" class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="999" />
+                                    </div>
+                                    <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
+                                        <input title="Probability" class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
+                                    </div>
+                                    <!--                                 <div class="flex-container flex1">
+                                        <textarea class="text_pole" name="comment" maxlength="2000" data-i18n="[placeholder]Entry Title/Memo" placeholder="Entry Title/Memo"></textarea>
+                                    </div> -->
+                                </div>
                             </span>
 
                             <!--                             <div class="world_entry_form_control flex1">
@@ -4029,7 +4033,7 @@
                                             (ignored if empty)
                                         </span>
                                     </small>
-                                    <small class="textAlignCenter">Optional Filter Keywords</small>
+                                    <small class="textAlignCenter">Optional Filter</small>
                                     <div class="flex-container flexFlowRow alignitemscenter">
                                         <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated list" maxlength="1000"></textarea>