Adjust Gallery View max columns based on screen size & Adjust headerTitle to update globally

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Changes 4/15/2025
+
+- Adjust Gallery View max columns based on screen size
+- Adjust headerTitle to update globally
+
 ## Changes 4/14/2025
 
 - Fix Gallery View: medium screen devices get 3 max columns and small screen devices 2 max columns.

js/auth.js

@@ -93,7 +93,7 @@ function updateLoginOptionsUIFromStorage() {
   });
 }
 
-function loadAdminConfigFunc() {
+export function loadAdminConfigFunc() {
   return fetch("getConfig.php", { credentials: "include" })
     .then(response => response.json())
     .then(config => {

js/authModals.js

@@ -1,6 +1,7 @@
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 import { t, applyTranslations, setLocale } from './i18n.js';
+import { loadAdminConfigFunc } from './auth.js';
 
 const version = "v1.1.3";
 // Use t() for the admin panel title. (Make sure t("admin_panel") returns "Admin Panel" in English.)
@@ -687,6 +688,7 @@ export function openAdminPanel() {
           openUserPermissionsModal();
         });
         document.getElementById("saveAdminSettings").addEventListener("click", () => {
+          
           const disableFormLoginCheckbox = document.getElementById("disableFormLogin");
           const disableBasicAuthCheckbox = document.getElementById("disableBasicAuth");
           const disableOIDCLoginCheckbox = document.getElementById("disableOIDCLogin");
@@ -705,6 +707,7 @@ export function openAdminPanel() {
             return;
           }
           const newHeaderTitle = document.getElementById("headerTitle").value.trim();
+          
           const newOIDCConfig = {
             providerUrl: document.getElementById("oidcProviderUrl").value.trim(),
             clientId: document.getElementById("oidcClientId").value.trim(),
@@ -735,6 +738,7 @@ export function openAdminPanel() {
                 // Update the captured initial state since the changes have now been saved.
                 captureInitialAdminConfig();
                 closeAdminPanel();
+                loadAdminConfigFunc();
               
               } else {
                 showToast(t("error_updating_settings") + ": " + (response.error || t("unknown_error")));

js/fileListView.js

@@ -525,15 +525,21 @@ function updateSliderConstraints() {
     if (!slider) return;
 
     const width = window.innerWidth;
-    let min = 1, max = 6; // default for larger screens
+    let min = 1;
+    let max;
 
-    if (width < 600) { // phone
+    // Set maximum based on screen size.
+    if (width < 600) {           // small devices (phones)
         max = 2;
-    } else if (width < 1024) { // medium screens
+    } else if (width < 1024) {     // medium devices
         max = 3;
+    } else if (width < 1440) {     // between medium and large devices
+        max = 4;
+    } else {                     // large devices and above
+        max = 6;
     }
 
-    // Adjust current slider value if it exceeds new max.
+    // Adjust the slider's current value if needed
     let currentVal = parseInt(slider.value, 10);
     if (currentVal > max) {
         currentVal = max;
@@ -544,7 +550,7 @@ function updateSliderConstraints() {
     slider.max = max;
     document.getElementById("galleryColumnsValue").textContent = currentVal;
 
-    // Update grid columns with new slider value.
+    // Update the grid layout based on the current slider value.
     const galleryContainer = document.querySelector(".gallery-container");
     if (galleryContainer) {
         galleryContainer.style.gridTemplateColumns = `repeat(${currentVal}, 1fr)`;

js/main.js

@@ -2,7 +2,7 @@ import { sendRequest } from './networkUtils.js';
 import { toggleVisibility, toggleAllCheckboxes, updateFileActionButtons, showToast } from './domUtils.js';
 import { loadFolderTree } from './folderManager.js';
 import { initUpload } from './upload.js';
-import { initAuth, checkAuthentication } from './auth.js';
+import { initAuth, checkAuthentication, loadAdminConfigFunc } from './auth.js';
 import { setupTrashRestoreDelete } from './trashRestoreDelete.js';
 import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDrop.js';
 import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
@@ -60,6 +60,8 @@ window.openDownloadModal = openDownloadModal;
 window.currentFolder = "root";
 
 document.addEventListener("DOMContentLoaded", function () {
+
+  loadAdminConfigFunc(); // Then fetch the latest config and update.
   // Retrieve the saved language from localStorage; default to "en"
   const savedLanguage = localStorage.getItem("language") || "en";
   // Set the locale based on the saved language
@@ -84,6 +86,7 @@ document.addEventListener("DOMContentLoaded", function () {
         initUpload();
         loadFolderTree();
         setupTrashRestoreDelete();
+        loadAdminConfigFunc();
 
         const helpBtn = document.getElementById("folderHelpBtn");
         const helpTooltip = document.getElementById("folderHelpTooltip");