FrederikBaerentsen/BrickTracker
4
4
Fork 3
Code Issues 9 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Added modal to /misisng (fixed #11)

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-04-26 16:57:26 +02:00
parent 7dd5977fd3
commit 4279403183
1 changed files with 112 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
templates/missing.html
View File

@ -8,6 +8,64 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
/* Modal Styles */
#lightbox-modal {
display: none;
position: fixed;
z-index: 1000;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.lightbox-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#lightbox-text {
position: absolute;
bottom: 20px; /* Adjust as needed */
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */
color: white;
text-align: center;
}
#lightbox-modal .close {
position: absolute;
top: 10px;
right: 25px;
font-size: 50px;
color: white;
cursor: pointer;
}
#lightbox-modal img {
display: block;
margin: 0 auto;
max-width: 90%;
max-height: 90%;
}
</style>
</head>
<body>
@ -54,9 +112,9 @@
{% for brick in missing_list %}
<tr>
{% if brick[4] == 'nil' %}
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ brick[0] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
{% else %}
<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" alt="{{ brick[0] }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
{% endif %}
<td>{{ brick[0] }}</td>
<td>{{ brick[1] }}</td>
@ -69,7 +127,59 @@
</table>
</div>
</center>
<div id="lightbox-modal">
<div class="lightbox-wrapper">
<span class="close">&times;</span>
<img class="lightbox-content" id="lightbox-image">
<div class="text-container" id="lightbox-text"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
const lightboxModal = document.getElementById('lightbox-modal');
const lightboxImage = document.getElementById('lightbox-image');
const lightboxText = document.getElementById('lightbox-text');
const closeModal = document.querySelector('.close');
lightboxTrigger.forEach(function (element) {
element.addEventListener('click', function () {
const imgSrc = element.getAttribute('src');
textContent = '';
console.log(element.getAttribute('alt'));
textContent = element.getAttribute('alt');
// textContent = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
lightboxText.textContent = textContent;
lightboxImage.setAttribute('src', imgSrc);
lightboxModal.style.display = 'block';
});
});
closeModal.addEventListener('click', function () {
lightboxModal.style.display = 'none';
});
lightboxModal.addEventListener('click', function (event) {
if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
// Dismiss only if the clicked element is part of the content area
lightboxModal.style.display = 'none';
}
});
// Dismiss the lightbox when clicking outside the content area (i.e., the background)
lightboxModal.addEventListener('click', function (event) {
if (event.target != lightboxModal) {
lightboxModal.style.display = 'none';
}
});
});
</script>
</body>
</html>