html: Restore message cards and adjust gaps.

2 files changed, 72 insertions, 67 deletions

diff --git a/assets/mumi.scss b/assets/mumi.scss
index 08a3a42..a2ff00c 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -300,8 +300,8 @@ a.line-anchor {
 }
 a.line-anchor:before {
     content: "# ";
-    margin-left: -2em;
-    padding-right: 2em;
+    margin-left: -1em;
+    padding-right: 1em;
 }
 
 div.line:hover a.line-anchor {
@@ -386,6 +386,11 @@ a.message-anchor {
     }
 }
 
+.issue-title {
+    font-weight: bold;
+    font-size: 1.5em;
+}
+
 .issue-details > ul {
     padding: 0;
     li {
@@ -413,6 +418,10 @@ details {
     padding: 1em 0;
 }
 
+.message header {
+    padding: 0.75rem 1.25rem;
+}
+
 .message .body pre {
     background: transparent;
     border: none;
diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index ea88b4a..bbae270 100644
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -621,60 +621,57 @@ currently disabled."))
                        ,(string-append "send email to "
                                        (number->string id) "@" (%config 'debbugs-domain)))))))))))
   (define (show-message message-number message previous-subject)
-    `((div (@ (class "mb-5"))
-           (a (@ (class "message-anchor")
-                 (id ,(number->string message-number))))
-           (a (@ (class "message-anchor")
-                 (id ,(format #false "msgid-~a" (msgid-hash (message-id message))))))
-           (div
-            (@ (class "avatar")
-               (style ,(string-append "background-color:"
-                                      (avatar-color (sender-email message)
-                                                    (map extract-email parties)))))
-            ,(string-upcase (string-take (sender-name message) 1)))
-           (div
-            (@ (class "message"))
-            (div
-             (@ (class "card"))
-             (div
-              (@ (class "card-header"))
-              (div
-               (@ (class "from"))
-               (div
-                (@ (class "avatar")
-                   (style ,(string-append "background-color:"
-                                          (avatar-color (sender-email message)
-                                                        (map extract-email parties)))))
-                ,(string-upcase (string-take (sender-name message) 1)))
-               (span (@ (class "address")) ,(sender-name message))
-               " wrote "
-               (span (@ (class "date"))
-                     (a (@ (href ,(string-append "#" (number->string
-                                                      message-number)))
-                           (title ,(date->string (date message))))
-                        ,(time->string (date message)))))
-              (div (@ (class "download-message"))
-                   (a (@ (href ,(format #f "/issue/~a/raw/~a"
-                                        id message-number)))
-                      ,download-icon))
-              ,@(if (string-suffix? previous-subject (subject message))
-                    '()
-                    `((div (@ (class "subject")) ,(subject message))))
-              (div
-               (@ (class "details"))
-               (div
-                (@ (class "recipients"))
-                (label "Recipients:")
-                ,(map (lambda (address)
-                        `(span (@ (class "address")) ,address))
-                      (recipients message)))
-               (div
-                (@ (class "message-id"))
-                (label "Message-ID:")
-                ,(message-id message))))
-             (div
-              (@ (class "body card-body"))
-              ,(display-message-body id message-number message)))))
+    `((div
+       (a (@ (class "message-anchor")
+             (id ,(number->string message-number))))
+       (a (@ (class "message-anchor")
+             (id ,(format #false "msgid-~a" (msgid-hash (message-id message))))))
+       (div
+        (@ (class "avatar")
+           (style ,(string-append "background-color:"
+                                  (avatar-color (sender-email message)
+                                                (map extract-email parties)))))
+        ,(string-upcase (string-take (sender-name message) 1)))
+       (article
+        (@ (class "message"))
+        (header
+         (div
+          (@ (class "from"))
+          (div
+           (@ (class "avatar")
+              (style ,(string-append "background-color:"
+                                     (avatar-color (sender-email message)
+                                                   (map extract-email parties)))))
+           ,(string-upcase (string-take (sender-name message) 1)))
+          (span (@ (class "address")) ,(sender-name message))
+          " wrote "
+          (span (@ (class "date"))
+                (a (@ (href ,(string-append "#" (number->string
+                                                 message-number)))
+                      (title ,(date->string (date message))))
+                   ,(time->string (date message)))))
+         (div (@ (class "download-message"))
+              (a (@ (href ,(format #f "/issue/~a/raw/~a"
+                                   id message-number)))
+                 ,download-icon))
+         ,@(if (string-suffix? previous-subject (subject message))
+               '()
+               `((div (@ (class "subject")) ,(subject message))))
+         (div
+          (@ (class "details"))
+          (div
+           (@ (class "recipients"))
+           (label "Recipients:")
+           ,(map (lambda (address)
+                   `(span (@ (class "address")) ,address))
+                 (recipients message)))
+          (div
+           (@ (class "message-id"))
+           (label "Message-ID:")
+           ,(message-id message))))
+        (div
+         (@ (class "body card-body"))
+         ,(display-message-body id message-number message))))
       ,@(if (closing? message id)
             '((div
                (@ (class "event"))
@@ -700,18 +697,17 @@ currently disabled."))
               (_ '()))
           ,sidebar
           (div
-           (@ (class "title col-12"))
-           (h1 (@ (class "h3")) ,(bug-subject* bug))
+           (@ (class "title"))
+           (h1 (@ (class "issue-title")) ,(bug-subject* bug))
            ,issue-details)
-          (div (@ (class "row"))
-               (div
-                (@ (class "conversation col-12"))
-                ,(map show-message
-                      (map car messages-with-numbers)
-                      messages
-                      (cons (bug-subject* bug)
-                            (map subject messages)))
-                ,comment-box)))))))
+          (div
+           (@ (class "conversation"))
+           ,(map show-message
+                 (map car messages-with-numbers)
+                 messages
+                 (cons (bug-subject* bug)
+                       (map subject messages)))
+           ,comment-box))))))
 
 (define (list-of-bugs bugs)
   "Return table rows for all BUGS."