From 91027507708644b853f5b90daf3fbb9ebe3e9501 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Thu, 21 May 2020 02:59:29 +0200
Subject: [PATCH] Improve popup layout a bit

---
 src/css/map.css | 9 +++++++--
 src/index.html  | 6 +++---
 src/js/map.js   | 9 +--------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/css/map.css b/src/css/map.css
index 141bc0e..d524791 100644
--- a/src/css/map.css
+++ b/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;
     }
 }
 
diff --git a/src/index.html b/src/index.html
index 1e9ae35..c964053 100644
--- a/src/index.html
+++ b/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}}
diff --git a/src/js/map.js b/src/js/map.js
index 23ac5c9..4b691b1 100644
--- a/src/js/map.js
+++ b/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, "/");
     })
 });