]> git.openstreetmap.org Git - nominatim-ui.git/commitdiff
various UI adjustments for mobile browsers (#85)
authormtmail <mtmail@gmx.net>
Thu, 18 Feb 2021 23:26:54 +0000 (00:26 +0100)
committerGitHub <noreply@github.com>
Thu, 18 Feb 2021 23:26:54 +0000 (00:26 +0100)
src/components/Header.svelte
src/components/SearchSection.svelte
src/components/SearchSectionDetails.svelte
src/components/SearchSectionReverse.svelte
src/pages/ReversePage.svelte
src/pages/SearchPage.svelte

index 8830f5218276055c17aa5c5e0c65847aca2318bf..9178267f01482a6c5d48b951131cea499f46693b 100644 (file)
     z-index: 1005;
   }
 
     z-index: 1005;
   }
 
+  .page-title-section {
+    display: none;
+    text-align: center;
+    padding: 1em;
+  }
+  @media (max-width: 600px) {
+    .page-title-section {
+      display: block;
+    }
+  }
+
   .search-section {
     padding: 1em 30px;
     background-color: #f5f5f5;
   .search-section {
     padding: 1em 30px;
     background-color: #f5f5f5;
@@ -83,6 +94,9 @@
     </div>
   </nav>
 </header>
     </div>
   </nav>
 </header>
+<section class="page-title-section">
+  <h2>{view}</h2>
+</section>
 <section class="search-section">
   <slot/>
 </section>
 <section class="search-section">
   <slot/>
 </section>
index 024660523e073f76dea9ff7656bb244f58ba462c..535f42b53102c9b380c0088e1a667832b177e1f1 100644 (file)
              placeholder="Search"
              value="{api_request_params.q || ''}" />
 
              placeholder="Search"
              value="{api_request_params.q || ''}" />
 
-      <div class="form-group search-button-group">
-        <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-        <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-        <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-        <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-        <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-        <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-        <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-        <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
-      </div>
+      <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
+      <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+      <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+      <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+      <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+      <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+      <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>
   </div>
   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
     </UrlSubmitForm>
   </div>
   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
              placeholder="Postal Code"
              value="{api_request_params.postalcode || ''}" />
 
              placeholder="Postal Code"
              value="{api_request_params.postalcode || ''}" />
 
-      <div class="form-group search-button-group">
-        <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-        <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-        <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-        <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-        <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-        <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-        <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-        <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
-      </div>
+      <button type="submit" class="btn btn-primary btn-sm">Search</button>
+      <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+      <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+      <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+      <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+      <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+      <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>
   </div>
 </div> <!-- /tab-content -->
     </UrlSubmitForm>
   </div>
 </div> <!-- /tab-content -->
   .nav-link {
     padding: 0.1rem 1rem;
   }
   .nav-link {
     padding: 0.1rem 1rem;
   }
-  .tab-content {
-    display: flex;
-    align-items: baseline
-  }
 
   #q {
 
   #q {
-    min-width: 500px;
-  }
-  @media (max-width: 850px) {
-    #q {
-      min-width: 400px;
-    }
-  }
-  @media (max-width: 768px) {
-    .search-button-group {
-      display: inline;
-    }
+    width: 500px;
+    max-width: 100%;
   }
 
   #searchAdvancedOptions ul {
   }
 
   #searchAdvancedOptions ul {
index 938b48bd8a2b5239c4c3742c2442cde813a65f36..8029fb3705392c7a4f4cda9d0d3ae2456db19a30 100644 (file)
 
 <form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
   <input type="edit"
 
 <form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
   <input type="edit"
-         class="form-control form-control-sm"
+         class="form-control form-control-sm mr-1"
          pattern="^[NWR]?[0-9]+$|.*openstreetmap.*"
          value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
          pattern="^[NWR]?[0-9]+$|.*openstreetmap.*"
          value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
-  <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+  <button type="submit" class="btn btn-primary btn-sm">Show</button>
 </form>
 <small class="form-text text-muted">
   OSM type+id (<em>N123</em>, <em>W123</em>, <em>R123</em>),
 </form>
 <small class="form-text text-muted">
   OSM type+id (<em>N123</em>, <em>W123</em>, <em>R123</em>),
@@ -39,8 +39,8 @@
 
 <style>
   form .form-control{
 
 <style>
   form .form-control{
-    margin-right: 5px;
-    width: 30em;
+    width: 500px;
+    max-width: 100%;
   }
   .form-text em {
     font-family: monospace;
   }
   .form-text em {
     font-family: monospace;
index 108e3b6903b0574e295793a8e57d4ac4d9614ff8..d996f440d2faca35b6f81dc20b75316e652cb379 100644 (file)
@@ -38,7 +38,6 @@
 
 <UrlSubmitForm page="reverse">
   <div class="form-group">
 
 <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"
     <label for="reverse-lat">lat</label>
     <input id="reverse-lat"
            name="lat"
            placeholder="latitude"
            bind:value={lat}
            on:change={maybeSplitLatitude} />
            placeholder="latitude"
            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>
     <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"
     <label for="reverse-lon">lon</label>
     <input id="reverse-lon"
            name="lon"
@@ -58,6 +61,8 @@
            class="form-control form-control-sm"
            placeholder="longitude"
            bind:value={lon} />
            class="form-control form-control-sm"
            placeholder="longitude"
            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>
     <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 +70,9 @@
         <option value="{i}">{i} - {zoomTitle}</option>
       {/each}
     </select>
         <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>
 
   </div>
 </UrlSubmitForm>
 
     padding: 2px;
     margin: 5px;
   }
     padding: 2px;
     margin: 5px;
   }
+
+  @media (max-width: 850px) {
+    #reverse-lon, #reverse-lat, #reverse-zoom {
+      width: 8em;
+    }
+  }
 </style>
 </style>
index bdc7811b82708ceef306663e02b678c831b2fbc4..9f3bacb496a2fa19c76ac6e1ef1f1e2931af0648 100644 (file)
 <style>
   .sidebar {
     width: 25%;
 <style>
   .sidebar {
     width: 25%;
+    min-width: 200px;
     padding: 15px;
     padding-top: 0;
     padding: 15px;
     padding-top: 0;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
-    min-height: 300px;
     height: calc(100vh - 250pt);
     height: calc(100vh - 250pt);
+    min-height: 300px;
     width: 75%;
     padding-right: 20px;
     width: 75%;
     padding-right: 20px;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
     float: left;
   }
 
@@ -95,7 +96,9 @@
       width: 100%;
     }
     #map-wrapper {
       width: 100%;
     }
     #map-wrapper {
+      width: 100%;
       height: 300px;
       height: 300px;
+      padding-left: 20px;
     }
   }
 </style>
     }
   }
 </style>
index 4870cc44a2e3a418843daa19ee8a66dca158f421..802034fce6845e28c2e59e470eeb3c54bba687dd 100644 (file)
 <style>
   .sidebar {
     width: 25%;
 <style>
   .sidebar {
     width: 25%;
+    min-width: 200px;
     padding: 15px;
     padding-top: 0;
     padding: 15px;
     padding-top: 0;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
-    min-height: 300px;
     height: calc(100vh - 250pt);
     height: calc(100vh - 250pt);
+    min-height: 300px;
     width: 75%;
     padding-right: 20px;
     width: 75%;
     padding-right: 20px;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
     float: left;
   }
 
       width: 100%;
     }
     #map-wrapper {
       width: 100%;
     }
     #map-wrapper {
+      width: 100%;
       height: 300px;
       height: 300px;
+      padding-left: 20px;
     }
   }
 </style>
     }
   }
 </style>