Re-style popups: grey header and other things

src/CategoryOverpass.js

@@ -32,11 +32,12 @@ var defaultValues = {
   },
   layouts: {
     popup:
-      '<div class="content">' +
+      '<div class="header">' +
       '{% if object.popupDetails or object.details %}<div class="details">{{ object.popupDetails|default(object.details) }}</div>{% endif %}' +
       '{% if object.popupDescription or object.description %}<div class="description">{{ object.popupDescription|default(object.description) }}</div>{% endif %}' +
       '{% if object.popupTitle or object.title %}<div class="title">{{ object.popupTitle|default(object.title) }}</div>{% endif %}' +
-      '</div>',
+      '</div>' +
+      '<div class="popupBody">{{ object.popupBody|default(object.body) }}</div>',
     list:
       '<a href="{{ object.appUrl|default("#") }}">' +
       '<div class="marker">' +
@@ -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)
     }
 

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;