Map should be better displayed on small screens, particularly legends

app/assets/javascripts/maps.js.coffee

@@ -4,6 +4,8 @@ $(document).on 'turbolinks:load', ->
   idx = 0
   $('#map.list').each ->
     map = L.map 'map'
+    # Set some initial bounds, in case nothing else is displayed
+    map.fitBounds [ [60, -20], [30, 30] ]
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
@@ -21,27 +23,29 @@ $(document).on 'turbolinks:load', ->
         url += location.search
 
       $.getJSON url, (json) ->
-        if json
-          layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
-            pointToLayer: (feature, latlng) ->
-              # Marker with the proper icon
-              marker = L.AwesomeMarkers.icon
-                prefix: 'fa',
-                icon: feature.properties.icon || 'calendar',
-                markerColor: markerColor
-              L.marker latlng, icon: marker
-            ,
-            onEachFeature: (feature, layer) ->
-              # Does this feature have a property named popupContent?
-              if (feature.properties && feature.properties.popupContent)
-                layer.bindPopup feature.properties.popupContent
+        # Display the layer only if some items are present
+        return unless json?.length
 
-          map.addLayer layer
-          controls.addOverlay layer, text + ' - ' + json.length
+        layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
+          pointToLayer: (feature, latlng) ->
+            # Marker with the proper icon
+            marker = L.AwesomeMarkers.icon
+              prefix: 'fa',
+              icon: feature.properties.icon || 'calendar',
+              markerColor: markerColor
+            L.marker latlng, icon: marker
+          onEachFeature: (feature, layer) ->
+            # Does this feature have a property named popupContent?
+            if (feature.properties && feature.properties.popupContent)
+              layer.bindPopup feature.properties.popupContent
 
-          if (/maps\//.test(location.href) || /maps.json/.test url) && layer.getBounds()._northEast && layer.getBounds()._southWest
-            # Automatic focus to all displayed events
-            map.fitBounds layer.getBounds()
+        map.addLayer layer
+        controls.addOverlay layer, text + ' - ' + json.length
+
+        if (/maps\//.test(location.href) || /maps.json/.test url) &&
+            layer.getBounds()._northEast && layer.getBounds()._southWest
+          # Automatic focus to all displayed events
+          map.fitBounds layer.getBounds()
 
   $('#map.event, #map.orga').each ->
     coord = [$(this).data('latitude'), $(this).data('longitude')]

app/assets/stylesheets/maps.sass

@@ -2,6 +2,8 @@
   height: 60em
   box-shadow: 0 0 1em SteelBlue
   transition: none
+  padding-left: 4em
+  list-style-type: none
   *
     /* Popup are better displayed with this: */
     max-width: initial
@@ -10,8 +12,11 @@
     height: 20em
 
   li
+    a
+      display: inline-block
     .awesome-marker
       display: inline-block !important
+      position: relative !important
 
 .tags #map
   width: 40%
@@ -19,9 +24,8 @@
   margin: 1.6em 2%
   display: inline-block
 
-// Left align the map controls place in the top right corner
+// Left align the map controls placed in the top right corner
 section.leaflet-control-layers-list label
-  text-align: left
   .awesome-marker
     height: auto !important
     display: inline-block !important

app/assets/stylesheets/mobile.sass

@@ -38,7 +38,7 @@
     nav
       display: none
     img.logo
-      margin-right: 0
+      max-width: 12vw
 
   form#orga_search
     display: none
@@ -124,6 +124,10 @@
     .radios
       margin-left: auto
 
+  #map section
+    input, .awesome-marker
+      display: none !important
+
   body.mce-content-body
     padding: 1px 0
   .mce-btn-group .mce-btn

app/views/maps/index.html.haml

@@ -15,5 +15,5 @@
       = link_to map_path kind.name, format: :json do
         .awesome-marker{ class: "awesome-marker-icon-#{cs[idx % cs.length]}" }
           %i.icon-white.fa{ class: "fa-#{kind.icon}" }
-        = Kind.human_attribute_name("name_#{kind.name}")
+        = Kind.human_attribute_name "name_#{kind.name}"
       - idx += 1