Starlio/StarlioX
1
0
Fork 0
mirror of https://github.com/Starlio-app/StarlioX synced 2024-11-22 08:46:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

add loading bar in gallery

Browse source
This commit is contained in:
Данил 2022-09-19 23:40:49 +03:00
parent 87878315e5
commit e62165dd51
3 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/gallery.html
View file

@ -48,7 +48,9 @@
<header class="header-row"> <header class="header-row">
</header> </header>
</div> </div>
<div class="preloader">
<lottie-player src="https://assets4.lottiefiles.com/datafiles/a3YH0ragZcwfKHS/data.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop autoplay></lottie-player>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3"> <div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"> <div class="toast-header">
@ -61,6 +63,7 @@
</div> </div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="/static/scripts/gallery.js" type="application/javascript"></script> <script src="/static/scripts/gallery.js" type="application/javascript"></script>
</body> </body>
</html> </html>

5
web/static/scripts/gallery.js
View file

@ -23,6 +23,7 @@ const myModal = new bootstrap.Modal('#Wallpaper', {
myModal.show() myModal.show()
function Wallpaper(data) { function Wallpaper(data) {
$(".preloader").fadeOut(0)
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i].media_type === "image") { if (data[i].media_type === "image") {
$(".header-row").append(` $(".header-row").append(`
@ -60,7 +61,7 @@ function Wallpaper(data) {
<p>Author: <strong>${data[id - 1].copyright}</strong></p> <p>Author: <strong>${data[id - 1].copyright}</strong></p>
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p> <p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p> <p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
` `.replace("undefined", "Unknown")
title.innerHTML = ` title.innerHTML = `
<h5 class="modal-title">${data[id - 1].title}</h5> <h5 class="modal-title">${data[id - 1].title}</h5>
` `
@ -89,7 +90,7 @@ function Wallpaper(data) {
<p>Author: <strong>${data[id - 1].copyright}</strong></p> <p>Author: <strong>${data[id - 1].copyright}</strong></p>
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p> <p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p> <p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
` `.replace("undefined", "Unknown")
title.innerHTML = ` title.innerHTML = `
<h5 class="modal-title">${data[id].title}</h5> <h5 class="modal-title">${data[id].title}</h5>
` `

4
web/static/style/gallery.css
View file

@ -20,3 +20,7 @@
object-fit: none; object-fit: none;
object-position: center; object-position: center;
} }
lottie-player {
margin: 0 auto;
}