Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Use preview image in <ImageLoader /> to provide immediate visual feedback (#3595)

Browse source 
before the full-size image is loaded
This commit is contained in:
Eugen Rochko 2017-06-06 19:30:17 +02:00 • committed by GitHub
parent 722d152082
commit b623dd12c1
3 changed files with 44 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/styles/components.scss
View file

@ -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 {