Movable WI Editor

public/index.html

@@ -2066,9 +2066,11 @@
 
     </div>
     <div id="world_popup">
+
+        <div id="world_popupheader" class="fa-solid fa-grip drag-grabber"></div>
         <div id="world_popup_text">
             <div id="world_cross" class="fa-solid fa-circle-xmark"></div>
-            <div id="world_popup_header">
+            <div id="world_popup_header" class="flex-container flexGap5">
                 <!-- Consider changing logo to something else -->
                 <div class="world_popup_logo_block">
                     <img src="img/book2.png" id="world_logo">
@@ -2092,10 +2094,11 @@
 
         <div id="world_popup_bottom_holder">
             <div id="world_popup_new" class="menu_button">New Entry</div>
-            <span class="world_popup_expander">&nbsp;</span>
+            <!-- <span class="world_popup_expander">&nbsp;</span> -->
             <div id="world_popup_export" class="menu_button">Export</div>
             <div id="world_popup_delete" class="menu_button">Delete World</div>
         </div>
+
     </div>
     <div id="shadow_select_chat_popup">
         <div id="select_chat_popup">
@@ -2184,14 +2187,14 @@
                             <div class="world_entry_form_control">
                                 <label for="key">
                                     <h4>Keywords</h4>
-                                    <h5>Separate with commas</h5>
+                                    <h5>Split by commas</h5>
                                 </label>
                                 <textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="" maxlength="250"></textarea>
                             </div>
                             <div class="world_entry_form_control keysecondary">
                                 <label for="keysecondary">
-                                    <h4>Secondary Required Keywords</h4>
-                                    <h5>Separate with commas</h5>
+                                    <h4>2nd Keywords</h4>
+                                    <h5>Split by commas</h5>
                                 </label>
                                 <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="(secondary keywords here)" maxlength="250"></textarea>
                             </div>

public/scripts/RossAscends-mods.js

@@ -438,6 +438,7 @@ dragElement(document.getElementById("sheld"));
 dragElement(document.getElementById("left-nav-panel"));
 dragElement(document.getElementById("right-nav-panel"));
 dragElement(document.getElementById("avatar_zoom_popup"));
+dragElement(document.getElementById("world_popup"));
 
 
 

public/style.css

@@ -1549,6 +1549,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
     align-items: center;
     justify-content: center;
+    text-align: center;
 }
 
 .avatar_div .menu_button,
@@ -1672,7 +1673,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-color: var(--SmartThemeBlurTintColor);
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     max-width: var(--sheldWidth);
-    height: calc(100% - 40px);
+    max-height: calc(100% - 100px);
+    min-height: 100px;
+    min-width: 100px;
     position: absolute;
     margin-left: auto;
     margin-right: auto;
@@ -1680,18 +1683,19 @@ input[type=search]:focus::-webkit-search-cancel-button {
     right: 0;
     top: 40px;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-    padding: 4px;
+    padding: 10px;
     flex-direction: column;
     z-index: 3010;
     border-radius: 0 0 20px 20px;
+    overflow-y: auto;
 }
 
 #world_popup_bottom_holder {
-    padding: 0.5rem 0;
-    margin: 0 18px;
+    /*     padding: 0.5rem 0;
+    margin: 0 18px; */
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-evenly;
     align-items: center;
 }
 
@@ -1728,7 +1732,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-left: 18px;
+    /* margin-left: 18px; */
 }
 
 #world_popup_header h3 {
@@ -1825,7 +1829,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 .world_entry_form_control textarea {
     height: auto;
-    width: auto;
+    /* width: auto; */
     margin-top: 0;
 }
 
@@ -1833,6 +1837,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     flex-direction: row;
     align-items: center;
     margin-top: 5px;
+    flex-wrap: wrap;
 }
 
 .world_entry_form_control input[type=button] {
@@ -2294,8 +2299,10 @@ input[type="range"]::-webkit-slider-thumb {
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
     grid-template-rows: 50px 1fr 1fr 1fr 5fr;
     grid-gap: 10px;
+    min-height: 100px;
+    min-width: 100px;
     max-width: var(--sheldWidth);
-    height: calc(100svh - 40px);
+    max-height: calc(100svh - 100px);
     position: absolute;
     z-index: 3002;
     margin-left: auto;
@@ -2310,6 +2317,7 @@ input[type="range"]::-webkit-slider-thumb {
     padding-bottom: 30px;
     border: 1px solid var(--black30a);
     border-radius: 0 0 20px 20px;
+    overflow-y: auto;
 }
 
 #character_popup h3 {
@@ -3834,7 +3842,8 @@ body.movingUI .drag-grabber {
 body.movingUI #sheld,
 body.movingUI .drawer-content,
 body.movingUI #expression-holder,
-body.movingUI #avatar_zoom_popup {
+body.movingUI #avatar_zoom_popup,
+body.movingUI #world_popup {
     resize: both;
 }