Add a scrollbar when a note gets too big

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 876aeb193d46924a670ee0175cf8881964ddcc02..154c6026df47f279cf3d92eab7bba7f8f1daaa7d 100644 (file)
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -61,7 +61,7 @@ $(document).ready(function () {
         opacity: 0.7
       });
 
-      marker.addTo(noteLayer).bindPopup(popupContent);
+      marker.addTo(noteLayer).bindPopup(popupContent, popupOptions());
     }
 
     return marker;
@@ -93,6 +93,12 @@ $(document).ready(function () {
     });
   };
 
+  function popupOptions() {
+    var mapSize = map.getSize();
+
+    return { maxHeight: mapSize.y * 2 / 3 };
+  }
+
   function createPopupContent(marker, properties) {
     var content = $(JST["templates/notes/show"]({ note: properties }));
 
@@ -173,7 +179,7 @@ $(document).ready(function () {
       createNote(marker, e.target.form, $(e.target).data("url"));
     });
 
-    marker.addTo(noteLayer).bindPopup(popupContent[0]).openPopup();
+    marker.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
 
     $(".leaflet-popup-close-button").on("click.close", function (e) {
       map.removeLayer(marker);

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index d0839844c16487c5a6b94f3bba72436d562b876c..4c7012f2caa2204e946743fdbc998d32e68c5088 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -474,6 +474,12 @@ body.site-export #tabnav a#exportanchor {
   left: 10px !important;
 }
 
+.leaflet-popup-scrolled {
+  padding-right: 20px;
+  border-bottom: 0px !important;
+  border-top: 0px !important;
+}
+
 /* Rules for edit menu */
 
 .menuicon {