From 651d598b9c1f04106f7901c96dface69cbcba410 Mon Sep 17 00:00:00 2001
From: feliciaan <feliciaan@de-palmenaer.eu>
Date: Wed, 10 Dec 2014 22:26:09 +0100
Subject: [PATCH] Added some responsivity

---
 map.css  | 49 ++++++++++++++++++++++++++++++++++++++++++++++---
 map.html |  9 +++++----
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/map.css b/map.css
index d18681a..de7b3eb 100644
--- a/map.css
+++ b/map.css
@@ -15,8 +15,15 @@ html, body {
   border-radius: 0px;
 }
 
+
 .leaflet-popup-content-wrapper {
-  width: 400px;
+  width: 600px;
+  max-height: 400px;
+  overflow-y:auto
+}
+
+.leaflet-popup-content {
+    width:auto !important;
 }
 
 h4 {
@@ -27,14 +34,20 @@ h4 {
 table {
     padding-bottom: 10px;
     border-spacing: 0;
+    width: 100%
 }
 
-tr td:first-child {
+.desktop tr td {
+    padding-right: 5px;
+    width: 75;
+}
+
+.mobile tr td:first-child {
   padding: 0;
   padding-right: 10px;
 }
 
-.table tr:nth-child(2n) {
+.mobile tr:nth-child(2n) {
     background: rgb(244,244,244);
 }
 
@@ -50,3 +63,33 @@ tr td:first-child {
     top: 15px;
     right: 15px;
 }
+
+
+.mobile {
+    display: none;
+}
+
+@media screen and (max-width: 1000px) {
+    .leaflet-popup-content-wrapper {
+        width: 250px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: block;
+        width: 213px;
+    }
+
+    h3, .text {
+        max-width: 150px;
+    }
+}
+
+@media screen and (max-height: 400px) {
+    .leaflet-popup-content-wrapper {
+        max-height: 150px;
+    }
+}
diff --git a/map.html b/map.html
index 3e6aabd..9645cb2 100644
--- a/map.html
+++ b/map.html
@@ -16,11 +16,12 @@
   <script id="popup-template" type="text/x-handlebars-template">
     <div id="resto-popup">
       <h3>{{name}} ({{capacity}} pl.)</h3>
-      Locatie: {{address}}<br />
-      Van {{period.start}} tot {{period.end}}<br />
       <img src="{{type}}.png" class="type">
+      <div class="text">Locatie: {{address}}<br />
+      Van {{period.start}} tot {{period.end}}
+      </div>
       <h4>Openingsuren</h4>
-      <table>
+      <table class="desktop">
       <tr>
       <td>Maandag</td>
         <td>Dinsdag</td>
@@ -40,7 +41,7 @@
         <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
       </tr>
       </table>
-      <table class="table">
+      <table class="mobile">
         <tr>
           <td>Maandag</td>
           <td>{{#if hours.monday}}{{hours.monday}}{{else}}Gesloten{{/if}}</td>