Improve popup layout a bit

src/css/map.css

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

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="text">Locatie: {{address}}<br />
-        {{#if period.start}}
-          {{date period.start}} tot {{date period.end}}
+      <div class="location">Locatie: {{address}}</div>
+      <div class="period">{{#if period.start}}
+          Periode: {{date period.start}} tot {{date period.end}}
         {{else}}
           Open gedurende het hele jaar.
         {{/if}}

src/js/map.js

@@ -156,14 +156,7 @@ $(document).ready(function() {
     }).addTo(map);
 
 
-    var monthNames = ["jan.", "feb.", "mrt.", "apr.", "mei", "juni", "juli", "aug.", "sep.", "okt.", "nov.", "dec."];
     Handlebars.registerHelper("date", function (ddmyyyy) {
-        var parts = ddmyyyy.split("-");
-
-        var date = parts[0];
-        var month = monthNames[parts[1] - 1];
-        var year = parts[2];
-
-        return date + " " + month + " " + year;
+        return ddmyyyy.replace(/-/g, "/");
     })
 });