lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix loader overlay

Browse Source
This commit is contained in:
lelo 2025-03-22 21:36:19 +01:00
parent 770ff38b64
commit e0730f1ba3
3 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
static/gallery.css
View File

@ -48,16 +48,25 @@
} }
/* Loader for gallery */ /* Loader for gallery */
#loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure it's on top */
}
#gallery-loader { #gallery-loader {
display: none; /* Hidden by default */ border: 8px solid #f3f3f3;
border: 8px solid #f3f3f3; /* Light gray */ border-top: 8px solid #525252;
border-top: 8px solid #525252; /* Blue */
border-radius: 50%; border-radius: 50%;
width: 10px; width: 30px;
height: 10px; height: 30px;
padding-left: 50%; animation: spin 3s linear infinite;
padding-top: 50%;
animation: spin 1.5s linear infinite;
} }
/* Keyframes for spinner animation */ /* Keyframes for spinner animation */

4
static/gallery.js
View File

@ -15,12 +15,12 @@ function showGalleryImage(relUrl) {
const fullUrl = '/media/' + relUrl; const fullUrl = '/media/' + relUrl;
const modal = document.getElementById('gallery-modal'); const modal = document.getElementById('gallery-modal');
const currentImage = document.getElementById('gallery-modal-content'); const currentImage = document.getElementById('gallery-modal-content');
const loader = document.getElementById('gallery-loader'); const loader = document.getElementById('loader-container');
const closeBtn = document.getElementById('gallery-close'); const closeBtn = document.getElementById('gallery-close');
// Set a timeout for showing the loader after 500ms. // Set a timeout for showing the loader after 500ms.
let loaderTimeout = setTimeout(() => { let loaderTimeout = setTimeout(() => {
loader.style.display = 'block'; loader.style.display = 'flex';
}, 500); }, 500);
// Preload the new image. // Preload the new image.

7
templates/app.html
View File

@ -90,13 +90,16 @@
<!-- Gallery Modal for Images --> <!-- Gallery Modal for Images -->
<div id="gallery-modal" style="display: none;"> <div id="gallery-modal" style="display: none;">
<div id="gallery-loader"></div> <img id="gallery-modal-content" src="" />
<img id="gallery-modal-content" src="" alt="Gallery Image" />
<button class="gallery-nav gallery-prev">‹</button> <button class="gallery-nav gallery-prev">‹</button>
<button class="gallery-nav gallery-next">›</button> <button class="gallery-nav gallery-next">›</button>
<button id="gallery-close">x</button> <button id="gallery-close">x</button>
</div> </div>
<div id="loader-container" style="display: none;">
<div id="gallery-loader"></div>
</div>
<!-- Load main app JS first, then gallery JS --> <!-- Load main app JS first, then gallery JS -->
<script src="{{ url_for('static', filename='app.js') }}"></script> <script src="{{ url_for('static', filename='app.js') }}"></script>
<script src="{{ url_for('static', filename='gallery.js') }}"></script> <script src="{{ url_for('static', filename='gallery.js') }}"></script>