Resize editor overlay and its textarea on page resize

Signed-off-by: Maximilian Krög <maxi_kroeg@web.de>
MoonE · Sep 20, 2023 · 61ab416 · 61ab416
1 parent 29123af
commit 61ab416
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 25 deletions.
diff --git a/js/src/gis_data_editor.js b/js/src/gis_data_editor.js
@@ -162,30 +162,15 @@ function loadGISEditor (value, field, type, inputName) {
  */
 // eslint-disable-next-line no-unused-vars
 function openGISEditor () {
-    // Center the popup
-    var windowWidth = document.documentElement.clientWidth;
-    var windowHeight = document.documentElement.clientHeight;
-    var popupWidth = windowWidth * 0.9;
-    var popupHeight = windowHeight * 0.9;
-    var popupOffsetTop = windowHeight / 2 - popupHeight / 2;
-    var popupOffsetLeft = windowWidth / 2 - popupWidth / 2;
-
-    var $gisEditor = $('#gis_editor');
-    var $background = $('#popup_background');
-
-    $gisEditor.css({ 'top': popupOffsetTop, 'left': popupOffsetLeft, 'width': popupWidth, 'height': popupHeight });
-    $background.css({ 'opacity' : '0.7' });
-
-    $gisEditor.append(
-        '<div id="gis_data_editor">' +
-        '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
-        themeImagePath + 'ajax_clock_small.gif" alt="">' +
-        '</div>'
-    );
-
-    // Make it appear
-    $background.fadeIn('fast');
-    $gisEditor.fadeIn('fast');
+    $('#popup_background').fadeIn('fast');
+    $('#gis_editor')
+        .append(
+            '<div id="gis_data_editor">' +
+            '<img class="ajaxIcon" id="loadingMonitorIcon" src="' +
+            themeImagePath + 'ajax_clock_small.gif" alt="">' +
+            '</div>'
+        )
+        .fadeIn('fast');
 }
 
 /**

diff --git a/templates/gis_data_editor_form.twig b/templates/gis_data_editor_form.twig
@@ -240,7 +240,7 @@
             <p>
                 {% trans 'Choose "GeomFromText" from the "Function" column and paste the string below into the "Value" field.' %}
             </p>
-            <textarea id="gis_data_textarea" cols="95" rows="5">{{ result }}</textarea>
+            <textarea id="gis_data_textarea" rows="5">{{ result }}</textarea>
         </div>
     </div>
 </form>
diff --git a/themes/bootstrap/scss/_common.scss b/themes/bootstrap/scss/_common.scss
@@ -1004,6 +1004,7 @@ select.invalid_value,
   top: 0;
   left: 0;
   background: $black;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

diff --git a/themes/bootstrap/scss/_gis.scss b/themes/bootstrap/scss/_gis.scss
@@ -8,6 +8,11 @@ a.close_gis_editor {
 #gis_editor {
   display: none;
   position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 40px;
   z-index: 1001;
   overflow-y: auto;
   overflow-x: hidden;
@@ -19,6 +24,8 @@ a.close_gis_editor {
 
 #gis_data_textarea {
   height: 6em;
+  resize: vertical;
+  width: 100%;
 }
 
 #gis_data_editor {

diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
@@ -1223,6 +1223,7 @@ input {
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }

diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
@@ -1000,6 +1000,7 @@ select.invalid_value,
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }