Tweak help panel to work on Android 2

Android 2 doesn't support overflow: scroll so instead make the panel
full screen so you are scrolling what seems to be the screen. This means
we need to reset scrollTop before hiding it as otherwise the underlying
page is also scrolled.

2 files changed, 22 insertions, 5 deletions

diff --git a/src/css/fms.css b/src/css/fms.css
index a52814b..f4834a5 100644
--- a/src/css/fms.css
+++ b/src/css/fms.css
@@ -824,14 +824,23 @@
     #help {
         position: fixed;
         margin: 20px 0px 0px 1em;
-        padding: 0.5em;
         top: 40px;
         left: 1em;
         right:1em;
+        overflow: scroll;
         display: none;
-        background-color: rgba(255,255,255,0.95);
+        padding: 0.5em;
+        background-color: rgb(255,255,255);
         z-index: 3005;
-        overflow: scroll;
+    }
+
+    #help.android2 {
+        position: absolute;
+        margin: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        overflow: auto;
     }
 
     #help h1 {
diff --git a/src/js/app.js b/src/js/app.js
index f33d0c8..74db8fe 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -151,7 +151,9 @@ var tpl = {
             console.log( 'viewheight: ' + viewHeight );
             console.log( 'top: ' + top );
 
-            help.height(helpHeight - 60);
+            if ( !help.hasClass('android2') ) {
+                help.height(helpHeight - 60);
+            }
             help.css('left', viewWidth);
             help.show();
         },
@@ -162,7 +164,7 @@ var tpl = {
             }
             var help = $('#help');
             $('#display-help').hide();
-            help.animate({left: 0}, function() { $('#dismiss').show(); } );
+            help.animate({left: 0}, function() { $('#help').show(); $('#dismiss').show(); } );
         },
 
         helpHide: function(e) {
@@ -174,6 +176,9 @@ var tpl = {
             viewWidth = $(window).width();
 
             $('#dismiss').hide();
+            if ( help.hasClass('android2') ) {
+                $('body').scrollTop(0);
+            }
             help.animate({left: viewWidth}, 400, 'swing', function() { $('#display-help').show(); $('#help').scrollTop(0); } );
         },
 
@@ -196,6 +201,9 @@ var tpl = {
                 if ( typeof device !== 'undefined' && device.platform === 'Android' ) {
                     $.mobile.defaultPageTransition = 'none';
                     FMS.isAndroid = true;
+                    if ( parseInt(device.version) < 3 ) {
+                        $('#help').addClass('android2');
+                    }
                 }
 
                 if ( typeof device !== 'undefined' && device.platform === 'iOS' ) {