Push the success map lower, closer to the map and scroll the user to …

…it on success (Sort of #9)
OSMBrasil · Feb 18, 2017 · f68214f · f68214f
1 parent ff2001b
commit f68214f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -38,7 +38,6 @@ <h2 data-i18n="app.title"></h2>
             <div class='col12' id='address-step'>
                 <div class='center pad2'>
                     <span id='instructions' data-i18n="step1.desc"></span>
-                    <p id="couldnt-find" style='display: none;' data-i18n="[html]step1.fail"></p>
                 </div>
                 <div class='col12'>
                     <div class='pad1'>
@@ -49,8 +48,13 @@ <h2 data-i18n="app.title"></h2>
                             Or <a id="use_my_location" href="#" onclick="return false">use my current location</a>.
                         </form>
                     </div>
-                    <br />
-                    <br />
+                </div>
+
+                <div class='center pad2'>
+                    <p id="couldnt-find" style='display: none;' data-i18n="[html]step1.fail"></p>
+                    <p id="success" style='display: none;'></p>
+                </div>
+                <div class='col12'>
                     <div class='col12' id='findme-map'></div>
                 </div>
             </div>

diff --git a/js/site.js b/js/site.js
@@ -46,6 +46,8 @@ function zoom_to_point(chosen_place, map, marker) {
     map.setView(chosen_place, 18, {animate: true});
 }
 $("#use_my_location").click(function (e) {
+    $("#couldnt-find").hide();
+    $("#success").hide();
     if ("geolocation" in navigator) {
         navigator.geolocation.getCurrentPosition(function(position) {
             var point = {
@@ -55,16 +57,21 @@ $("#use_my_location").click(function (e) {
 
             zoom_to_point(point, findme_map, findme_marker);
 
-            $('#instructions').html(successString);
+            $('#success').html(successString);
+            $('#success').show();
+            window.scrollTo(0, $('#success').position().top - 10);
             $('.step-2 a').attr('href', '#details');
+        }, function (error) {
+            $("#couldnt-find").show();
         });
     } else {
-      /* geolocation IS NOT available */
+      $("#couldnt-find").show();
     }
 });
 $("#find").submit(function(e) {
     e.preventDefault();
     $("#couldnt-find").hide();
+    $("#success").hide();
     var address_to_find = $("#address").val();
     if (address_to_find.length === 0) return;
     var qwarg = {
@@ -78,7 +85,9 @@ $("#find").submit(function(e) {
         if (data.length > 0) {
             zoom_to_point(data[0], findme_map, findme_marker);
 
-            $('#instructions').html(successString);
+            $('#success').html(successString);
+            $('#success').show();
+            window.scrollTo(0, $('#success').position().top - 10);
             $('.step-2 a').attr('href', '#details');
         } else {
             $("#couldnt-find").show();