diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index b6b3291d..9309f1e3 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -32,11 +32,12 @@ var defaultValues = { }, layouts: { popup: - '
' + + '
' + '{% if object.popupDetails or object.details %}
{{ object.popupDetails|default(object.details) }}
{% endif %}' + '{% if object.popupDescription or object.description %}
{{ object.popupDescription|default(object.description) }}
{% endif %}' + '{% if object.popupTitle or object.title %}
{{ object.popupTitle|default(object.title) }}
{% endif %}' + - '
', + '
' + + '
{{ object.popupBody|default(object.body) }}
', list: '' + '
' + @@ -544,10 +545,11 @@ CategoryOverpass.prototype.notifyPopupClose = function (object, popup) { CategoryOverpass.prototype.updatePopupContent = function (object, popup) { if (this.popupBodyTemplate) { - var popupBody = popup._contentNode.getElementsByClassName('popupBody') - if (!popupBody.length) { + var popupBody = popup._contentNode.querySelector('#popupBody') + if (!popupBody) { popupBody = document.createElement('div') popupBody.className = 'popupBody' + popupBody.id = 'popupBody' popup._contentNode.appendChild(popupBody) } diff --git a/style.css b/style.css index a7487b4f..fcc06956 100644 --- a/style.css +++ b/style.css @@ -295,6 +295,32 @@ a:active { color: red; } +.leaflet-popup-content-wrapper { + padding: 0; +} +.leaflet-popup-content { + margin: 0; + overflow: auto; +} +.leaflet-popup-content > .header { + background: #dfdfdf; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom: 1px solid #afafaf; + padding: 0.5em 0.5em 0.25em 0.5em; + margin-bottom: 0.5em; +} +.leaflet-popup-content > .header::after { + content: ''; + clear: both; + display: table; +} +.leaflet-popup-content > .popupBody { + padding: 0 0.5em; +} +.leaflet-popup-content > .popup-footer { + padding: 0.5em 0.5em 0.25em 0.5em; +} .leaflet-popup-content .description { display: block; font-style: italic;