vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use CSS animation to fade in the JS-cannot-load error so it doesn't flash on screen

Browse source
This commit is contained in:
Joseph Schorr 2017-04-21 14:08:18 -04:00
parent cd8df95132
commit c00feede4d
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/css/quay.css
View file

@ -3774,3 +3774,28 @@ i.mesos-icon {
padding-right: .5em;
}
@keyframes loading-js-fade-out-animation {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes loading-js-fade-in-animation {
from { opacity: 0; }
to { opacity: 1; }
}
.loading-js-fade-out {
opacity: 1;
animation-name: loading-js-fade-out-animation;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.loading-js-fade-in {
opacity: 0;
animation-name: loading-js-fade-in-animation;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}

7
templates/index.html
View file

@ -23,7 +23,12 @@
<script src="static/standalonelib/jquery.overscroll.min.js"></script>
<div ng-view>
<div class="co-alert co-alert-danger">
<div class="co-m-loader co-an-fade-in-out loading-js-fade-out">
<div class="co-m-loader-dot__one"></div>
<div class="co-m-loader-dot__two"></div>
<div class="co-m-loader-dot__three"></div>
</div>
<div class="co-alert co-alert-danger loading-js-fade-in">
The Quay application could not be loaded, which typically indicates an external library could not be loaded (usually due to an ad blocker). Please check the JavaScript console for errors.
</div>
</div>