templates: Display search hints.

* src/static/css/cuirass.css: New file.
* Makefile.am (dist_css_DATA): Add it.
* src/cuirass/http.scm (%file-white-list): Add css/cuirass.css.
* src/cuirass/templates.scm (search-form): Add search-hints div.
(html-page): Load cuirass.css.

4 files changed, 47 insertions, 4 deletions

diff --git a/Makefile.am b/Makefile.am
index bc0e90c..65c9a29 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -74,6 +74,7 @@ dist_sql_DATA = 				\
   src/sql/upgrade-6.sql
 
 dist_css_DATA =					\
+  src/static/css/cuirass.css			\
   src/static/css/bootstrap.css			\
   src/static/css/open-iconic-bootstrap.css
 dist_fonts_DATA =				\
diff --git a/src/cuirass/http.scm b/src/cuirass/http.scm
index 58bd6b6..dcb8052 100644
--- a/src/cuirass/http.scm
+++ b/src/cuirass/http.scm
@@ -4,7 +4,7 @@
 ;;; Copyright © 2018, 2019, 2020 Ludovic Courtès <ludo@gnu.org>
 ;;; Copyright © 2018 Clément Lassieur <clement@lassieur.org>
 ;;; Copyright © 2018 Tatiana Sholokhova <tanja201396@gmail.com>
-;;; Copyright © 2019 Ricardo Wurmus <rekado@elephly.net>
+;;; Copyright © 2019, 2020 Ricardo Wurmus <rekado@elephly.net>
 ;;;
 ;;; This file is part of Cuirass.
 ;;;
@@ -68,6 +68,7 @@
 
 (define %file-white-list
   '("css/bootstrap.css"
+    "css/cuirass.css"
     "css/open-iconic-bootstrap.css"
     "fonts/open-iconic.otf"
     "fonts/open-iconic.woff"
diff --git a/src/cuirass/templates.scm b/src/cuirass/templates.scm
index 916b250..1177bf3 100644
--- a/src/cuirass/templates.scm
+++ b/src/cuirass/templates.scm
@@ -1,7 +1,7 @@
 ;;; templates.scm -- HTTP API
 ;;; Copyright © 2018 Tatiana Sholokhova <tanja201396@gmail.com>
 ;;; Copyright © 2018, 2019, 2020 Ludovic Courtès <ludo@gnu.org>
-;;; Copyright © 2019 Ricardo Wurmus <rekado@elephly.net>
+;;; Copyright © 2019, 2020 Ricardo Wurmus <rekado@elephly.net>
 ;;;
 ;;; This file is part of Cuirass.
 ;;;
@@ -63,7 +63,30 @@
                 (button
                  (@ (type "submit")
                     (class "btn btn-primary"))
-                 "Search")))))
+                 "Search")))
+         (div
+          (@ (id "search-hints"))
+          (p "You can limit the search results with the following keywords:")
+          (ul
+           (li (code "spec")
+               ", a " (em "specification") " such as " (code "guix-master"))
+           (li (code "system")
+               ", a build for the given " (em "target system")
+               " such as " (code "x86_64-linux"))
+           (li (code "status")
+               ", to limit the results to builds with the given status.  "
+               "This should be one of "
+               (code "success") ", "
+               (code "failed") ", "
+               (code "failed-dependency") ", "
+               (code "failed-other") ", or "
+               (code "canceled") "."))
+          (p "You can also use the anchors " (code "^") " and " (code "$") "
+for matching the beginning and the end of a name, respectively.")
+          (p "For example, the following query will list successful builds of
+the " (code "guix-master") " specification for the " (code "i686-linux") "
+system whose names start with " (code "guile-") ":" (br)
+(code "spec:guix-master system:i686-linux status:success ^guile-")))))
 
 (define* (html-page title body navigation #:optional query)
   "Return HTML page with given TITLE and BODY."
@@ -81,7 +104,8 @@
                    (href "/static/css/bootstrap.css")))
           (link (@ (rel "stylesheet")
                    (href "/static/css/open-iconic-bootstrap.css")))
-          (style "#search input:focus { width: 500px; }")
+          (link (@ (rel "stylesheet")
+                   (href "/static/css/cuirass.css")))
           (title ,title))
          (body
           (nav (@ (class "navbar navbar-expand navbar-light bg-light"))
diff --git a/src/static/css/cuirass.css b/src/static/css/cuirass.css
new file mode 100644
index 0000000..313b6a8
--- /dev/null
+++ b/src/static/css/cuirass.css
@@ -0,0 +1,17 @@
+#search input:focus {
+    width: 500px;
+}
+#search #search-hints {
+    display: none;
+    position: absolute;
+    top: 3em;
+    background: white;
+    border: 1px solid #ced4da;
+    border-top: none;
+    width: 500px;
+    box-shadow: 3px 3px 10px #ddd;
+    padding: 1em;
+}
+#search:focus-within #search-hints {
+    display: block;
+}