Merge branch 'gh-pages' into slight_improve_ranking

7RST1 · Jul 20, 2018 · 04e355a · 04e355a
2 parents 4c71402 + 686b166
commit 04e355a
Show file tree

Hide file tree

Showing 9 changed files with 1,098 additions and 26 deletions.
diff --git a/css/site.css b/css/site.css
@@ -81,4 +81,15 @@ button {
 footer {
     margin-top: 10em;
     font-size: 80%;
+}
+
+@media only screen and (max-width:640px) {
+    .logo {
+        display: block;
+        float: none;
+        margin: auto;
+    }
+    .app-title {
+        text-align: center;
+    }
 }
diff --git a/css/style.css b/css/style.css
@@ -212,6 +212,9 @@ input[type=text] {
   -webkit-border-radius:1px;
           border-radius:1px;
   }
+.select2-search__field {
+  width: 100% !important;
+}
 textarea,
 input[type=text] {
   background-color:#fff;

diff --git a/index.html b/index.html
@@ -15,22 +15,24 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.7.4/i18next.min.js"></script>
+
+        <meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     </head>
     <body>
         <div class='container pad2 margin2 col8'>
-            <div class='pad2'>
-                <img src='img/osm.png' class='fl mr' alt='OpenStreetMap' />
-                <h2 data-i18n="app.title">On OpenStreetMap</h2>
-                <p data-i18n="[html]app.desc">OpenStreetMap is an open, global map used by people around the world to navigate and find local businesses.</p>
-                <p>It's easy and free to add your business to the map!</p>
+            <div class="pad2">
+                <img src="img/osm.png" class="fl mr logo" alt="OpenStreetMap" />
+                <h2 class="app-title" data-i18n="app.title">On OpenStreetMap</h2>
+                <p data-i18n="[html]app.desc">OpenStreetMap is an open, global map used by people around the world to navigate and find local businesses.
+                <br/>It's easy and free to add your business to the map!</p>
             </div>
 
             <div class='col12 on-1 steps clearfix'>
                 <div class='col4 center pad1 step-1'>
                     <a href='#location' data-i18n="step1.title"></a>
                 </div>
                 <div class='col4 center pad1 step-2'>
-                    <a href='#details' data-i18n="step2.title"></a>
+                    <strong onclick="check_coordinates()" data-i18n="step2.title"></strong>
                 </div>
                 <div class='col4 center pad1 step-3'>
                     <strong data-i18n="step3.title"></strong>
@@ -55,6 +57,9 @@ <h2 data-i18n="app.title">On OpenStreetMap</h2>
                 <div class='center pad2'>
                     <p id="couldnt-find" style='display: none;' data-i18n="[html]step1.fail"></p>
                 </div>
+                <div class='center pad2'>
+                    <p id="invalid-location" style='display: none;' data-i18n="[html]step1.invalid-location"></p>
+                </div>
                 <div class='col12'>
                     <div class='col12' id='findme-map'></div>
                     <p id="success" class="center" style='display: none; margin-bottom: 500px;'></p>
@@ -95,7 +100,7 @@ <h4><button class='col12' id='collect-data-done' data-i18n="step2.done"></button
                 </p>
             </div>
 
-            <footer><p class="center" data-i18n="[html]app.footer">Source code available on <a href="https://github.com/osmlab/onosm.org">Github</p></footer>
+            <footer><p class="center" data-i18n="[html]app.footer">Source code available on <a href="https://github.com/osmlab/onosm.org">Github</a></p></footer>
         </div>
         <script src='js/site.js'></script>
     </body>

diff --git a/js/site.js b/js/site.js
@@ -64,6 +64,7 @@ $("#use_my_location").click(function (e) {
 $("#find").submit(function(e) {
     e.preventDefault();
     $("#couldnt-find").hide();
+    $("#invalid-location").hide();
     $("#success").hide();
     var address_to_find = $("#address").val();
     if (address_to_find.length === 0) return;
@@ -115,29 +116,49 @@ $("#collect-data-done").click(function() {
     location.hash = '#done';
 
     var note_body = "onosm.org submitted note from a business:\n" +
-        "name: " + $("#name").val() + "\n" +
-        "phone: " + $("#phone").val() + "\n" +
-        "website: " + $("#website").val() + "\n" +
-        "twitter: " + $("#twitter").val() + "\n" +
-        "hours: " + $("#opening_hours").val() + "\n" +
-        "category: " + $("#category").val().join(", ") + "\n" +
-        "address: " + $("#address").val(),
+        "Name: " + $("#name").val() + "\n" +
+        "Phone: " + $("#phone").val() + "\n" +
+        "Website: " + $("#website").val() + "\n" +
+        "Twitter: " + $("#twitter").val() + "\n" +
+        "Hours: " + $("#opening_hours").val() + "\n" +
+        "Category: " + $("#category").val() + "\n" +
+        "Address: " + $("#address").val(),
         latlon = findme_marker.getLatLng(),
-        qwarg = {
+        note_data = {
             lat: latlon.lat,
             lon: latlon.lng,
             text: note_body
         };
 
-    $.post('https://api.openstreetmap.org/api/0.6/notes.json', qwarg);
+    $.post(
+        'https://api.openstreetmap.org/api/0.6/notes.json',
+        note_data,
+        function(result) {
+            var id = result.properties.id;
+            $("#linkcoords").append(
+                '<a href="https://osm.org/note/' + id + '">https://osm.org/note/' + id + '</a>'
+            );
+        }
+    );
 });
 
 function clearFields() {
     $("#name").val('');
     $("#phone").val('');
     $("#website").val('');
-    $("#social").val('');
+    $("#twitter").val('');
     $("#opening_hours").val('');
     $("#category").val('');
     $("#address").val('');
+    $("#linkcoords").empty();
+}
+
+function check_coordinates() {
+    var latlon = findme_marker.getLatLng();
+
+    if ((latlon.lat != 0) || (latlon.lng != 0)) {
+        location.hash = '#details';
+    } else {
+        $("#invalid-location").show();
+    }
 }