change help panel to overlay whole page

This prevents clicks on things 'behind' the help

3 files changed, 22 insertions, 13 deletions

diff --git a/src/css/fms.css b/src/css/fms.css
index f4834a5..d7c6960 100644
--- a/src/css/fms.css
+++ b/src/css/fms.css
@@ -823,26 +823,28 @@
 /* help */
     #help {
         position: fixed;
-        margin: 20px 0px 0px 1em;
-        top: 40px;
-        left: 1em;
-        right:1em;
-        overflow: scroll;
+        top: 0px;
         display: none;
+        z-index: 3005;
+    }
+
+    #helpContent {
+        margin: 60px 1em 0px 1em;
         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;
+        background-color: rgb(255,255,255);
         overflow: auto;
     }
 
+    #help.android2 #helpContent {
+        margin-top: 0px;
+    }
+
     #help h1 {
         font-size: 1.5em;
         margin-top: 0px;
diff --git a/src/index.html b/src/index.html
index 5996a49..54d8c93 100644
--- a/src/index.html
+++ b/src/index.html
@@ -87,6 +87,8 @@
         <div class="radar"></div>
     </div>
     <div id="help">
+        <div id="helpContent">
+        </div>
     </div>
     <div id="dismiss">&gt;</div>
     <div id="display-help">
diff --git a/src/js/app.js b/src/js/app.js
index 539ad43..bc0bd8f 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -144,18 +144,19 @@ var tpl = {
 
         setupHelp: function() {
             var help = $('#help'),
+            helpContent = $('#helpContent'),
             viewWidth = $(window).width(),
             viewHeight = $(window).height(),
             helpHeight = viewHeight;
 
             var template = _.template( tpl.get('help') );
-            help.html(template());
+            helpContent.html(template());
 
             console.log( 'viewheight: ' + viewHeight );
             console.log( 'top: ' + top );
 
             if ( !help.hasClass('android2') ) {
-                help.height(helpHeight - 60);
+                helpContent.height(helpHeight - 60);
             }
             help.css('left', viewWidth);
             help.show();
@@ -182,7 +183,11 @@ var tpl = {
             if ( help.hasClass('android2') ) {
                 $('body').scrollTop(0);
             }
-            help.animate({left: viewWidth}, 400, 'swing', function() { $('#display-help').show(); $('#help').scrollTop(0); } );
+            var onHide = function() { 
+                $('#display-help').show();
+                $('#helpContent').scrollTop(0);
+            };
+            help.animate({left: viewWidth}, 400, 'swing', onHide );
         },
 
         helpViewed: function() {