X-Git-Url: https://git.openstreetmap.org./nominatim-ui.git/blobdiff_plain/c061d3fd3d4c9135fdbda0af273d9fc0dc5b5535..ff85679c2bc5fcc4119ab4da563fa5222440f3ab:/src/components/SearchSectionReverse.svelte

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 108e3b6..1861902 100644
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -9,6 +9,8 @@
   export let zoom = '';
 
   function gotoCoordinates(newlat, newlon, newzoom) {
+    if (newlat === null || newlon === null) return;
+
     let params = new URLSearchParams();
     params.set('lat', newlat);
     params.set('lon', newlon);
@@ -38,26 +40,33 @@
 
 <UrlSubmitForm page="reverse">
   <div class="form-group">
-    <input name="format" type="hidden" value="html">
     <label for="reverse-lat">lat</label>
     <input id="reverse-lat"
            name="lat"
            type="text"
            class="form-control form-control-sm"
            placeholder="latitude"
+           pattern="^-?\d+(\.\d+)?$"
            bind:value={lat}
            on:change={maybeSplitLatitude} />
+  </div>
+  <div class="form-group">
     <a id="switch-coords"
        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
        class="btn btn-outline-secondary btn-sm"
        title="switch lat and lon">&lt;&gt;</a>
+  </div>
+  <div class="form-group">
     <label for="reverse-lon">lon</label>
     <input id="reverse-lon"
            name="lon"
            type="text"
            class="form-control form-control-sm"
            placeholder="longitude"
+           pattern="^-?\d+(\.\d+)?$"
            bind:value={lon} />
+  </div>
+  <div class="form-group">
     <label for="reverse-zoom">max zoom</label>
     <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" bind:value={zoom}>
       <option value="">---</option>
@@ -65,9 +74,9 @@
         <option value="{i}">{i} - {zoomTitle}</option>
       {/each}
     </select>
-    <button type="submit" class="btn btn-primary btn-sm mx-1">
-      Search
-    </button>
+  </div>
+  <div class="form-group">
+    <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
   </div>
 </UrlSubmitForm>
 
@@ -85,4 +94,10 @@
     padding: 2px;
     margin: 5px;
   }
+
+  @media (max-width: 850px) {
+    #reverse-lon, #reverse-lat, #reverse-zoom {
+      width: 8em;
+    }
+  }
 </style>