Merge pull request #1 from lonvia/mobile-responsive-compact-header

make headers more compact

lib/template/address-html.php

@@ -16,10 +16,10 @@
       <input name="lat" type="text" class="form-control input-sm" placeholder="latitude"  value="<?php echo htmlspecialchars($_GET['lat']); ?>" >
       <input name="lon" type="text" class="form-control input-sm" placeholder="longitude" value="<?php echo htmlspecialchars($_GET['lon']); ?>" >
     </div>
-    <div class="form-group">
+    <div class="form-group search-button-group">
       <button type="submit" class="btn btn-primary btn-sm">Search</button>
     </div>
-    <div>
+    <div class="search-type-link">
       <a href="<?php echo CONST_Website_BaseURL; ?>search.php">forward search</a>
     </div>
   </form>

lib/template/search-html.php

@@ -14,7 +14,7 @@
 		<div class="form-group">
 			<input id="q" name="q" type="text" class="form-control input-sm" placeholder="Search" value="<?php echo htmlspecialchars($sQuery); ?>" >
 		</div>
-		<div class="form-group">
+		<div class="form-group search-button-group">
 			<button type="submit" class="btn btn-primary btn-sm">Search</button>
 			<?php if (CONST_Search_AreaPolygons) { ?>
 				<!-- <input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked='checked'"; ?>/> Highlight -->
@@ -28,7 +28,7 @@
 				</label>
 			</div>
 		</div>
-		<div>
+		<div class="search-type-link">
 			<a href="<?php echo CONST_Website_BaseURL; ?>reverse.php?format=html">reverse search</a>
 		</div>
 	</form>

website/css/common.css

@@ -1,6 +1,6 @@
 header {
   width: 100%;
-  padding: 15px;
+  padding: 5px;
   z-index: 5;
 }
 

website/css/search.css

@@ -7,6 +7,11 @@ form {
 form #q {
   min-width: 500px;
 }
+@media (max-width: 850px) {
+form #q {
+  min-width: 400px;
+}
+}
 form .checkbox-inline {
   margin-left: 10px;  
 }
@@ -14,6 +19,13 @@ form label {
   font-weight: normal;
 }
 
+.search-type-link {
+  display: inline;
+  margin-right: 2em;
+  position: absolute;
+  right: 0
+}
+
 .sidebar {
   width: 25%;
   padding: 15px;
@@ -123,4 +135,7 @@ footer p {
   .sidebar {
     width: 100%;
   }
+  .search-button-group {
+    display: inline
+  }
 }