From d1f09b0a81f9eccdbd0e11c6309867a312a28c4a Mon Sep 17 00:00:00 2001
From: =?utf8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 10 Sep 2023 11:47:46 +0200
Subject: [PATCH] Resize editor overlay and its textarea on page resize
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maximilian Krög <maxi_kroeg@web.de>
---
 js/src/gis_data_editor.js           | 33 +++++++++------------------------
 templates/gis_data_editor_form.twig |  2 +-
 themes/bootstrap/scss/_common.scss  |  1 +
 themes/bootstrap/scss/_gis.scss     |  7 +++++++
 themes/metro/scss/_common.scss      |  1 +
 themes/original/scss/_common.scss   |  1 +
 themes/pmahomme/scss/_common.scss   |  1 +
 7 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/js/src/gis_data_editor.js b/js/src/gis_data_editor.js
index d7a61e74b0..626c29fb16 100644
--- 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
index 2d1a28c46b..21af9e15de 100644
--- 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
index 1712da2d9d..01bee8b269 100644
--- 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
index c95ff10b96..916ce1dc77 100644
--- 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
index 1fa38f7a38..0a5593f597 100644
--- 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
index 26029d5531..149458583e 100644
--- 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;
 }
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
index 6514f389b5..614f2e9213 100644
--- a/themes/pmahomme/scss/_common.scss
+++ b/themes/pmahomme/scss/_common.scss
@@ -1190,6 +1190,7 @@ input#import_merge {
   top: 0;
   left: 0;
   background: #000;
+  opacity: 0.7;
   z-index: 1000;
   overflow: hidden;
 }
-- 
2.11.4.GIT