[Maposmatic-dev] [PATCH 18/24] More work on the form behavior, added info note for unselectable items

[Maxime Petazzoni]

---
 www/media/osm_map.js              |   29 +++++++++++++++++++++--------
 www/media/style.css               |   24 ++++++++++++++++++------
 www/templates/maposmatic/new.html |    6 +++---
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/www/media/osm_map.js b/www/media/osm_map.js
index 72b0117..103710c 100644
--- a/www/media/osm_map.js
+++ b/www/media/osm_map.js
@@ -93,18 +93,28 @@ function mapInit()
     updateMap();
 }
 
+function setFormActivation(active) {
+  if (active) {
+    $('#map_language').show();
+    $('#id_go_next_btn').show()
+      .removeAttr('disabled');
+  } else {
+    $('#map_language').hide();
+    $('#id_go_next_btn').hide()
+      .attr('disabled', 'disabled');
+  }
+}
+
 function switchToAdminMode() {
   $('#mapform tbody').children('tr.bybbox').hide();
   $('#mapform tbody').children('tr.byadmin').show();
-  $('#map_language').hide();
-  $('#id_go_next_btn').hide();
+  setFormActivation(false);
 }
 
 function switchToBBoxMode() {
   $('#mapform tbody').children('tr.byadmin').hide();
   $('#mapform tbody').children('tr.bybbox').show();
-  $('#map_language').show();
-  $('#id_go_next_btn').show().removeAttr('disabled');
+  setFormActivation(true);
   if (map == null)
     mapInit();
 }
@@ -147,6 +157,7 @@ function suggest(input, results, osm_id, button, options) {
   }
 
   function handleNominatimResults(data, textResult) {
+    var unusable_token = false;
     closeSuggest();
 
     if (data.length)
@@ -162,8 +173,12 @@ function suggest(input, results, osm_id, button, options) {
       } else {
         $results.append('<li class="suggestoff">'
           + item.display_name + '</li>');
+        unusable_token = true;
       }
     });
+
+    if (unusable_token)
+      $results.append('<li class="info">' + $('#noadminlimitinfo').html() + 
'</li>');
   }
 
   function processKey(e) {
@@ -197,8 +212,7 @@ function suggest(input, results, osm_id, button, options) {
 
   function clearResult() {
     $osm_id.val('');
-    $button.attr('disabled', 'disabled');
-    $button.hide();
+    setFormActivation(false);
   }
 
   /* Returns the currently selected result. */
@@ -221,8 +235,7 @@ function suggest(input, results, osm_id, button, options) {
     $osm_id.val(elt.attr('id').substring(3));
     $input.val(elt.html());
     closeSuggest();
-    $button.removeAttr('disabled');
-    $button.show();
+    setFormActivation(true);
   }
 
   function setSelectedResultTo(elt) {
diff --git a/www/media/style.css b/www/media/style.css
index d1fe4a6..9a9c651 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -270,6 +270,10 @@ a.selectedletter {
 
 
 /* Map form */
+#mapform {
+  width: 100%;
+}
+
 #mainfrm {
   padding: 0 0 1em 1em;
   margin: 1em 1em;
@@ -295,9 +299,10 @@ a.selectedletter {
   border: 1px black solid;
 }
 
-#mainfrm td.submit {
-  text-align: right;
-  padding-right: 1em;
+#mainfrm input[type=submit] {
+  margin-top: 0.5em;
+  font-size: 14pt;
+  width: 150px;
 }
 
 #id_go_next_btn {
@@ -306,7 +311,8 @@ a.selectedletter {
 
 #mainfrm input#id_maptitle,
 #mainfrm input#id_administrative_city {
-  width: 600px;
+  width: 80%;
+  max-width: 600px;
   font-size: 13pt;
 }
 
@@ -340,14 +346,20 @@ a.selectedletter {
 }
 
 #suggest li.suggestoff {
-  color: grey;
+  color: #ccc;
 }
 
 #suggest li.suggestoff:hover {
-  background: #dedede;
+  background: #f0f0f0;
   cursor: help;
 }
 
+#suggest li.info {
+  color: #ccc;
+  padding: 0.5em 0 2px 3px;
+  font-size: 8pt;
+}
+
 #suggest span.suggestid {
   display: none;
 }
diff --git a/www/templates/maposmatic/new.html 
b/www/templates/maposmatic/new.html
index a0d41db..dae8ee4 100644
--- a/www/templates/maposmatic/new.html
+++ b/www/templates/maposmatic/new.html
@@ -97,12 +97,12 @@ map.{% endblocktrans %}
     </td></tr>
 
     <tr><td class="submit">
-      <input id="id_go_next_btn" type="image" src="/smedia/go-next.png"
-             value="{% trans "Generate" %}" disabled="disabled"
-             title="{% trans "Please fill in the form before trying to 
proceed" %}" />
+      <input id="id_go_next_btn" type="submit"
+             value="{% trans "Generate" %}" disabled="disabled" />
     </td></tr>
   </table>
 </form>
+<span id="noadminlimitinfo">{% blocktrans %}Wondering why you can't choose 
some of these results?<br />Their administrative boundaries are missing from 
the OSM database.<br />Look at the <a 
href="http://wiki.maposmatic.org/doku.php?id=faq";>FAQ</a> for more details.{% 
endblocktrans %}</span>
 
 {% endblock %}
 
-- 
1.6.3.3.261.g85c6