joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ryan
2025-04-14 00:29:30 -04:00
committed by GitHub
parent a897d1734f
commit a5fbcdef88
2 changed files with 152 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -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.

71
js/fileListView.js
View File

@@ -126,7 +126,7 @@ function searchFiles(searchTerm) {
const fuse = new Fuse(fileData, options);
let results = fuse.search(searchTerm);
return results.map(result => result.item);
}
}
/**
* --- VIEW MODE TOGGLE BUTTON & Helpers ---
@@ -170,7 +170,7 @@ export function createViewToggleButton() {
};
return toggleBtn;
}
}
export function formatFolderName(folder) {
if (folder === "root") return "(Root)";
@@ -392,20 +392,13 @@ 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.
}
}
export function renderGalleryView(folder, container) {
export function renderGalleryView(folder, container) {
const fileListContent = container || document.getElementById("fileList");
const searchTerm = (window.currentSearchTerm || "").toLowerCase();
const filteredFiles = searchFiles(searchTerm);
@@ -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;">
${escapeHTML(file.name)}
</span>
<span class="gallery-file-name" style="display: block; white-space: normal; overflow-wrap: break-word; word-wrap: break-word;">${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 => {
@@ -512,26 +502,57 @@ function getMaxImageHeight() {
// --- Slider Event Listener ---
const slider = document.getElementById("galleryColumnsSlider");
if (slider) {
slider.addEventListener("input", function() {
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";
});
});
}
}
// 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;