Add a help panel and buttons to access it

Always available, slides in from the side (ish). Content
still a work in progress. Needs way to translate it.

For #92.

3 files changed, 164 insertions, 0 deletions

diff --git a/src/css/fms.css b/src/css/fms.css
index 637ca82..a52814b 100644
--- a/src/css/fms.css
+++ b/src/css/fms.css
@@ -819,3 +819,61 @@
         margin-left: -20px;
         list-style: none;
     }
+
+/* help */
+    #help {
+        position: fixed;
+        margin: 20px 0px 0px 1em;
+        padding: 0.5em;
+        top: 40px;
+        left: 1em;
+        right:1em;
+        display: none;
+        background-color: rgba(255,255,255,0.95);
+        z-index: 3005;
+        overflow: scroll;
+    }
+
+    #help h1 {
+        font-size: 1.5em;
+        margin-top: 0px;
+    }
+
+    #help dt {
+        font-weight: bold;
+        margin-bottom: 0.2em;
+    }
+
+    #help dd {
+        -webkit-margin-start: 0.5em;
+        margin-bottom: 1em;
+    }
+
+    #help a {
+        font-size: 1em;
+    }
+
+    #dismiss,
+    #display-help {
+        position: fixed;
+        display: none;
+        top: 60px;
+        right: 0px;
+        text-align: right;
+        padding: 10px 2px 10px 2px;
+        background-color: rgba(246,190,65,0.95);
+        color: grey;
+        font-weight: bold;
+        font-size: 2em;
+        z-index: 3005;
+    }
+
+    #display-help {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+
+    #dismiss {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
diff --git a/src/index.html b/src/index.html
index 2367298..c2adf68 100644
--- a/src/index.html
+++ b/src/index.html
@@ -86,5 +86,71 @@
     <div id="load-screen">
         <div class="radar"></div>
     </div>
+    <div id="help">
+        <h1>Frequently Asked Questions</h1>
+    <dl>
+        <dt>What is FixMyStreet?</dt>
+        <dd>FixMyStreet is a website to help people report, view,
+or discuss local problems they&rsquo;ve found to their local council by
+simply locating them on a map. It launched in early February
+2007.</dd>
+        <dt>How do I use this app?</dt>
+        <dd>The app will either locate you automatically or you can enter a postcode or location. You 
+        will see a map of that area on which you can view problems already reported in that area. To
+start reporting a problem scroll the map till the crosshair is over the location of the problem and
+press 'Report a problem here'.</dd>
+
+        <dt>What happens to the information I enter?</dt>
+        <dd><strong>All the information you enter will be sent to the council</strong>.
+            The title, category and details of your report will be displayed on the website. By default
+            your name will also be displayed on the website but you can choose to have this hidden.
+            We will <strong>never display your email or phone number on the site</strong>.</dd>
+
+        <dt>What if I want to remain anonymous?</dt>
+        <dd>You can opt not to have you name displayed on the website when entering your details. 
+        <strong>Your name, email and phone number, if you provided it, will always be sent to the council.</strong></dd>
+
+        <dt>What if I've included personal information in a report</dt>
+        <dd>To have a report edited email <a href="mailto:support@fixmystreet.com">support@fixmystreet.com</a> with 
+            details of the report.</dd>
+
+        <dt>What sort of problems should I report with FixMyStreet?</dt>
+        <dd>FixMyStreet is primarily for reporting things which are
+<strong>broken or dirty or damaged or dumped, and need fixing, cleaning
+or clearing</strong>.</dd>
+
+        <dt>What isn&rsquo;t FixMyStreet for?</dt>
+        <dd>FixMyStreet is not a way of getting in touch with your council for all
+        issues &ndash; please use FixMyStreet only for problems such as the above. We
+        often route problem reports via cleansing services or highways and so using
+        FixMyStreet for other matters may result in a delay in your report getting
+        to the right department.</dd>
+
+        <dt>Is it free?</dt>
+        <dd>The site and app are free to use, yes. FixMyStreet is run
+by a registered charity, though, so if you want to make a contribution, <a
+onclick="FMS.openExternal(event); return false;" href="https://secure.mysociety.org/donate/">please do</a>.
+    For more information see the <a onclick="FMS.openExternal(event); return false;" href="http://www.fixmystreet.com/faq/">website</a>.
+    </dd>
+
+        <dt>Who built FixMyStreet?</dt>
+        <dd>The site and this app was built by <a onclick="FMS.openExternal(event); return false;" href="http://www.mysociety.org/">mySociety</a>.</dd>
+        <dt>Thanks to...</dt>
+        <dd>
+<a onclick="FMS.openExternal(event); return false;" href="http://www.ordnancesurvey.co.uk">Ordnance Survey</a> (for the maps,
+UK postcodes, and UK addresses &ndash; data &copy; Crown copyright, all
+rights reserved, Ministry of Justice 100037819&nbsp;2008), the entire free software
+community (this particular project was brought to you by Phonegap, Backbone, jQuery mobile
+and the number 161.290) and <a
+onclick="FMS.openExternal(event); return false;" href="http://www.bytemark.co.uk/">Bytemark</a> (who kindly host all
+our servers).
+
+Let us know if we&rsquo;ve missed anyone.</dd>
+    </dl>
+    </div>
+    <div id="dismiss">&gt;</div>
+    <div id="display-help">
+        ?
+    </div>
     </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
index 232031a..596b6ff 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -141,6 +141,41 @@ var tpl = {
             return false;
         },
 
+        setupHelp: function() {
+            var help = $('#help'),
+            viewWidth = $(window).width(),
+            viewHeight = $(window).height(),
+            helpHeight = viewHeight;
+
+            console.log( 'viewheight: ' + viewHeight );
+            console.log( 'top: ' + top );
+
+            help.height(helpHeight - 60);
+            help.css('left', viewWidth);
+            help.show();
+        },
+
+        helpShow: function(e) {
+            if (e) {
+                e.preventDefault();
+            }
+            var help = $('#help');
+            $('#display-help').hide();
+            help.animate({left: 0}, function() { $('#dismiss').show(); } );
+        },
+
+        helpHide: function(e) {
+            if (e) {
+                e.preventDefault();
+            }
+            console.log('helpHoide');
+            var help = $('#help'),
+            viewWidth = $(window).width();
+
+            $('#dismiss').hide();
+            help.animate({left: viewWidth}, 400, 'swing', function() { $('#display-help').show(); } );
+        },
+
         initialize: function () {
             if ( this.initialized == 1 ) {
                 return this;
@@ -186,14 +221,19 @@ var tpl = {
                 $(document).on('ajaxStart', function() { $.mobile.loading('show'); } );
                 $(document).on('ajaxStop', function() { $.mobile.loading('hide'); } );
 
+                $('#display-help').on('vclick', function(e) { FMS.helpShow(e); } );
+                $('#dismiss').on('vclick', function(e) { FMS.helpHide(e); } );
+
                 FMS.allDrafts.comparator = function(a,b) { var a_date = a.get('created'), b_date = b.get('created'); return a_date === b_date ? 0 : a_date < b_date ? 1 : -1; };
                 FMS.allDrafts.fetch();
                 FMS.checkOnlineStatus();
                 FMS.loadCurrentDraft();
                 FMS.checkLoggedInStatus();
+                FMS.setupHelp();
 
                 Backbone.history.start();
                 navigator.splashscreen.hide();
+                $('#display-help').show();
             });
         }
     });