Bug 30952: Better header search bar on smaller screens

[srvgit] / koha-tmpl / intranet-tmpl / prog / css / src / _header.scss

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index 76f8482..ad5f422 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
@@ -1,6 +1,9 @@
+a.navbar-toggle {
+    color: #fff;
+}
+
 #header {
-    .navbar-nav li a {
-        line-height: 40px;
+    .navbar-nav > li > a {
         overflow: hidden;
         color: #FFFFFF;
 
@@ -13,6 +16,7 @@
         background-color: rgb(53, 44, 46);
 
         li a {
+            color: #FFFFFF;
             &:hover, &:focus {
                 background-color: transparent;
                 text-decoration: underline;
@@ -40,14 +44,18 @@
 }
 
 #header_search {
-    border-radius: 28px;
+    background-color: #418940;
+    border-radius: 0;
+    border: 1px solid #418940;
     display: flex;
+    padding: 0 .8em;
 
     .residentsearch {
         padding: 0;
         border: 0;
         background-color: transparent;
         display: none;
+        flex-grow: 1;
 
         &:first-of-type {
             display: block;
@@ -57,21 +65,19 @@
     > ul {
         padding: 0;
         margin: 0;
-        order: -1;
-        border-radius: 16px 0 0 16px;
-        padding-left: 16px;
-        background-color: #418940;
+        border-radius: 0 16px 16px 0;
         display: flex;
-        justify-content: space-around;
         align-items: center;
         color: white;
+        background-color: #418940;
+        z-index: 2;
+        flex-grow: 1;
 
         li {
             background: transparent;
             border: 0;
             border-radius: 0;
 
-            background-color: transparent;
             border: 0;
             border-bottom-width: 0;
             padding-bottom: 0;
@@ -80,16 +86,15 @@
             a {
                 color: #FFF;
                 font-size: .9em;
-                padding: 0 .5em;
+                padding: 0 .25em;
+                margin: 0 .25em;
+                border: 2px solid transparent;
             }
         }
     }
     .ui-state-hover, .ui-state-active {
         a {
-            i {
-                border-bottom: 2px solid #FFFFFF;
-                padding-bottom: 2px;
-            }
+            border-bottom: 2px solid #FFFFFF;
         }
     }
 
@@ -99,17 +104,20 @@
     }
 
     .form-title {
-        padding: 0 .8em;
-        background-image: linear-gradient(to right, #418940, #71B443);
+        padding: 0 16px 0 0;
+        background-color: #418940;
         border-radius: 0 16px 16px 0;
         display: flex;
         align-items: center;
+        justify-content: flex-end;
         z-index: 2;
         white-space: nowrap;
+        flex-basis: 15%;
 
         label {
             color: white;
             font-weight: bold;
+            margin: 0;
         }
     }
 
@@ -118,45 +126,48 @@
         margin-left: -16px;
         padding-left: 16px;
         border-radius: 0 16px 16px 0;
-        position: relative;
-        z-index: 1;
         white-space: nowrap;
+        z-index: 1;
         display: flex;
+        flex-grow: 1;
 
-        input[type="text"] {
-            border: 0;
-            box-shadow: unset;
-            background-color: transparent;
-        }
-
+        input[type="text"],
         select {
-            margin: 0;
             background-color: transparent;
             border: 0;
+            border-radius: 0;
             box-shadow: unset;
-            max-width: 15em;
+            margin: 0;
+
+            &:not(:first-child) {
+                border-left: 1px solid #e0e0e0;
+            }
         }
     }
 
     .form-extra-content {
-        left: 0;
-        right: 0;
+        right: 60px;
         position: absolute;
         top: 31px;
-        background-color: #352C2E;
+        background-color: #f3f4f4;
+        background-color: white;
         padding: 1em;
-        border-radius: 0 0 16px 16px;
+        border-radius: 0 0 8px 8px;
+        border: 1px solid #418940;
+        border-top: 0 none;
+        box-shadow: 0 2px 2px 1px #00000030;
         z-index: 1;
         display: none;
 
-        label {
-            color: white;
-        }
-
         .form-control {
             display: block;
             width: 100%;
         }
+
+        label {
+            display: block;
+            margin-bottom: 0;
+        }
     }
 
     .form-extra-content-toggle {
@@ -190,38 +201,11 @@
 }
 
 #logged-in-menu {
-    position: relative;
-    left: 0;
-    top: 0;
-    height: 50px;
-
-    &:hover {
+    &:hover, &:active, &:focus {
         text-decoration: none;
     }
 }
 
-.loggedinusername {
-    bottom: 5px;
-    text-decoration: none;
-    position: relative;
-    float: right;
-    right: 0;
-    height: 20px;
-    width: 100%;
-}
-
-.logged-in-branch-name {
-    position: relative;
-    right: 0;
-    height: 20px;
-    top: 10px;
-    width: 100%;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
 #lastborrower-window {
     display: none;
     background-image: linear-gradient(to left, #418940, #71B443);
@@ -243,3 +227,23 @@
 #lastborrowerlink {
     color: #FFFFFF;
 }
+
+@media (max-width: 768px) {
+    #header_search {
+        .form-title {
+            display: none;
+        }
+    }
+}
+
+@media (max-width: 992px) {
+    #header_search {
+        .tab-title {
+            display: none;
+        }
+
+        > ul {
+            flex-grow: 0;
+        }
+    }
+}