nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 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

10
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,6 +186,9 @@
} }
} }
.mascot-loading-block {
width: 100%;
.mascot-loading { .mascot-loading {
display: none; display: none;
@ -204,13 +207,14 @@
} }
100% { 100% {
margin-left: calc(100% - 300px); margin-left: calc(100% - 150px);
opacity: 0; opacity: 0;
} }
} }
} }
} }
} }
}
@media screen and (max-width: $responsive-screen) { @media screen and (max-width: $responsive-screen) {
.custom-checkbox { .custom-checkbox {