Finished style and interaction for mobile map

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

3 files changed, 26 insertions, 9 deletions

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index b753d8615..0e45fac77 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -369,7 +369,6 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                     margin: '0 -1em'
                 });
                 fixmystreet.map.updateSize();
-                // Also remove panzoom and permalink?
             } else {
                 this.mobile_full_screen_map(e);
             }
@@ -380,12 +379,17 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
 
     mobile_full_screen_map: function(e) {
         if ( fixmystreet.markers.getVisibility() ) {
-            $('#hide_pins_link').click();
+            //hide pins and update text
+            $('#hide_pins_link').click().text('Show pins');
+        }
+        var permalink_id;
+        if ($('#map_permalink').length) {
+            permalink_id = 'map_permalink';
         }
         fixmystreet.map.addControls([
             new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }),
-            new OpenLayers.Control.Permalink(),
-            new OpenLayers.Control.PanZoomFMS()
+            new OpenLayers.Control.Permalink(permalink_id),
+            new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' })
         ]);
         $('#map_box').css({
             zIndex: 0, position: 'fixed',
@@ -393,7 +397,18 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             width: '100%', height: '100%',
             margin: 0
         });
-        // Also need to move green banner, add close button, etc.
+        
+        // move and alter green banner, add close button
+        $('#map_box').append('<span id="close-mobile-map">Close</span>');
+        $('.big-green-banner').addClass('mobile-map-banner');
+        // hide site-logo (z-index madness), show sub_map_links
+        // and push map zoom down a notch
+        $('#site-logo').hide();
+        $('#sub_map_links').show();
+        $('#fms_pan_zoom').css({'top':'3.5em !important'});
+
+        // need to set up a click for #close-mobile-map somehow
+        
         fixmystreet.map.updateSize();
         fixmystreet.page = 'mobile-full-map';
         // To make sure the click control is on top
@@ -435,7 +450,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                 $('#form_category').change( form_category_onchange );
             }
         });
-        $('#side-form').show();
+        $('#side-form, #site-logo').show();
         /* For some reason on IOS5 if you use the jQuery show method it
          * doesn't display the JS validation error messages unless you do this
          * or you cause a screen redraw by changing the phone orientation.
@@ -444,7 +459,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             document.getElementById('side-form').style.display = 'block';
         }
         $('#side').hide();
-        $('#sub_map_links').hide();
+        //hide lots of the map ui on mobile
+        $('#sub_map_links, #fms_pan_zoom, #close-mobile-map', '.mobile').hide();
         heightFix('#report-a-problem-sidebar:visible', '.content', 26);
 
         // If we clicked the map somewhere inconvenient
diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js
index 48d753fa7..50f159635 100644
--- a/web/js/map-OpenStreetMap.js
+++ b/web/js/map-OpenStreetMap.js
@@ -9,7 +9,7 @@ function set_map_config(perm) {
         new OpenLayers.Control.Navigation(),
         new OpenLayers.Control.Permalink(permalink_id),
         new OpenLayers.Control.PermalinkFMS('osm_link', 'http://www.openstreetmap.org/'),
-        new OpenLayers.Control.PanZoomFMS()
+        new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' })
     ];
 }
 
diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
index b95eb84fb..478bf6527 100644
--- a/web/js/map-bing-ol.js
+++ b/web/js/map-bing-ol.js
@@ -8,13 +8,14 @@ function set_map_config(perm) {
             new OpenLayers.Control.Attribution(),
             new OpenLayers.Control.ArgParser()
         ];
+        $('#sub_map_links').hide();
     } else {
         fixmystreet.controls = [
             new OpenLayers.Control.Attribution(),
             new OpenLayers.Control.ArgParser(),
             new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }),
             new OpenLayers.Control.Permalink(permalink_id),
-            new OpenLayers.Control.PanZoomFMS()
+            new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' })
         ];
     }
     fixmystreet.map_type = OpenLayers.Layer.Bing;