Remove iframes max-width;Add div wrapper around iframes;Adapt popup height to content with flexbox

This commit is contained in:
Binnette 2020-03-17 23:59:17 +01:00
parent f86dca9ac1
commit 345283782c
4 changed files with 15 additions and 11 deletions

View file

@ -589,7 +589,7 @@ input[type=hidden].blur + .button {
top: 0; top: 0;
bottom: 0; bottom: 0;
right: -400px; right: -400px;
padding: 0 20px 40px 20px; padding: 0 20px;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
overflow-x: auto; overflow-x: auto;
z-index: 1010; z-index: 1010;

View file

@ -81,9 +81,9 @@ L.Util.toHTML = function (r) {
r = r.replace(/\[\[([^|]*?)\|(.*?)\]\]/g, '<a href="$1">$2</a>'); r = r.replace(/\[\[([^|]*?)\|(.*?)\]\]/g, '<a href="$1">$2</a>');
// iframe // 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?[^ |{]*)}}}/g, '<div><iframe frameborder="0" src="$1" width="100%" height="300px"></iframe></div>');
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)?}}}/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, '<iframe frameborder="0" src="$1" width="$4px" height="$2px"></iframe>'); 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 // images
r = r.replace(/{{([^\]|]*?)}}/g, '<img src="$1">'); r = r.replace(/{{([^\]|]*?)}}/g, '<img src="$1">');

View file

@ -94,7 +94,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
renderBody: function () { renderBody: function () {
var template = this.feature.getOption('popupContentTemplate'), var template = this.feature.getOption('popupContentTemplate'),
container = L.DomUtil.create('div', ''), container = L.DomUtil.create('div', 'umap-popup-container'),
content = '', properties, center; content = '', properties, center;
properties = this.feature.extendedProperties(); properties = this.feature.extendedProperties();
// Resolve properties inside description // Resolve properties inside description

View file

@ -1275,10 +1275,16 @@ a.add-datalayer:hover,
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin-bottom: 14px; margin-bottom: 4px;
display: flex;
} }
.umap-popup-content iframe { .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 { .leaflet-popup-content h3 {
margin-bottom: 0; margin-bottom: 0;
@ -1295,8 +1301,7 @@ a.add-datalayer:hover,
.leaflet-contextmenu-icon { .leaflet-contextmenu-icon {
display: none; display: none;
} }
.umap-popup-content img, .umap-popup-content img {
.umap-popup-content iframe {
max-width: 300px !important; max-width: 300px !important;
} }
.umap-popup-large iframe, .umap-popup-large iframe,
@ -1304,8 +1309,7 @@ a.add-datalayer:hover,
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */ /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
max-width: 500px !important; max-width: 500px !important;
} }
#umap-ui-container .umap-popup-content img, #umap-ui-container .umap-popup-content img {
#umap-ui-container .umap-popup-content iframe {
max-width: 400px !important; max-width: 400px !important;
} }
.umap-georss-link .popup-title { .umap-georss-link .popup-title {