diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-06 19:30:17 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-06-06 19:30:17 +0200 |
| commit | b623dd12c1eea2a78d1010d20ac8b31431d56501 (patch) | |
| tree | 136f662b29c6f7120dc07cac6fca7de058cac67e /app/javascript/styles/components.scss | |
| parent | 722d152082a20c96ca6f1db92c172f9d3772d737 (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/components.scss')
| -rw-r--r-- | app/javascript/styles/components.scss | 21 |
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 { |