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

BIN
isosilo Executable file
View file

Binary file not shown.

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;
});

16
templates/index.html
View file

@ -63,29 +63,25 @@
{{if .Description}}{{.Description}}{{else}}ISO Disk
Image{{end}}
</p>
<div
style="margin-top: 1rem; display: flex; gap: 0.5rem"
>
<div style="margin-top: 1rem; display: flex; gap: 0.5rem">
<button
class="info-btn dl-btn"
class="btn info-trigger"
data-iso-name="{{.Name}}"
data-description="{{if .Description}}{{.Description}}{{else}}No description available{{end}}"
{{if
.HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
{{end}}
{{if .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"{{end}}
>
Info
</button>
<a
href="/browse/{{urlenc .RelativePath}}"
class="dl-btn"
class="btn"
>Browse</a
>
<a
href="/raw/{{urlenc .RelativePath}}"
class="dl-btn"
class="btn"
download
>ISO</a
>Download ISO</a
>
</div>
</div>