Fix Gallery View: medium screen devices get 3 max columns and small screen devices 2 max columns.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Changes 4/14/2025
+
+- Fix Gallery View: medium screen devices get 3 max columns and small screen devices 2 max columns.
+
 ## Changes 4/13/2025 v1.1.3
 
 - Decreased header height some more and clickable logo.

js/fileListView.js

@@ -392,16 +392,9 @@ export function renderFileTable(folder, container) {
     bindFileListContextMenu();
 }
 
-/**
- * Similarly, update renderGalleryView to accept an optional container.
- */
 // A helper to compute the max image height based on the current column count.
 function getMaxImageHeight() {
-    // Use the slider value (default to 3 if undefined).
     const columns = parseInt(window.galleryColumns || 3, 10);
-    // Simple scaling: fewer columns yield bigger images.
-    // For instance, if columns === 6, max-height is 150px,
-    // and if columns === 1, max-height could be 150 * 6 = 900px.
     return 150 * (7 - columns); // adjust the multiplier as needed.
 }
 
@@ -417,7 +410,6 @@ function getMaxImageHeight() {
     const numColumns = window.galleryColumns || 3;
 
     // --- Insert slider controls ---
-    // Build the slider HTML.
     const sliderHTML = `
       <div class="gallery-slider" style="margin: 10px; text-align: center;">
         <label for="galleryColumnsSlider" style="margin-right: 5px;">${t('columns')}:</label>
@@ -426,13 +418,12 @@ function getMaxImageHeight() {
       </div>
     `;
 
-    // Set up the grid container using the slider's value.
+    // Set up the grid container using the slider's current value.
     const gridStyle = `display: grid; grid-template-columns: repeat(${numColumns}, 1fr); gap: 10px; padding: 10px;`;
 
-    // Build the gallery container HTML and include the slider above it.
+    // Build the gallery container HTML including the slider.
     let galleryHTML = sliderHTML;
     galleryHTML += `<div class="gallery-container" style="${gridStyle}">`;
-    
     filteredFiles.forEach((file) => {
         let thumbnail;
         if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
@@ -464,9 +455,7 @@ function getMaxImageHeight() {
             ${thumbnail}
           </div>
           <div class="gallery-info" style="margin-top: 5px;">
-            <span class="gallery-file-name" style="display: block; white-space: normal; overflow-wrap: break-word; word-wrap: break-word;">
+            <span class="gallery-file-name" style="display: block; white-space: normal; overflow-wrap: break-word; word-wrap: break-word;">${escapeHTML(file.name)}</span>
-              ${escapeHTML(file.name)}
-            </span>
             ${tagBadgesHTML}
             <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
               <button type="button" class="btn btn-sm btn-success download-btn" 
@@ -492,8 +481,9 @@ function getMaxImageHeight() {
     galleryHTML += "</div>"; // End gallery container.
 
     fileListContent.innerHTML = galleryHTML;
-    createViewToggleButton();
+
-    updateFileActionButtons();
+    // Re-apply slider constraints for the newly rendered slider.
+    updateSliderConstraints();
 
     // Attach share button event listeners.
     document.querySelectorAll(".share-btn").forEach(btn => {
@@ -514,16 +504,12 @@ function getMaxImageHeight() {
     if (slider) {
         slider.addEventListener("input", function () {
             const value = this.value;
-        // Update the slider display.
             document.getElementById("galleryColumnsValue").textContent = value;
-        // Update global value so new renders use the correct value.
             window.galleryColumns = value;
-        // Update the grid columns.
             const galleryContainer = document.querySelector(".gallery-container");
             if (galleryContainer) {
                 galleryContainer.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
             }
-        // Compute the new max image height.
             const newMaxHeight = getMaxImageHeight();
             document.querySelectorAll(".gallery-thumbnail").forEach(img => {
                 img.style.maxHeight = newMaxHeight + "px";
@@ -532,6 +518,41 @@ function getMaxImageHeight() {
     }
 }
 
+// Responsive slider constraints based on screen size.
+function updateSliderConstraints() {
+    const slider = document.getElementById("galleryColumnsSlider");
+    if (!slider) return;
+
+    const width = window.innerWidth;
+    let min = 1, max = 6; // default for larger screens
+
+    if (width < 600) { // phone
+        max = 2;
+    } else if (width < 1024) { // medium screens
+        max = 3;
+    }
+
+    // Adjust current slider value if it exceeds new max.
+    let currentVal = parseInt(slider.value, 10);
+    if (currentVal > max) {
+        currentVal = max;
+        slider.value = max;
+    }
+
+    slider.min = min;
+    slider.max = max;
+    document.getElementById("galleryColumnsValue").textContent = currentVal;
+
+    // Update grid columns with new slider value.
+    const galleryContainer = document.querySelector(".gallery-container");
+    if (galleryContainer) {
+        galleryContainer.style.gridTemplateColumns = `repeat(${currentVal}, 1fr)`;
+    }
+}
+
+window.addEventListener('load', updateSliderConstraints);
+window.addEventListener('resize', updateSliderConstraints);
+
 export function sortFiles(column, folder) {
     if (sortOrder.column === column) {
         sortOrder.ascending = !sortOrder.ascending;