visionmercer/isosilo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed buttons

Browse source
This commit is contained in:
visionmercer 2026-04-15 12:22:43 +02:00
commit db499d84a9
4 changed files with 72 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

12
static/css/style.css
View file

@ -123,15 +123,23 @@ main {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.dl-btn {
/* Button style */
.btn {
border: 1px solid var(--accent);
color: var(--accent);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
text-decoration: none;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background 0.2s, color 0.2s;
}
.dl-btn:hover {
.btn:hover {
background: var(--accent);
color: #fff;
}

115
static/js/modal.js
View file

@ -1,71 +1,72 @@
// Modal functionality for ISO info popups
document.addEventListener("DOMContentLoaded", function () {
// Get modal elements
const modal = document.getElementById("isoModal");
const modalContent = document.getElementById("modalContent");
const closeBtn = document.querySelector(".close-btn");
const modalOverlay = document.querySelector(".modal-overlay");
// Get modal elements
const modal = document.getElementById("isoModal");
const modalContent = document.getElementById("modalContent");
const closeBtn = document.querySelector(".close-btn");
const modalOverlay = document.querySelector(".modal-overlay");
// Function to open modal with ISO info
function openModal(title, description, imageSrc) {
document.getElementById("modalTitle").textContent = title;
document.getElementById("modalDescription").textContent =
description || "No description available";
// Function to open modal with ISO info
function openModal(title, description, imageSrc) {
document.getElementById("modalTitle").textContent = title;
document.getElementById("modalDescription").textContent = description ||
"No description available";
const modalImage = document.getElementById("modalImage");
if (imageSrc) {
modalImage.src = imageSrc;
modalImage.style.display = "block";
} else {
modalImage.style.display = "none";
const modalImage = document.getElementById("modalImage");
if (imageSrc) {
modalImage.src = imageSrc;
modalImage.style.display = "block";
} else {
modalImage.style.display = "none";
}
modal.classList.add("visible");
document.body.style.overflow = "hidden";
}
modal.classList.add("visible");
document.body.style.overflow = "hidden";
}
// Function to close modal
function closeModal() {
modal.classList.remove("visible");
document.body.style.overflow = "";
}
// Event listeners for close button and overlay
if (closeBtn) {
closeBtn.addEventListener("click", closeModal);
}
if (modalOverlay) {
modalOverlay.addEventListener("click", function (e) {
if (e.target === modalOverlay) {
closeModal();
}
});
}
// Close modal when Escape key is pressed
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && modal.style.display === "block") {
closeModal();
// Function to close modal
function closeModal() {
modal.classList.remove("visible");
document.body.style.overflow = "";
}
});
// Add click handlers to all ISO info buttons
const infoButtons = document.querySelectorAll(".info-btn");
infoButtons.forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
// Event listeners for close button and overlay
if (closeBtn) {
closeBtn.addEventListener("click", closeModal);
}
const isoName = this.getAttribute("data-iso-name");
const description = this.getAttribute("data-description");
const imageSrc = this.getAttribute("data-image-src");
if (modalOverlay) {
modalOverlay.addEventListener("click", function (e) {
if (e.target === modalOverlay) {
closeModal();
}
});
}
openModal(isoName, description, imageSrc);
// Close modal when Escape key is pressed
document.addEventListener("keydown", function (e) {
// Change: Check for the "visible" class instead of style.display
if (e.key === "Escape" && modal.classList.contains("visible")) {
closeModal();
}
});
});
// Expose functions to global scope for potential future use
window.openISOModal = openModal;
window.closeISOModal = closeModal;
// Add click handlers to all ISO info buttons
// Change: Use the new ".info-trigger" class you added to the HTML
const infoButtons = document.querySelectorAll(".info-trigger");
infoButtons.forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
const isoName = this.getAttribute("data-iso-name");
const description = this.getAttribute("data-description");
const imageSrc = this.getAttribute("data-image-src");
openModal(isoName, description, imageSrc);
});
});
// Expose functions to global scope for potential future use
window.openISOModal = openModal;
window.closeISOModal = closeModal;
});