about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
authorYamagishi Kazutoshi <ykzts@desire.sh>2017-06-27 20:43:53 +0900
committerEugen Rochko <eugen@zeonfederated.com>2017-06-27 13:43:53 +0200
commit8f2c91568c7ab552a87d02813e6b02be65f8707f (patch)
treeaecba410cbd7be87629037e022b3cb4ba51e9827 /app/javascript/styles
parent98eaa2aa27100ac0037cced9d4d4c86bcb9396e7 (diff)
Maintain aspect ratio for preview image (#3966)
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/components.scss30
1 files changed, 17 insertions, 13 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index bb9723f5a..91ebd91fd 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1099,20 +1099,22 @@
 
 .image-loader {
   position: relative;
-}
 
-.image-loader__preview-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  filter: blur(2px);
-}
+  &.image-loader--loading {
+    .image-loader__preview-canvas {
+      filter: blur(2px);
+    }
+  }
 
-.media-modal img.image-loader__preview-img {
-  width: 100%;
-  height: 100%;
+  .image-loader__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: none;
+  }
 }
 
 .navigation-bar {
@@ -2933,6 +2935,7 @@ button.icon-button.active i.fa-retweet {
   position: relative;
 
   img,
+  canvas,
   video {
     max-width: 80vw;
     max-height: 80vh;
@@ -2940,7 +2943,8 @@ button.icon-button.active i.fa-retweet {
     height: auto;
   }
 
-  img {
+  img,
+  canvas {
     display: block;
     background: url('../images/void.png') repeat;
   }