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

72
website/public/portfolio.html
View File

@@ -335,68 +335,54 @@
<script src="/assets/js/shopping.js"></script> <script src="/assets/js/shopping.js"></script>
<script> <script>
let portfolioProjects = []; let portfolioProjects = [];
// Open project modal // Open project modal
function openProjectModal(projectId) { function openProjectModal(projectId) {
try { const project = portfolioProjects.find((p) => p.id === projectId);
const project = portfolioProjects.find((p) => p.id === projectId); if (!project) {
if (!project) { console.error('[Portfolio] Project not found:', projectId);
console.error('[Portfolio] Project not found:', projectId); return;
return; }
}
// Validate project data if (!project.title) {
if (!project.title) { console.error('[Portfolio] Invalid project data - missing title:', project);
console.error('[Portfolio] Invalid project data - missing title:', project); return;
return; }
}
const modal = document.getElementById("projectModal"); const modal = document.getElementById("projectModal");
const modalContent = document.getElementById("modalContent"); const modalContent = document.getElementById("modalContent");
// Safe template with validated data if (!modal || !modalContent) {
modalContent.innerHTML = ` 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;"> <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}" alt="${project.title}"
onerror="this.src='/assets/images/placeholder.svg'" onerror="this.src='/assets/images/placeholder.svg'"
style="width: 100%; height: 100%; object-fit: cover;" /> style="width: 100%; height: 100%; object-fit: cover;" />
</div> </div>
<div style="padding: 40px; background: white;"> <div style="padding: 40px; background: white;">
${ ${categoryBadge}
project.category <h2 style="font-size: 36px; font-weight: 700; margin: 0 0 24px 0; color: #1a1a1a; line-height: 1.2;">${project.title}</h2>
? `<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>
<div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;"> <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> </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> </div>
`; `;
modal.style.display = "block"; modal.style.display = "block";
modalContent.scrollTop = 0; modalContent.scrollTop = 0;
document.body.style.overflow = "hidden"; 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 // Close project modal
function closeProjectModal() { function closeProjectModal() {
document.getElementById("projectModal").style.display = "none"; document.getElementById("projectModal").style.display = "none";