Merge branch 'stillGifs' into 'develop'

Still gifs

See merge request pleroma/pleroma-fe!193

3 files changed, 24 insertions, 3 deletions

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 5f0d7f26..e9b83bf0 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import StillImage from '../still-image/still-image.vue'
 
 import { sortBy, take, filter } from 'lodash'
 
@@ -31,7 +32,7 @@ const Notifications = {
     }
   },
   components: {
-    Status
+    Status, StillImage
   },
   watch: {
     unseenCount (count) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 241f10b4..3c500b36 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -88,10 +88,26 @@
     }
 
     .avatar {
-      padding-top: 0.3em;
+      margin-top: 0.3em;
       width: 32px;
       height: 32px;
       border-radius: 50%;
+      overflow: hidden;
+      line-height: 0;
+
+      &.animated::before {
+        display: none;
+      }
+
+    }
+
+    &:hover .animated.avatar {
+      canvas {
+        display: none;
+      }
+      img {
+        visibility: visible;
+      }
     }
 
     &:last-child {
@@ -104,6 +120,10 @@
     max-height: 12em;
     overflow-y: hidden;
     //text-overflow: ellipsis;
+
+    img {
+        object-fit: contain;
+    }
   }
 
   .notification-gradient {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b341fcef..8e6f12b2 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -10,7 +10,7 @@
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
           <div>
             <a :href="notification.action.user.statusnet_profile_url" target="_blank">
-              <img class='avatar' :src="notification.action.user.profile_image_url_original">
+              <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
             </a>
           </div>
           <div class='text' style="width: 100%;">