src/css/map.css

@@ -19,7 +19,6 @@ html, body {
     width: 600px;
     max-height: 400px;
     overflow-y: auto;
-    overflow-wrap: anywhere;
 }
 
 .leaflet-popup-content {
@@ -36,10 +35,6 @@ h4 {
     margin-bottom: 5px;
 }
 
-.location, .period {
-    margin-bottom: 3px;
-}
-
 table {
     padding-bottom: 10px;
     border-spacing: 0;
@@ -121,8 +116,8 @@ table {
         width: 213px;
     }
 
-    .location, .period {
-        margin-bottom: 8px;
+    h3, .text {
+        max-width: 150px;
     }
 }
 

src/index.html

@@ -35,9 +35,9 @@
     <div id="resto-popup">
       <h3>{{name}} ({{capacity}} pl.)</h3>
       <img src="img/{{type}}.png" class="type">
-      <div class="location">Locatie: {{address}}</div>
-      <div class="period">{{#if period.start}}
-          Periode: {{date period.start}} tot {{date period.end}}
+      <div class="text">Locatie: {{address}}<br />
+        {{#if period.start}}
+          {{date period.start}} tot {{date period.end}}
         {{else}}
           Open gedurende het hele jaar.
         {{/if}}

src/js/map.js

@@ -87,10 +87,10 @@ $(document).ready(function() {
 
                     // get the element that the mouse hovered onto
                     var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
-                    var ancestor = this._findAncestorWithClass(target, "leaflet-popup");
+                    var parent = this._getParent(target, "leaflet-popup");
 
                     // check to see if the element is a popup, and if it is this marker's popup
-                    if (ancestor && ancestor === this._popup._container)
+                    if (parent == this._popup._container)
                         return true;
 
                     this.openPopup();
@@ -103,7 +103,7 @@ $(document).ready(function() {
                     var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
 
                     // check to see if the element is a popup
-                    if (this._findAncestorWithClass(target, "leaflet-popup")) {
+                    if (this._getParent(target, "leaflet-popup")) {
                         L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
                         return true;
                     }
@@ -122,24 +122,26 @@ $(document).ready(function() {
             var target = e.toElement || e.relatedTarget;
 
             // check to see if the element is a popup
-            if (this._findAncestorWithClass(target, "leaflet-popup"))
+            if (this._getParent(target, "leaflet-popup"))
                 return true;
 
             // check to see if the marker was hovered back onto
-            if (target === this._icon)
+            if (target == this._icon)
                 return true;
 
             this.closePopup();
         },
 
-        _findAncestorWithClass: function(element, className) {
-            while (element) {
-                if (element.className && L.DomUtil.hasClass(element, className))
-                    return element;
-                element = element.parentNode;
+        _getParent: function(element, className) {
+            var parent = element.parentNode;
+
+            while (parent) {
+                if (parent.className && L.DomUtil.hasClass(parent, className))
+                    return parent;
+                parent = parent.parentNode;
             }
 
-            return null;
+            return false;
         }
     });
 
@@ -156,7 +158,14 @@ $(document).ready(function() {
     }).addTo(map);
 
 
+    var monthNames = ["jan.", "feb.", "mrt.", "apr.", "mei", "juni", "juli", "aug.", "sep.", "okt.", "nov.", "dec."];
     Handlebars.registerHelper("date", function (ddmyyyy) {
-        return ddmyyyy.replace(/-/g, "/");
+        var parts = ddmyyyy.split("-");
+
+        var date = parts[0];
+        var month = monthNames[parts[1] - 1];
+        var year = parts[2];
+
+        return date + " " + month + " " + year;
     })
 });