Merge branch '2.1.0-rc0' into 'master'

2.1.0 into master

See merge request pleroma/pleroma-fe!1217

1 files changed, 31 insertions, 26 deletions

diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 4137bd59..ad82210d 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,6 +11,8 @@
     <img
       ref="src"
       :key="src"
+      :alt="alt"
+      :title="alt"
       :src="src"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
@@ -23,33 +25,33 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+
 .still-image {
   position: relative;
   line-height: 0;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
+  display: flex;
+  align-items: center;
 
-  &:hover canvas {
-    display: none;
+  canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    visibility: var(--still-image-canvas, visible);
   }
 
   img {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     object-fit: contain;
   }
 
   &.animated {
-    &:hover::before,
-    img {
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible
-    }
-
     &::before {
       content: 'gif';
       position: absolute;
@@ -57,25 +59,28 @@
       font-size: 10px;
       top: 5px;
       left: 5px;
-      background: rgba(127,127,127,.5);
-      color: #FFF;
+      background: rgba(127, 127, 127, 0.5);
+      color: #fff;
       display: block;
       padding: 2px 4px;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
+      visibility: var(--still-image-label-visibility, visible);
     }
-  }
 
-  canvas {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    &:hover canvas {
+      display: none;
+    }
+
+    &:hover::before,
+    img {
+      visibility: var(--still-image-img, hidden);
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
   }
 }
 </style>