From 8ff7994089aaf9ba42f8594f5ef0c461a756b289 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 16 Jul 2020 13:51:52 +0200
Subject: [PATCH] feature: notification - default avatar + styles added (ter)

---
 src/styles/base/header.scss                   | 21 ++++++++++++++++---
 .../circle/page-circle-notifications.pug      |  2 +-
 src/views/user/page-user-notifications.pug    |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 883cd94..7966a19 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -191,15 +191,30 @@ solid-notifications {
           padding: 1.2rem 0 1.5rem;
 
           .solid-notification__avatar {
+            align-items: center;
             background: var(--color-avatar-background);
             display: flex;
-            align-items: center;
-            justify-content: center;
             height: 35px;
-            width: 35px;
+            justify-content: center;
             margin-left: 1.6rem;
             margin-right: 1.4rem;
             overflow: hidden;
+            position: relative;
+            vertical-align: middle;
+            width: 35px;
+
+            img {
+              background-color: var(--color-grey-10);
+              height: 100%;
+              object-fit: cover;
+              object-position: center center;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
           }
 
           .solid-notification__content {
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
index 2ebc1ea..239c674 100644
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='hd:circle')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side dans 
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
index 56fdd8f..ee785d9 100644
--- a/src/views/user/page-user-notifications.pug
+++ b/src/views/user/page-user-notifications.pug
@@ -1,7 +1,7 @@
 solid-notifications-template(data-rdf-type='foaf:user')
   template
     .solid-notification__avatar
-      img(src="${await author['account.foaf:depiction'] || '/images/alien.svg'}" style="${await author['account.foaf:depiction'] ? 'max-height:100%' : 'max-height:18px'}")
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
     .solid-notification__content
       .solid-notification__title ${await author.name} 
         span.solid-notification__title__side en privé