improvements for images (text overlapping fix, image viewer, page width fix)

static/css/style-fixedwidth.css

@@ -0,0 +1,7 @@
+/* Ensure the body width is fixed and prevents resizing by the user */
+body {
+    overflow-x: hidden;   /* Prevent horizontal scrolling by user */
+    width: 100vw;         /* Fix the width of the viewport */
+    max-width: 100vw;     /* Prevent page from extending wider than the viewport */
+    box-sizing: border-box;
+}

static/css/style.css

@@ -257,6 +257,7 @@ html {
     display: flex;
     flex-wrap: wrap;
     margin-right: 35.4%;
+    max-width: 100%;
     position: relative;
 }
 
@@ -338,7 +339,7 @@ html {
     height: 100%;
     width: 100%;
     object-fit: cover;
-    vertical-align: bottom;
+    display: block;
     border-radius: 12px;
     box-sizing: border-box;
     border: 1px solid var(--border);
@@ -1997,3 +1998,76 @@ body, h1, p, a, input, button {
         --box-shadow: #ffffff20; 
     }
 } */
+
+        /* Image Viewer Overlay */
+        #image-viewer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.9);
+            z-index: 999;
+            display: none;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #image-viewer {
+            position: relative;
+            max-width: 80%;
+            max-height: 80%;
+            background: #fff;
+            padding: 20px;
+            box-sizing: border-box;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        #viewer-image {
+            max-width: 100%;
+            max-height: 60vh;
+        }
+
+        #viewer-info {
+            margin-top: 15px;
+        }
+
+        #viewer-title {
+            font-size: 18px;
+            color: #000;
+            margin-bottom: 10px;
+        }
+
+        #viewer-source-button {
+            color: #1a0dab;
+            text-decoration: none;
+            font-size: 16px;
+        }
+
+        #viewer-close-button,
+        #viewer-prev-button,
+        #viewer-next-button {
+            position: absolute;
+            top: 10px;
+            color: #fff;
+            font-size: 36px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        #viewer-close-button {
+            right: 10px;
+        }
+
+        #viewer-prev-button {
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        #viewer-next-button {
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }

templates/images.html

@@ -8,6 +8,7 @@
     {{ end }}
     <title>{{.Query}} - Ocásek</title>
     <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/style-fixedwidth.css">
     <link rel="stylesheet" href="/static/css/{{.Theme}}.css">
     <link rel="search" type="application/opensearchdescription+xml" title="Ocásek" href="/opensearch.xml">
 </head>
@@ -66,23 +67,23 @@
         <button class="results-save" name="t" value="image">Apply settings</button>
     </form>  
     <div class="search-results" id="results"> 
+        
         <!-- Results go here -->
         {{ if .Results }}
             <div class="images images_viewer_hidden">
                 <!-- Images Grid -->
-                {{ range .Results }}
+                {{ range $index, $result := .Results }}
-                    <div class="image">
+                <div class="image">
-                        <a class="clickable" href="{{ .ThumbProxy }}" target="_blank">
+                    <img src="{{ .ThumbProxy }}" alt="{{ .Title }}" data-media="{{ .Media }}" class="clickable">
-                            <img src="{{ .ThumbProxy }}" alt="{{ .Title }}" data-media="{{ .Media }}">
+                    <div class="resolution">{{ .Width }} × {{ .Height }}</div>
-                            <div class="resolution">{{ .Width }} × {{ .Height }}</div>
+                    <div class="details">
-                            <div class="details">
+                        <span class="img_title clickable">{{ .Title }}</span>
-                                <div class="img_title">{{ .Title }}</div>
+                        <a href="{{ .Source }}" target="_blank" class="img_source">Source</a>
-                                <div class="img_source"><a href="{{ .Source }}" target="_blank">Source</a></div>
-                            </div>
-                        </a>
                     </div>
+                </div>                
                 {{ end }}
             </div>
+
             <noscript>
                 <div class="prev-next prev-img">
                     <form action="/search" method="get">
@@ -108,9 +109,151 @@
     <div class="message-bottom-left" id="message-bottom-left">
         <span>Searching for new results...</span>
     </div>
+
+    <div id="image-viewer-overlay" style="display: none;"></div>
+
     <div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image"></div>
     <script defer src="/static/js/dynamicscrolling.js"></script>
     <script defer src="/static/js/autocomplete.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            let viewerOpen = false;
+        
+            const viewerOverlay = document.getElementById('image-viewer-overlay');
+            viewerOverlay.innerHTML = `
+                <div id="image-viewer">
+                    <span id="viewer-close-button" class="material-icons">close</span>
+                    <span id="viewer-prev-button" class="material-icons">arrow_back</span>
+                    <span id="viewer-next-button" class="material-icons">arrow_forward</span>
+                    <div id="viewer-image-container">
+                        <img id="viewer-image" src="" alt="">
+                    </div>
+                    <div id="viewer-info">
+                        <div id="viewer-title"></div>
+                        <a id="viewer-source-button" href="" target="_blank">Visit Page</a>
+                    </div>
+                </div>
+            `;
+        
+            function openImageViewer(element) {
+                const parentImageDiv = element.closest('.image');
+                if (!parentImageDiv) return;
+        
+                const imgElement = parentImageDiv.querySelector('img.clickable');
+                const mediaUrl = imgElement.dataset.media;
+                const title = imgElement.alt;
+                const sourceUrl = parentImageDiv.querySelector('.img_source').href;
+        
+                if (!mediaUrl || viewerOpen) {
+                    return;  // Don't open if data is missing or viewer is already open
+                }
+                viewerOpen = true;
+        
+                const viewerImage = document.getElementById('viewer-image');
+                const viewerTitle = document.getElementById('viewer-title');
+                const viewerSourceButton = document.getElementById('viewer-source-button');
+        
+                viewerImage.src = mediaUrl;
+                viewerTitle.textContent = title;
+                viewerSourceButton.href = sourceUrl;
+                viewerOverlay.style.display = 'flex';
+            }
+        
+            // Attach event listener to the document body
+            document.body.addEventListener('click', function(e) {
+                let target = e.target;
+                let clickableElement = target.closest('img.clickable, .img_title.clickable');
+        
+                if (clickableElement) {
+                    e.preventDefault();
+                    openImageViewer(clickableElement);
+                }
+            });
+        
+            function closeImageViewer() {
+                viewerOverlay.style.display = 'none';
+                viewerOpen = false;
+            }
+        
+            // Close viewer on overlay or button click
+            document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
+            viewerOverlay.addEventListener('click', function(e) {
+                if (e.target === viewerOverlay) {
+                    closeImageViewer();
+                }
+            });
+        
+            // Handle keyboard events for closing and navigation
+            document.addEventListener('keydown', function(e) {
+                if (viewerOverlay.style.display === 'flex') {
+                    if (e.key === 'Escape') {
+                        closeImageViewer();
+                    }
+                }
+            });
+        });
+        </script>
+        
+        
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            let imagesContainer = document.querySelector('.images');
+            let observer;
+        
+            // Function to trim image titles based on the image width
+            function trimTitles() {
+                const images = document.querySelectorAll('.images .image');
+                images.forEach((element) => {
+                    const imgElement = element.querySelector('img.clickable');
+                    const titleElement = element.querySelector('.img_title.clickable');
+                    const detailsElement = element.querySelector('.details');
+        
+                    if (imgElement.complete && imgElement.naturalWidth) {
+                        const imageWidth = imgElement.clientWidth;
+        
+                        // Set the width of the details div and title to match the image width
+                        detailsElement.style.width = imageWidth + 'px';
+                        titleElement.style.maxWidth = imageWidth + 'px';
+                    }
+        
+                    // // Add load event listener in case images load dynamically
+                    // imgElement.addEventListener('load', function() {
+                    //     const imageWidth = imgElement.clientWidth;
+                    //     detailsElement.style.width = imageWidth + 'px';
+                    //     titleElement.style.maxWidth = imageWidth + 'px';
+                    // });
+                });
+            }
+        
+            // Call trimTitles periodically to account for dynamic loading, not happy about this one
+            setInterval(() => {
+                trimTitles();
+            }, 10);
+        
+            // Observe for dynamically added images
+            function observeNewImages() {
+                observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        mutation.addedNodes.forEach(function(node) {
+                            if (node.nodeType === 1 && node.classList.contains('image')) {
+                                trimTitles();
+                            }
+                        });
+                    });
+                });
+        
+                // Observe the images container for changes
+                observer.observe(imagesContainer, { childList: true, subtree: true });
+            }
+        
+            // Run initial title trimming after page load
+            trimTitles();
+        
+            // Start observing for dynamic image loading
+            observeNewImages();
+        });
+    </script>
+         
     <script>
         // Check if JavaScript is enabled and modify the DOM accordingly
         document.getElementById('content').classList.remove('js-enabled');