tweaking display of form

Author: sethladd

lib/resources/styles.css

@@ -44,6 +44,12 @@ nav .container {
   white-space: nowrap;
 }
 
+@media screen and (min-width: 500px) and (max-width: 768px) {
+  .navbar-right {
+      float: right!important;
+  }
+}
+
 header {
   background-color: #2196F3;
   color: white;
@@ -62,12 +68,12 @@ header .masthead {
   padding-top: 64px;
 }
 
-header .masthead .contents {
+header .contents {
   padding: 0;
 }
 
 @media screen and (max-width:768px) {
-  header .masthead .contents {
+  header .contents {
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -640,6 +646,12 @@ form.search {
   display: inline;
 }
 
+@media screen and (max-width: 500px) {
+  form.search {
+    display: none;
+  }
+}
+
 .typeahead,
 .tt-query,
 .tt-hint {

lib/templates/_head.html

@@ -28,19 +28,21 @@
     <nav class="navbar navbar-fixed-top">
         <div class="container">
           <div class="row">
-            {{^navLinks.isEmpty}}
-            <button id="sidenav-left-toggle" type="button">&nbsp;</button>
-            {{/navLinks.isEmpty}}
-            <ol class="breadcrumbs gt-separated hidden-xs">
-                {{#navLinks}}
-                <li><a href="{{href}}">{{name}}</a></li>
-                {{/navLinks}}
-                <li class="self-crumb">{{self.name}}</li>
-            </ol>
-            <div class="self-name">{{self.name}}</div>
-            <form class="search navbar-right" role="search">
-              <input type="text" id="search-box" disabled class="form-control typeahead" placeholder="Search">
-            </form>
+            <div class="col-sm-12 contents">
+              {{^navLinks.isEmpty}}
+              <button id="sidenav-left-toggle" type="button">&nbsp;</button>
+              {{/navLinks.isEmpty}}
+              <ol class="breadcrumbs gt-separated hidden-xs">
+                  {{#navLinks}}
+                  <li><a href="{{href}}">{{name}}</a></li>
+                  {{/navLinks}}
+                  <li class="self-crumb">{{self.name}}</li>
+              </ol>
+              <div class="self-name">{{self.name}}</div>
+              <form class="search navbar-right" role="search">
+                <input type="text" id="search-box" disabled class="form-control typeahead" placeholder="Search">
+              </form>
+            </div> <!-- /col -->
           </div> <!-- /row -->
         </div> <!-- /container -->
     </nav>