Add inline avatar for narrow screens.

diff --git a/assets/css/screen.css b/assets/css/screen.css
index fdcf9b70eef4fd5ec8075f9306c54af499a18b19..c7a151eae81daf6b2556996496cbaa1b2022c1e2 100644 (file)
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -127,6 +127,17 @@ table {
     display: none;
 }
 
+.message .from .avatar {
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 3px;
+    color: #fff;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 3px;
+}
+
 @media (min-width: 768px) {
     .conversation .avatar {
         height: 64px;
@@ -220,6 +231,9 @@ table {
         position: absolute;
         z-index: 10;
     }
+    .message .from .avatar {
+        display: none;
+    }
 }
 
 .message .from .address {

diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index 98a7294a944480ed24ffd714461c563585af6f4e..03b701adffa0c5aadd2af6811ce98c9479b6c865 100644 (file)
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -279,6 +279,12 @@ some examples.")
           (@ (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 on "
            (span (@ (class "date"))