PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Simplify openProjectModal function - remove problematic date handling and try-catch

Browse Source
This commit is contained in:
Local Server
2026-01-14 07:56:44 -06:00
parent 3af8d630f1
commit b1f684e4fa
1 changed files with 32 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
website/public/portfolio.html
View File

@@ -335,68 +335,54 @@
<script src="/assets/js/shopping.js"></script>
<script>
let portfolioProjects = [];
// Open project modal
function openProjectModal(projectId) {
try {
const project = portfolioProjects.find((p) => p.id === projectId);
if (!project) {
console.error('[Portfolio] Project not found:', projectId);
return;
}
// Validate project data
if (!project.title) {
console.error('[Portfolio] Invalid project data - missing title:', project);
return;
}
const modal = document.getElementById("projectModal");
const modalContent = document.getElementById("modalContent");
// Safe template with validated data
modalContent.innerHTML = `
const project = portfolioProjects.find((p) => p.id === projectId);
if (!project) {
console.error('[Portfolio] Project not found:', projectId);
return;
}
if (!project.title) {
console.error('[Portfolio] Invalid project data - missing title:', project);
return;
}
const modal = document.getElementById("projectModal");
const modalContent = document.getElementById("modalContent");
if (!modal || !modalContent) {
console.error('[Portfolio] Modal elements not found');
return;
}
// Build category badge HTML
const categoryBadge = project.category
? `<span style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.5px; text-transform: uppercase;">${project.category}</span>`
: '';
// Build modal content
modalContent.innerHTML = `
<div class="project-image" style="width: 100%; height: 450px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); flex-shrink: 0;">
<img src="${project.featuredimage || project.imageurl || "/assets/images/placeholder.svg"}"
<img src="${project.featuredimage || project.imageurl || '/assets/images/placeholder.svg'}"
alt="${project.title}"
onerror="this.src='/assets/images/placeholder.svg'"
style="width: 100%; height: 100%; object-fit: cover;" />
</div>
<div style="padding: 40px; background: white;">
${
project.category
? `<span style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.5px; text-transform: uppercase;">${project.category}</span>`
: ""
}
<h2 style="font-size: 36px; font-weight: 700; margin: 0 0 24px 0; color: #1a1a1a; line-height: 1.2;">${
project.title
}</h2>
${categoryBadge}
<h2 style="font-size: 36px; font-weight: 700; margin: 0 0 24px 0; color: #1a1a1a; line-height: 1.2;">${project.title}</h2>
<div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;">
${project.description || "No description available."}
${project.description || 'No description available.'}
</div>
${
project.createdat
? `<div style="padding-top: 24px; border-top: 2px solid #f0f0f0; color: #888; font-size: 15px; display: flex; align-items: center; gap: 8px;">
<i class="bi bi-calendar3" style="font-size: 18px;"></i>
<span style="font-weight: 500;">Created on ${new Date(
project.createdat
).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}</span>
</div>`
: ""
}
</div>
`;
modal.style.display = "block";
modalContent.scrollTop = 0;
document.body.style.overflow = "hidden";
} catch (error) {
console.error('[Portfolio] Error opening modal:', error);
alert('Unable to open project details. Please try again.');
}
}
// Close project modal
function closeProjectModal() {
document.getElementById("projectModal").style.display = "none";