Merge pull request #765 from umap-project/panel-iframe
Adapt iframe and image width when in right panel
This commit is contained in:
commit
db33222609
4 changed files with 17 additions and 9 deletions
|
@ -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;
|
||||||
|
|
|
@ -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">');
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -1277,10 +1277,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;
|
||||||
|
@ -1297,8 +1303,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,
|
||||||
|
@ -1306,6 +1311,9 @@ 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 {
|
||||||
|
max-width: 400px !important;
|
||||||
|
}
|
||||||
.umap-georss-link .popup-title {
|
.umap-georss-link .popup-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue