Adjust search box styles.

2 files changed, 30 insertions, 47 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 59f6889..148eb04 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -85,39 +85,13 @@ tr td:nth-child(3){
     margin-bottom: 1rem;
     padding: .5em;
     color: #fff;
-    position: relative;
-    display: block;
-}
-#header a {
-    color: #fff;
-    text-decorations: none;
-}
-
-#header .flex {
-    display: flex;
 }
-
-#header .flex .logo {
-    display: inline-block;
-    float: left;
-}
-
-#header .flex form {
-    display: inline-block;
-}
-
-input#query {
-    box-sizing: border-box;
-    width: 100%;
-    padding: .2rem;
-    color: #111;
-    border-radius: 3px;
+#header .navbar-brand {
+    padding: 0;
 }
 
-#header input#query {
-    width: auto;
-    position: absolute;
-    right: 1rem;
+#header #search input:focus {
+    width: 500px;
 }
 
 table {
diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index e7c411e..a29ee44 100644
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -71,31 +71,40 @@
 
 (define* (search-form #:key (standalone? #f))
   `(form (@ (id "search")
-            ,@(if standalone?
-                  '((class "row"))
-                  '())
+            ,(if standalone?
+                 '(class "row")
+                 '(class "navbar-form navbar-right"))
             (action "/search"))
          (div
-          (@ (class "form-group"))
+          (@ (class ,(if standalone?
+                         "input-group input-group-lg"
+                         "input-group")))
           (input (@ (type "text")
+                    (class "form-control")
                     (id   "query")
                     (name "query")
-                    (placeholder "input search query"))))
-         (button
-          (@ (type "submit")
-             (class "btn btn-lg btn-primary btn-block")
-             ,@(if standalone? '() '((style "display:none"))))
-          "Search")))
+                    (placeholder "input search query")))
+               (span (@ (class "input-group-btn"))
+                    (button
+                     (@ (type "submit")
+                        (class ,(string-append (if standalone? "btn-lg " "")
+                                               "btn btn-primary")))
+                     "Search")))))
 
 (define* (header #:key (search-bar? #t))
-  `(div
-    (@ (id "header"))
+  `(nav
+    (@ (id "header") (class "navbar navbar-default"))
     (div
-     (@ (class "flex"))
-     (a (@ (href "/") (class "logo"))
-        (img (@ (src "/img/logo.png")
-                (alt "Guix patch tracker"))))
-     ,@(if search-bar? (list (search-form)) '()))))
+     (@ (class "container-fluid"))
+     (div
+      (@ (class "navbar-header"))
+      (div (@ (class "navbar-brand"))
+           (a (@ (href "/") (class "logo"))
+              (img (@ (src "/img/logo.png")
+                      (alt "Guix patch tracker"))))))
+     ,@(if search-bar?
+           `(,(search-form))
+           '()))))
 
 (define (index)
   (layout