html: Add search hints.
authorRicardo Wurmus <rekado@elephly.net>
Wed, 22 Apr 2020 22:09:42 +0000 (00:09 +0200)
committerRicardo Wurmus <rekado@elephly.net>
Wed, 22 Apr 2020 22:09:42 +0000 (00:09 +0200)
assets/css/screen.css
mumi/web/view/html.scm

index 6d91471af80017a73ca52bd298f22c5cb80496a8..11e02e519c17e22279691ae916b6ae1787ecc3b3 100644 (file)
@@ -98,13 +98,35 @@ tr.important svg {
     #search input:focus {
         width: 400px;
     }
+    #search #search-hints {
+        width: 400px;
+    }
 }
 
 @media (min-width: 768px) {
     #search input:focus {
         width: 500px;
     }
+    #search.form-inline #search-hints {
+        width: 500px;
+    }
+}
+
+#search #search-hints {
+    display: none;
+    position: absolute;
+    background: white;
+    top: 2.5rem;
+    border: 1px solid #ced4da;
+    border-top: none;
+    box-shadow: 3px 3px 10px #ddd;
+    padding: 1em;
+    z-index: 2;
+}
+#search.form-inline:focus-within #search-hints {
+    display: block;
 }
+#search { z-index: 3; }
 
 footer {
     border-color: #1A1A1A1A;
index 7b04668a0ca712de9148432be55e2fea4f018495..1549f58090dcc46facc87c403f90c1e0df1c1aa9 100644 (file)
                                (clip-rule "evenodd")) "")
                       (path (@ (fill-rule "evenodd")
                                (d "M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z")
-                               (clip-rule "evenodd")) "")))))))
-
+                               (clip-rule "evenodd")) ""))))
+          (div
+           (@ (id "search-hints"))
+           (p "You can improve the search results by making use of the
+simple query language.  Here is a list of supported query terms:")
+           (table
+            (@ (class "table table-sm table-borderless"))
+            (tbody
+             ,@(map (match-lambda
+                      ((term description)
+                       `(tr (td (span (@ (class "filter")) ,term))
+                            (td ,description))))
+                    '(("is:open" "open issues")
+                      ("is:done" "closed issues")
+                      ("submitter:<who>" "search issue submitter")
+                      ("author:<who>" "search by message author")
+                      ("date:yesterday..now" "search by issue date")
+                      ("mdate:3m..2d" "search by message date")))))))))
 
 (define* (search-widget #:key (text ""))
   `(div