Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues Pull requests Releases Wiki Activity

Fix instances list animation

Browse source
This commit is contained in:
Chocobozzz 2019-10-31 09:28:38 +01:00
parent 47844eb603
commit c262443598
No known key found for this signature in database
GPG key ID: 583A612D890159BE
1 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/InstancesList.vue
View file

@ -106,9 +106,9 @@
<div class="title"> <div class="title">
<translate>Instances list</translate> <translate>Instances list</translate>
<transition name="mascot-loading"> <div class="mascot-loading-block">
<img v-bind:class="{ animate: loadingAnimation }" v-on:animationend="loadingAnimation = false" class="mascot-loading" :src="buildImgUrl('mascot/happy.png')" alt="PeerTube mascot"> <img v-bind:class="{ animate: loadingAnimation }" v-on:animationend="loadingAnimation = false" class="mascot-loading" :src="buildImgUrl('mascot/happy.png')" alt="PeerTube mascot">
</transition> </div>
</div> </div>
<div class="list" v-bind:class="{ unloaded: !error && !noResults && instances.length === 0 }"> <div class="list" v-bind:class="{ unloaded: !error && !noResults && instances.length === 0 }">
@ -186,26 +186,30 @@
} }
} }
.mascot-loading { .mascot-loading-block {
display: none; width: 100%;
@media screen and (min-width: $responsive-screen) { .mascot-loading {
&.animate { display: none;
display: block;
animation: mascotLoadingAnimation 1s normal ease-out;
@keyframes mascotLoadingAnimation { @media screen and (min-width: $responsive-screen) {
0% { &.animate {
margin-left: 0; display: block;
} animation: mascotLoadingAnimation 1s normal ease-out;
50% { @keyframes mascotLoadingAnimation {
opacity: 1; 0% {
} margin-left: 0;
}
100% { 50% {
margin-left: calc(100% - 300px); opacity: 1;
opacity: 0; }
100% {
margin-left: calc(100% - 150px);
opacity: 0;
}
} }
} }
} }