From f9fefb9b67108662f7f6007a9c0ff23c566170ea Mon Sep 17 00:00:00 2001 From: DariusIII Date: Fri, 31 Oct 2025 11:28:27 +0100 Subject: [PATCH] Update details page --- resources/css/csp-safe.css | 71 +++++++++++ resources/js/csp-safe.js | 127 +++++++++++++++++++ resources/views/details/index.blade.php | 2 +- resources/views/partials/nfo-modal.blade.php | 2 +- 4 files changed, 200 insertions(+), 2 deletions(-) diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css index 712364856..01a247c08 100644 --- a/resources/css/csp-safe.css +++ b/resources/css/csp-safe.css @@ -501,6 +501,77 @@ code.api-token::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5); } +/* Image Modal Styles */ +.image-modal-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999; + background-color: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(4px); + align-items: center; + justify-content: center; + padding: 2rem; +} + +.image-modal-backdrop.hidden { + display: none !important; +} + +.image-modal-backdrop:not(.hidden) { + display: flex; + animation: fadeIn 0.3s ease-out; +} + +.image-modal-backdrop:not(.hidden) .image-modal-container { + animation: modalSlideIn 0.3s ease-out; +} + +.image-modal-container { + position: relative; + max-width: 90vw; + max-height: 90vh; +} + +.image-modal-close { + position: absolute; + top: -3rem; + right: 0; + background-color: rgba(255, 255, 255, 0.1); + border: 2px solid rgba(255, 255, 255, 0.3); + color: white; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease-in-out; + font-size: 1.25rem; +} + +.image-modal-close:hover { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.5); + transform: scale(1.1); +} + +/* NFO Modal Styles */ +#nfoModal { + display: none; +} + +#nfoModal.hidden { + display: none !important; +} + +#nfoModal:not(.hidden) { + display: block; +} + .confirmation-modal-footer .btn-confirm:active { transform: translateY(0); } diff --git a/resources/js/csp-safe.js b/resources/js/csp-safe.js index 885371d71..0fe5744e4 100644 --- a/resources/js/csp-safe.js +++ b/resources/js/csp-safe.js @@ -423,6 +423,7 @@ function initNfoModal() { // Show modal modal.classList.remove('hidden'); + modal.style.display = 'block'; // Reset content with loading message content.innerHTML = '
Loading NFO...
'; @@ -453,6 +454,7 @@ function initNfoModal() { const modal = document.getElementById('nfoModal'); if (modal) { modal.classList.add('hidden'); + modal.style.display = 'none'; } }; @@ -2316,6 +2318,131 @@ function showExpiryToast(message, type) { }, 3000); } +// Page-specific initialization functions +function initMyMovies() { + // Placeholder for MyMovies page specific functionality + // Currently no additional functionality needed +} + +function initAuthPages() { + // Placeholder for auth pages specific functionality + // Currently no additional functionality needed +} + +function initProfileEdit() { + // Placeholder for profile edit page specific functionality + // Currently no additional functionality needed +} + +function initDetailsPageImageModal() { + // Handle image modal triggers on release details page + const imageModalTriggers = document.querySelectorAll('.image-modal-trigger'); + const imageModal = document.getElementById('imageModal'); + const imageModalImage = document.getElementById('imageModalImage'); + const imageModalTitle = document.getElementById('imageModalTitle'); + const closeButtons = document.querySelectorAll('[data-close-image-modal]'); + + if (!imageModal || !imageModalImage || !imageModalTitle) { + return; // Not on the details page + } + + // Add click handlers to image triggers + imageModalTriggers.forEach(function(trigger) { + trigger.addEventListener('click', function(e) { + e.preventDefault(); + const imageUrl = this.getAttribute('data-image-url'); + const imageTitle = this.getAttribute('data-image-title') || 'Image Preview'; + + // Update the full image URL (replace _thumb with the full image) + const fullImageUrl = imageUrl.replace('_thumb.jpg', '.jpg'); + + imageModalImage.src = fullImageUrl; + imageModalTitle.textContent = imageTitle; + imageModal.classList.remove('hidden'); + imageModal.style.display = 'flex'; + }); + }); + + // Add click handler to close button + closeButtons.forEach(function(closeBtn) { + closeBtn.addEventListener('click', function(e) { + e.preventDefault(); + imageModal.classList.add('hidden'); + imageModal.style.display = 'none'; + }); + }); + + // Close modal when clicking on backdrop + imageModal.addEventListener('click', function(e) { + if (e.target === imageModal) { + imageModal.classList.add('hidden'); + imageModal.style.display = 'none'; + } + }); + + // Close modal with Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && !imageModal.classList.contains('hidden')) { + imageModal.classList.add('hidden'); + imageModal.style.display = 'none'; + } + }); +} + +function initAddToCart() { + // Add to cart functionality is already handled in initCartFunctionality() + // This is just a placeholder for backward compatibility +} + +function initMoviesLayoutToggle() { + // Placeholder for movies layout toggle functionality + // Currently no additional functionality needed +} + +function initProfilePage() { + // Placeholder for profile page specific functionality + // Progress bars and charts are handled elsewhere +} + +function initMobileEnhancements() { + // Handle mobile-specific enhancements + const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle'); + if (mobileSidebarToggle) { + mobileSidebarToggle.addEventListener('click', function() { + const sidebar = document.getElementById('sidebar'); + if (sidebar) { + sidebar.classList.toggle('hidden'); + sidebar.classList.toggle('flex'); + } + }); + } +} + +function initAdminDashboardCharts() { + // Placeholder for admin dashboard charts + // Chart initialization happens when the admin dashboard loads +} + +function initAdminGroups() { + // Placeholder for admin groups functionality + // Group management is handled in event delegation +} + +function initTinyMCE() { + // Placeholder for TinyMCE initialization + // TinyMCE is loaded separately when needed +} + +function initAdminSpecificFeatures() { + // Placeholder for admin-specific features + // Most admin features are handled in dedicated functions +} + +function initRecentActivityRefresh() { + // Placeholder for recent activity auto-refresh + // Activity refresh is handled on the admin dashboard +} + // Theme Management (moved from main.blade.php) function initThemeManagement() { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php index 64ec84f38..f8e1c6794 100644 --- a/resources/views/details/index.blade.php +++ b/resources/views/details/index.blade.php @@ -922,7 +922,7 @@ @endsection -