Adjust display behaviour of search form in navigation bar (implements…

… #2904).
dainst · May 13, 2016 · 9c7be4e · 9c7be4e
1 parent 22b5ae4
commit 9c7be4e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/partials/directives/idai-navbar.html b/src/partials/directives/idai-navbar.html
@@ -35,21 +35,21 @@
             <span class="icon-bar"></span>
         </button>
 
-    </div>
-    <div ng-class="isCollapsed ? 'collapse' : 'in'"
-         class="collapse navbar-collapse"
-         uib-collapse="isCollapsed" style="padding-left:10px">
-
-        <form
-                ng-submit="search()"
-                ng-hide="hideSearchForm"
-                class="navbar-left navbar-form input-group form-inline"
-                role="search">
+        <form id="navbar-search"
+              ng-submit="search()"
+              ng-hide="hideSearchForm"
+              class="navbar-left navbar-form input-group form-inline"
+              role="search">
             <input autofocus type="text" class="form-control" placeholder="neue Suche" ng-model="q" name="q">
 		        <span class="navbar-left input-group-btn">
-		        	<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
+		        	<button type="submit" class="btn btn-default"><span
+                            class="glyphicon glyphicon-search"></span></button>
 		        </span>
         </form>
+    </div>
+    <div ng-class="isCollapsed ? 'collapse' : 'in'"
+         class="collapse navbar-collapse"
+         uib-collapse="isCollapsed" style="padding-left:10px">
 
         <ul class="nav navbar-nav navbar-right">
 

diff --git a/src/scss/idai-components/_idai-navbar.scss b/src/scss/idai-components/_idai-navbar.scss
@@ -78,6 +78,10 @@
   white-space: nowrap !important;
 }
 
+.navbar-nav > li > a {
+  padding: 15px 11px 15px 11px;
+}
+
 // Define navigation bar for small and medium sized screen resolutions
 @media (max-width: $grid-float-breakpoint) {
 
@@ -95,16 +99,9 @@
   }
 
   .navbar-nav>li {
-
     float: none;
   }
 
-  .navbar-nav > li > a {
-
-    padding-bottom: 15px;
-    padding-top: 15px;
-  }
-
   .navbar-collapse {
 
     box-shadow: none;
@@ -128,6 +125,30 @@
     border-top-right-radius: 0;
     margin-top: 0;
   }
+
+  #navbar-search {
+    padding: 0 15px 0 5px;
+  }
+}
+
+// High screen resolutions
+@media (min-width: $grid-float-breakpoint) {
+
+  #navbar-search {
+    padding-right: 0;
+    padding-left: 3px;
+  }
+}
+
+// Hide search bar on very small screen resolutions
+@media (max-width: $screen-xs) {
+
+  #navbar-search {
+    display: none;
+    padding-right: 0;
+    padding-left: 3px;
+    background-color: #00b3ee;
+  }
 }
 
 // Medium screen resolutions: Spread form input item over whole width
@@ -145,7 +166,6 @@
   }
 
   .input-group .form-control {
-
     float: left;
     margin-bottom: 0;
     position: relative;
@@ -154,15 +174,18 @@
   }
 
   .navbar-left {
-
     float: none !important;
   }
+
+  /* Stretch search bar over full width */
+  #navbar-search {
+    padding: 0 15px 0 5px;
+  }
 }
 
 @media screen and (max-width: 372px) {
 
   #projectLogo {
-
     display: none;
   }
 }