Merge pull request #765 from umap-project/panel-iframe

Adapt iframe and image width when in right panel
This commit is contained in:
Yohan Boniface 2020-03-18 07:37:07 +01:00 committed by GitHub
commit db33222609
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 9 deletions

View file

@ -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;

View file

@ -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">');

View file

@ -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

View file

@ -1277,10 +1277,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;
@ -1297,8 +1303,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,
@ -1306,6 +1311,9 @@ 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 {
max-width: 400px !important;
}
.umap-georss-link .popup-title {
text-align: center;
}