From 345283782c45e3f565132f1ad0c2fa5c4b7d4043 Mon Sep 17 00:00:00 2001
From: Binnette <binnette@gmail.com>
Date: Tue, 17 Mar 2020 23:59:17 +0100
Subject: [PATCH] Remove iframes max-width;Add div wrapper around iframes;Adapt
 popup height to content with flexbox

---
 umap/static/umap/base.css         |  2 +-
 umap/static/umap/js/umap.core.js  |  6 +++---
 umap/static/umap/js/umap.popup.js |  2 +-
 umap/static/umap/map.css          | 16 ++++++++++------
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index ab8fa7e1..3b2608c6 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -589,7 +589,7 @@ input[type=hidden].blur + .button {
     top: 0;
     bottom: 0;
     right: -400px;
-    padding: 0 20px 40px 20px;
+    padding: 0 20px;
     border-left: 1px solid #ddd;
     overflow-x: auto;
     z-index: 1010;
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 70edfb8f..9e8d6bf1 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -81,9 +81,9 @@ L.Util.toHTML = function (r) {
     r = r.replace(/\[\[([^|]*?)\|(.*?)\]\]/g, '<a href="$1">$2</a>');
 
     // iframe
-    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)}}}/g, '<iframe frameborder="0" src="$1" width="100%" height="300px"></iframe>');
-    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?}}}/g, '<iframe frameborder="0" src="$1" width="100%" height="$2px"></iframe>');
-    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?\*(\d*)(px)?}}}/g, '<iframe frameborder="0" src="$1" width="$4px" height="$2px"></iframe>');
+    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)}}}/g, '<div><iframe frameborder="0" src="$1" width="100%" height="300px"></iframe></div>');
+    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?}}}/g, '<div><iframe frameborder="0" src="$1" width="100%" height="$2px"></iframe></div>');
+    r = r.replace(/{{{(h_t_t_ps?[^ |{]*)\|(\d*)(px)?\*(\d*)(px)?}}}/g, '<div><iframe frameborder="0" src="$1" width="$4px" height="$2px"></iframe></div>');
 
     // images
     r = r.replace(/{{([^\]|]*?)}}/g, '<img src="$1">');
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 3b213e55..ce8de7c0 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -94,7 +94,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
 
     renderBody: function () {
         var template = this.feature.getOption('popupContentTemplate'),
-            container = L.DomUtil.create('div', ''),
+            container = L.DomUtil.create('div', 'umap-popup-container'),
             content = '', properties, center;
         properties = this.feature.extendedProperties();
         // Resolve properties inside description
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 8642d0d6..b99c47f6 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1275,10 +1275,16 @@ a.add-datalayer:hover,
     flex-grow: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    margin-bottom: 14px;
+    margin-bottom: 4px;
+    display: flex;
 }
 .umap-popup-content iframe {
-    min-width: 300px;
+    min-width: 310px;
+}
+.umap-popup-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 .leaflet-popup-content h3 {
     margin-bottom: 0;
@@ -1295,8 +1301,7 @@ a.add-datalayer:hover,
 .leaflet-contextmenu-icon {
     display: none;
 }
-.umap-popup-content img,
-.umap-popup-content iframe {
+.umap-popup-content img {
     max-width: 300px !important;
 }
 .umap-popup-large iframe,
@@ -1304,8 +1309,7 @@ a.add-datalayer:hover,
     /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
     max-width: 500px !important;
 }
-#umap-ui-container .umap-popup-content img,
-#umap-ui-container .umap-popup-content iframe {
+#umap-ui-container .umap-popup-content img {
     max-width: 400px !important;
 }
 .umap-georss-link .popup-title {