01/01: hydra: goggles: Update styles and display.

[Ricardo Wurmus]

rekado pushed a commit to branch master
in repository maintenance.

commit 59a0d049bae7c1435c5f9766a600566494c90ede
Author: Ricardo Wurmus <address@hidden>
Date:   Fri Jun 28 01:45:41 2019 +0200

    hydra: goggles: Update styles and display.
    
    * hydra/goggles.scm (css): Update styles.
    (colors): Darken nick colors.
    (make-line-renderer): Hide timestamp, right-align nicks.
    (render-log): Add title; wrap log lines in div.
    (index): Include styles.
---
 hydra/goggles.scm | 98 +++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/hydra/goggles.scm b/hydra/goggles.scm
index ba63bf2..4082bd0 100644
--- a/hydra/goggles.scm
+++ b/hydra/goggles.scm
@@ -39,25 +39,58 @@ html {
   background: #fdfdfd;
 }
 
+h1 {
+  font-weight: 300;
+}
+
+h2 {
+  font-weight: 200;
+}
+
 .nick {
-  margin-right: 0.5rem;
+  padding-right: 0.6rem;
   font-weight: bold;
+  text-align: right;
+  width: 13rem;
+  display: table-cell;
+}
+
+.nick a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.message {
+  display: table-cell;
+  padding-left: 0.6rem;
+  border-left: 2px solid #333;
 }
 
 .notice {
   color: #859900;
+  font-style: italic;
+}
+
+.line {
+  line-height: 1.8rem;
+  display: table;
+}
+
+#logs {
+  margin-top: 1.5rem;
+  padding: 1.5rem;
 }
 
-.time a {
-  color: #999;
-  margin-right: 0.5rem;
+ul {
+  column-count: 20;
+  column-width: 170px;
 }
 ")
 
 (define colors
-  (circular-list "#389600" "#8dd3c7" "#bebada" "#fb8072"
-                 "#80b1d3" "#fdb462" "#b3de69" "#fccde5"
-                 "#d9d9d9" "#bc80bd" "#ccebc5" "#ffed6f"))
+  (circular-list "#389600" "#8dd3c7" "#2e2a4a" "#6b8072"
+                 "#80b1d3" "#6d2462" "#234e69" "#6c3d55"
+                 "#d9d9d9" "#bc80bd" "#3c5b35" "#af8d2f"))
 
 (define (not-found uri)
   (list (build-response #:code 404)
@@ -84,32 +117,30 @@ representation highlighting certain parts."
     ((time "***" . msg)
      (let ((id (string-filter char-set:digit time)))
        `(div (@ (class "line") (id ,id))
-             (span (@ (class "time"))
-                   (a (@ (href ,(string-append "#" id)))
-                      ,time))
-             (span (@ (class "notice")) "*** " ,(string-join msg)))))
+             (span (@ (class "nick")) "***")
+             (span (@ (class "message notice")) ,(string-join msg)))))
     ((time nick . rest)
      (let ((id (string-filter char-set:digit time)))
        `(div (@ (class "line") (id ,id))
-             (span (@ (class "time"))
-                   (a (@ (href ,(string-append "#" id)))
-                      ,time))
              (span (@ (class "nick")
                       (style ,(string-append "color:" (nick-color nick))))
-                   ,nick)
-             ,@(reverse (fold (lambda (chunk acc)
-                                (cond
-                                 ((string-match "http.?://.+" chunk)
-                                  (cons* " "
-                                         `(a (@ (href ,chunk)) ,chunk)
-                                         " "
-                                         acc))
-                                 (else
-                                  (match acc
-                                    (((? string? s) . rest)
-                                     (cons (string-append s " " chunk) (cdr 
acc)))
-                                    (_ (cons chunk acc)))))) '()
-                                    rest)))))))
+                   (a (@ (href ,(string-append "#" id))
+                         (label ,time))
+                      ,nick))
+             (span (@ (class "message"))
+                   ,@(reverse (fold (lambda (chunk acc)
+                                      (cond
+                                       ((string-match "http.?://.+" chunk)
+                                        (cons* " "
+                                               `(a (@ (href ,chunk)) ,chunk)
+                                               " "
+                                               acc))
+                                       (else
+                                        (match acc
+                                          (((? string? s) . rest)
+                                           (cons (string-append s " " chunk) 
(cdr acc)))
+                                          (_ (cons chunk acc)))))) '()
+                                          rest))))))))
 
 (define (render-log root path)
   ;; PATH is a list of path components
@@ -123,12 +154,14 @@ representation highlighting certain parts."
                (handle-line (make-line-renderer split-lines)))
           (render-html
            `(html
-             (head (style ,css))
+             (head (title "Guix IRC channel logs")
+                   (style ,css))
              (body
               (h1 "#guix channel logs")
               (h2 ,path)
-              (a (@ (href "/")) "back to list of logs") (br)
-              ,@(map handle-line split-lines)))))
+              (p (a (@ (href "/")) "back to list of logs"))
+              (div (@ (id "logs"))
+                   ,@(map handle-line split-lines))))))
         (not-found (build-uri 'http
                               #:host (assoc-ref %config 'host)
                               #:port (assoc-ref %config 'port)
@@ -136,7 +169,8 @@ representation highlighting certain parts."
 
 (define (index)
   `(html
-    (head (title "Guix IRC channel logs"))
+    (head (title "Guix IRC channel logs")
+          (style ,css))
     (body
      (h1 "Guix IRC channel logs")
      (p "These are the channel logs for the #guix IRC channel on