mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Merge pull request #208 from hellcp/patch-14
Show messages about loading pages
This commit is contained in:
commit
ba9cd33301
4 changed files with 57 additions and 1 deletions
2
resources/assets/js/timeline.js
vendored
2
resources/assets/js/timeline.js
vendored
|
@ -1,9 +1,11 @@
|
|||
$(document).ready(function() {
|
||||
$('.pagination').hide();
|
||||
$('.page-load-status').show();
|
||||
let elem = document.querySelector('.timeline-feed');
|
||||
let infScroll = new InfiniteScroll( elem, {
|
||||
path: '.pagination__next',
|
||||
append: '.timeline-feed',
|
||||
status: '.page-load-status',
|
||||
history: false,
|
||||
});
|
||||
infScroll.on( 'append', function( response, path, items ) {
|
||||
|
|
12
resources/assets/sass/custom.scss
vendored
12
resources/assets/sass/custom.scss
vendored
|
@ -202,3 +202,15 @@ body, button, input, textarea {
|
|||
z-index:1020
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-bar {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 100vw 0; }
|
||||
}
|
||||
|
||||
.loading-page {
|
||||
background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
|
||||
width: 100vw;
|
||||
height: .25rem;
|
||||
animation: loading-bar 3s linear infinite;
|
||||
}
|
||||
|
|
|
@ -36,6 +36,27 @@
|
|||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="page-load-status">
|
||||
<div class="infinite-scroll-request">
|
||||
<div class="fixed-top loading-page"></div>
|
||||
</div>
|
||||
<div class="infinite-scroll-last">
|
||||
<h3>No more content</h3>
|
||||
<p class="text-muted">
|
||||
Maybe you could try
|
||||
<a href="{{route('discover')}}">discovering</a>
|
||||
more people you can follow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="infinite-scroll-error">
|
||||
<h3>Whoops, an error</h3>
|
||||
<p class="text-muted">
|
||||
Try reloading the page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
{{$timeline->links()}}
|
||||
</div>
|
||||
|
|
|
@ -27,6 +27,27 @@
|
|||
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="page-load-status">
|
||||
<div class="infinite-scroll-request">
|
||||
<div class="fixed-top loading-page"></div>
|
||||
</div>
|
||||
<div class="infinite-scroll-last">
|
||||
<h3>No more content</h3>
|
||||
<p class="text-muted">
|
||||
Maybe you could try
|
||||
<a href="{{route('discover')}}">discovering</a>
|
||||
more people you can follow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="infinite-scroll-error">
|
||||
<h3>Whoops, an error</h3>
|
||||
<p class="text-muted">
|
||||
Try reloading the page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
{{$timeline->links()}}
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue