about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-06-06 19:30:17 +0200
committerGitHub <noreply@github.com>2017-06-06 19:30:17 +0200
commitb623dd12c1eea2a78d1010d20ac8b31431d56501 (patch)
tree136f662b29c6f7120dc07cac6fca7de058cac67e /app/javascript/styles
parent722d152082a20c96ca6f1db92c172f9d3772d737 (diff)
Use preview image in <ImageLoader /> to provide immediate visual feedback (#3595)
before the full-size image is loaded
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/components.scss21
1 files changed, 16 insertions, 5 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 4ff19e0ef..502674225 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1137,13 +1137,22 @@
   }
 }
 
-.image-loader__img {
-  transition: opacity 0.3s linear;
-  opacity: 1;
+.image-loader {
+  position: relative;
 }
 
-.image-loader__img-loading {
-  opacity: 0.7;
+.image-loader__preview-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  filter: blur(2px);
+}
+
+.media-modal img.image-loader__preview-img {
+  width: 100%;
+  height: 100%;
 }
 
 .navigation-bar {
@@ -2951,6 +2960,8 @@ button.icon-button.active i.fa-retweet {
   video {
     max-width: 80vw;
     max-height: 80vh;
+    width: auto;
+    height: auto;
   }
 
   img {