Fix problems on mobile devices

- The search feilds and keyboard not hiding.
- Submit buttons not styled on iOS.
- Nav dropdowns going outside viewport.

admin/static/css/common.styl

@@ -129,7 +129,13 @@ textarea
   min-height: 60px
   padding: 5px 7px
 
-button, .button
+input[type='submit'],
+input[type='button'],
+input[type='reset'],
+button,
+.button
+  -webkit-appearance: none
+  outline: none
   display: inline-block
   vertical-align: middle
   padding: 10px 30px

admin/static/css/mixin.styl

@@ -108,6 +108,11 @@ border-box()
   -moz-box-sizing: border-box
   box-sizing: border-box
 
+content-box()
+  -webkit-box-sizing: content-box
+  -moz-box-sizing: content-box
+  box-sizing: content-box
+
 transition(s = 0.3s, o =  opacity, t = linear)
   -webkit-transition: s o t
   -moz-transition: s o t

site/lib/app.coffee

@@ -77,8 +77,9 @@ setupNavMenus = ->
       term = $.trim $inputField.val()
       if term
         hidePopups()
-        $searchResultsInput.val(term)
         $mainNavSearchInput.val(term)
+        $searchResultsInput.val(term)
+        document.activeElement.blur() # to hide mobile keyboard
         $searchResultsView.show()
         $searchResultsList.html('<li>Looking, please wait...</li>')
 

site/static/css/responsive.styl

@@ -214,12 +214,13 @@
 
 
 // Heights
-@media (max-height: 480px)
+
+@media (max-height: 600px)
   .main-nav
   .toc-nav
   .collection-nav
     > ul
-      max-height: 400px
+      bottom: 0
 
   .search-results-view
-    max-height: 400px
+    bottom: 0

site/static/css/setup-theme.styl

@@ -22,7 +22,11 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
     &:before
       color: $primaryColor
 
-  button, .button
+  input[type='submit'],
+  input[type='button'],
+  input[type='reset'],
+  button,
+  .button
     background: $primaryColor
     html.no-touch &:hover
     html.touch &:active

site/templates/base.html

@@ -68,7 +68,7 @@
         <li class="heading">Main Menu</li>
         {{{site.menu_html}}}
         <li class="search-box">
-          <input type="text" placeholder="Search" data-track-click="Search Box" data-site="{{site._id}}">
+          <input type="text" placeholder="Search" data-track-click="Search Box" data-site="{{site._id}}" autocapitalize="off" autocorrect="off">
         </li>
       </ul>
     </nav>
@@ -86,7 +86,7 @@
     <div class="search-results-view">
       <button class="close-button small">X</button>
       <h2>Search</h2>
-      <input type="text" placeholder="Type your search..." data-track-click="Search Box" data-site="{{site._id}}">
+      <input type="text" placeholder="Type your search..." data-track-click="Search Box" data-site="{{site._id}}" autocapitalize="off" autocorrect="off">
       <ul class="list"></ul>
     </div>
   </div>