From 0ba857ac4c4edb839832b63010ca8550da701da5 Mon Sep 17 00:00:00 2001
From: mtmail <mtmail@gmx.net>
Date: Fri, 19 Feb 2021 00:26:54 +0100
Subject: [PATCH] various UI adjustments for mobile browsers (#85)

---
 src/components/Header.svelte               | 14 ++++++
 src/components/SearchSection.svelte        | 53 ++++++++--------------
 src/components/SearchSectionDetails.svelte |  8 ++--
 src/components/SearchSectionReverse.svelte | 19 ++++++--
 src/pages/ReversePage.svelte               |  9 ++--
 src/pages/SearchPage.svelte                |  9 ++--
 6 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 8830f52..9178267 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -33,6 +33,17 @@
     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;
@@ -83,6 +94,9 @@
     </div>
   </nav>
 </header>
+<section class="page-title-section">
+  <h2>{view}</h2>
+</section>
 <section class="search-section">
   <slot/>
 </section>
diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte
index 0246605..535f42b 100644
--- a/src/components/SearchSection.svelte
+++ b/src/components/SearchSection.svelte
@@ -96,16 +96,14 @@
              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">
@@ -129,16 +127,14 @@
              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 -->
@@ -214,23 +210,10 @@
   .nav-link {
     padding: 0.1rem 1rem;
   }
-  .tab-content {
-    display: flex;
-    align-items: baseline
-  }
 
   #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 {
diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 938b48b..8029fb3 100644
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -26,10 +26,10 @@
 
 <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 || ''}" />
-  <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>),
@@ -39,8 +39,8 @@
 
 <style>
   form .form-control{
-    margin-right: 5px;
-    width: 30em;
+    width: 500px;
+    max-width: 100%;
   }
   .form-text em {
     font-family: monospace;
diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 108e3b6..d996f44 100644
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -38,7 +38,6 @@
 
 <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"
@@ -47,10 +46,14 @@
            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>
+  </div>
+  <div class="form-group">
     <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} />
+  </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 +70,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 +90,10 @@
     padding: 2px;
     margin: 5px;
   }
+
+  @media (max-width: 850px) {
+    #reverse-lon, #reverse-lat, #reverse-zoom {
+      width: 8em;
+    }
+  }
 </style>
diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
index bdc7811..9f3bacb 100644
--- a/src/pages/ReversePage.svelte
+++ b/src/pages/ReversePage.svelte
@@ -70,19 +70,20 @@
 <style>
   .sidebar {
     width: 25%;
+    min-width: 200px;
     padding: 15px;
     padding-top: 0;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
-    min-height: 300px;
     height: calc(100vh - 250pt);
+    min-height: 300px;
     width: 75%;
     padding-right: 20px;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
@@ -95,7 +96,9 @@
       width: 100%;
     }
     #map-wrapper {
+      width: 100%;
       height: 300px;
+      padding-left: 20px;
     }
   }
 </style>
diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index 4870cc4..802034f 100644
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -80,19 +80,20 @@
 <style>
   .sidebar {
     width: 25%;
+    min-width: 200px;
     padding: 15px;
     padding-top: 0;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
   #map-wrapper {
     position: relative;
-    min-height: 300px;
     height: calc(100vh - 250pt);
+    min-height: 300px;
     width: 75%;
     padding-right: 20px;
-    display: inline-block;
+    display: block;
     float: left;
   }
 
@@ -105,7 +106,9 @@
       width: 100%;
     }
     #map-wrapper {
+      width: 100%;
       height: 300px;
+      padding-left: 20px;
     }
   }
 </style>
-- 
2.43.2