From 6f2c5167948c7730b72f265cb974f8488cc96bdf Mon Sep 17 00:00:00 2001 From: G-Fourteen Date: Thu, 11 Sep 2025 12:54:14 -0600 Subject: [PATCH] Fix screensaver thumbnail gallery layout --- index.html | 14 ++++++- screensaver.js | 49 ++++++++++------------ styles.css | 95 +++++++++++++++++++++---------------------- stylesScreensaver.css | 11 ++++- 4 files changed, 90 insertions(+), 79 deletions(-) diff --git a/index.html b/index.html index 22974d2..38cd6b1 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,19 @@ Screensaver Image
-
+
+ + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot + Empty slot +
diff --git a/screensaver.js b/screensaver.js index 8bbeb76..ea867f2 100644 --- a/screensaver.js +++ b/screensaver.js @@ -35,7 +35,8 @@ document.addEventListener("DOMContentLoaded", () => { let autoPromptEnabled = true; let isFetchingPrompt = false; let lastPromptUpdate = 0; - const MAX_HISTORY = 12; + const MAX_HISTORY = 10; + const EMPTY_THUMBNAIL = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="; const PROMPT_UPDATE_INTERVAL = 20000; let settings = { @@ -320,40 +321,34 @@ document.addEventListener("DOMContentLoaded", () => { return; } - thumbnailContainer.innerHTML = ''; - imageHistory.forEach((imageUrl, index) => { - const thumb = document.createElement('img'); - thumb.src = imageUrl; - thumb.classList.add('thumbnail'); - thumb.title = promptHistory[index] || 'No prompt available'; - thumb.alt = "Thumbnail Image"; - thumb.style.opacity = '1'; - thumb.onerror = () => { - console.log(`Thumbnail ${index + 1} failed to load, using fallback:`, imageUrl); - thumb.src = "https://via.placeholder.com/160x90?text=Image+Failed"; - thumb.style.opacity = '1'; - }; - thumb.onload = () => { - console.log(`Thumbnail ${index + 1} loaded successfully:`, imageUrl); - }; - thumb.onclick = () => showHistoricalImage(index); - const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src; - if (imageUrl === currentImgSrc) { - thumb.classList.add('selected'); - console.log("Highlighted thumbnail as selected:", imageUrl); + const slots = thumbnailContainer.querySelectorAll('img.thumbnail'); + slots.forEach((thumb, index) => { + const imageUrl = imageHistory[index]; + thumb.onclick = null; + thumb.classList.remove('selected'); + thumb.classList.remove('placeholder'); + + if (imageUrl) { + thumb.src = imageUrl; + thumb.title = promptHistory[index] || 'No prompt available'; + thumb.onclick = () => showHistoricalImage(index); + const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src; + if (imageUrl === currentImgSrc) { + thumb.classList.add('selected'); + } + } else { + thumb.src = EMPTY_THUMBNAIL; + thumb.title = ''; + thumb.classList.add('placeholder'); } - thumbnailContainer.appendChild(thumb); - console.log(`Added thumbnail ${index + 1}/${imageHistory.length} to DOM:`, thumb.src); }); - // keep the view scrolled to the latest thumbnail thumbnailContainer.scrollTo({ left: thumbnailContainer.scrollWidth, behavior: 'smooth' }); - console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length); - const offsetWidth = thumbnailContainer.offsetWidth; thumbnailContainer.style.display = 'none'; thumbnailContainer.offsetHeight; thumbnailContainer.style.display = 'flex'; + console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length); console.log("Forced DOM reflow to ensure rendering. Container offsetWidth:", offsetWidth); } diff --git a/styles.css b/styles.css index f02de12..ade0f98 100644 --- a/styles.css +++ b/styles.css @@ -790,47 +790,38 @@ body { transition: opacity var(--transition-duration, 1s) ease; } -.screensaver-thumbnails { - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 12px; - overflow-x: auto; - width: 100%; - height: 120px; - padding: 10px; - background: rgba(0, 0, 0, 0.7); - border-radius: 0; - z-index: 2; - transition: opacity 0.3s ease; - scrollbar-width: thin; - scrollbar-color: #707070 #333333; - white-space: nowrap; - direction: ltr; - scroll-behavior: smooth; -} - -.screensaver-thumbnails::-webkit-scrollbar { - height: 8px; -} - -.screensaver-thumbnails::-webkit-scrollbar-track { - background: #333333; - border-radius: 4px; -} - -.screensaver-thumbnails::-webkit-scrollbar-thumb { - background: #707070; - border-radius: 4px; -} - +.screensaver-thumbnails { + display: flex; + flex-direction: row; + gap: 10px; + overflow-x: auto; + width: 100%; + max-width: 1290px; + padding: 10px; + background: rgba(0, 0, 0, 0.7); + border-radius: 12px; + transition: opacity 0.3s ease; + scrollbar-width: thin; + white-space: nowrap; +} + +.screensaver-thumbnails::-webkit-scrollbar { + height: 8px; +} + +.screensaver-thumbnails::-webkit-scrollbar-track { + background: #333333; + border-radius: 4px; +} + +.screensaver-thumbnails::-webkit-scrollbar-thumb { + background: #707070; + border-radius: 4px; +} + .screensaver-thumbnails img.thumbnail { - width: 160px; - height: 90px; + width: 120px; + height: 80px; object-fit: cover; cursor: pointer; border: 3px solid transparent; @@ -841,15 +832,21 @@ body { opacity: 1; position: static; } - -.screensaver-thumbnails img.thumbnail:hover { - border: 3px solid #00ffcc; - transform: scale(1.05); -} - -.screensaver-thumbnails img.thumbnail.selected { - border: 3px solid #ffcc00; -} + +.screensaver-thumbnails img.thumbnail.placeholder { + opacity: 0.3; + border: 3px dashed #555; + pointer-events: none; +} + +.screensaver-thumbnails img.thumbnail:hover { + border: 3px solid #00ffcc; + transform: scale(1.05); +} + +.screensaver-thumbnails img.thumbnail.selected { + border: 3px solid #ffcc00; +} .screensaver-controls { position: fixed; diff --git a/stylesScreensaver.css b/stylesScreensaver.css index 3b4b1bb..bd0084c 100644 --- a/stylesScreensaver.css +++ b/stylesScreensaver.css @@ -38,10 +38,11 @@ flex-direction: row; gap: 10px; overflow-x: auto; - width: 90%; - max-width: 1200px; + width: 100%; + max-width: 1290px; padding: 10px; border-radius: 12px; + background: rgba(0, 0, 0, 0.7); transition: opacity 0.3s ease; scrollbar-width: thin; white-space: nowrap; @@ -87,6 +88,12 @@ position: static; } +.screensaver-thumbnails img.thumbnail.placeholder { + opacity: 0.3; + border: 3px dashed #555; + pointer-events: none; +} + .screensaver-controls { position: fixed; bottom: 100px;