various UI adjustments for mobile browsers (#85)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 8830f5218276055c17aa5c5e0c65847aca2318bf..9178267f01482a6c5d48b951131cea499f46693b 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -33,6 +33,17 @@
     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>

diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte
index 024660523e073f76dea9ff7656bb244f58ba462c..535f42b53102c9b380c0088e1a667832b177e1f1 100644 (file)
--- a/src/components/SearchSection.svelte
+++ b/src/components/SearchSection.svelte
@@ -96,16 +96,14 @@
              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">


@@ -129,16 +127,14 @@
              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 -->


@@ -214,23 +210,10 @@
   .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 {

diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 938b48bd8a2b5239c4c3742c2442cde813a65f36..8029fb3705392c7a4f4cda9d0d3ae2456db19a30 100644 (file)
--- 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"
 
 <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;

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 108e3b6903b0574e295793a8e57d4ac4d9614ff8..d996f440d2faca35b6f81dc20b75316e652cb379 100644 (file)
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -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"


@@ -47,10 +46,14 @@
            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>
 


@@ -85,4 +90,10 @@
     padding: 2px;
     margin: 5px;
   }
     padding: 2px;
     margin: 5px;
   }

+
+  @media (max-width: 850px) {
+    #reverse-lon, #reverse-lat, #reverse-zoom {
+      width: 8em;
+    }
+  }

 </style>
 </style>

diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
index bdc7811b82708ceef306663e02b678c831b2fbc4..9f3bacb496a2fa19c76ac6e1ef1f1e2931af0648 100644 (file)
--- a/src/pages/ReversePage.svelte
+++ b/src/pages/ReversePage.svelte
@@ -70,19 +70,20 @@
 <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>

diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index 4870cc44a2e3a418843daa19ee8a66dca158f421..802034fce6845e28c2e59e470eeb3c54bba687dd 100644 (file)
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -80,19 +80,20 @@
 <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;
   }
 


@@ -105,7 +106,9 @@
       width: 100%;
     }
     #map-wrapper {
       width: 100%;
     }
     #map-wrapper {

+      width: 100%;

       height: 300px;
       height: 300px;

+      padding-left: 20px;

     }
   }
 </style>
     }
   }
 </style>