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

smaller screen size fixes

Browse Source
This commit is contained in:
Ryan
2025-03-09 17:17:07 -04:00
committed by GitHub
parent 142e2b714d
commit bdb12d66d7
3 changed files with 280 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
fileManager.js
View File

@@ -107,40 +107,42 @@ export function renderFileTable(folder) {
const currentPage = window.currentPage || 1;
const totalFiles = filteredFiles.length;
const totalPages = Math.ceil(totalFiles / itemsPerPage);
const safeSearchTerm = escapeHTML(searchTerm);
// 1. Top controls: Responsive row with search box on the left and Prev/Next on the right.
const topControlsHTML = `
<div class="row align-items-center mb-3">
<!-- Search box: occupies 8 columns on medium+ screens -->
<div class="col-12 col-md-5">
<div class="input-group" style="max-width: 500px;">
<div class="input-group-prepend">
<span class="input-group-text" id="searchIcon">
<i class="material-icons">search</i>
</span>
<div class="row align-items-center mb-3">
<!-- Search box: full width on small, 8 columns on md+ -->
<div class="col-12 col-md-8 mb-2 mb-md-0">
<div class="input-group" style="max-width: 100%;">
<div class="input-group-prepend">
<span class="input-group-text" id="searchIcon">
<i class="material-icons">search</i>
</span>
</div>
<input
type="text"
id="searchInput"
class="form-control"
placeholder="Search files..."
value="${safeSearchTerm}"
aria-describedby="searchIcon"
>
</div>
</div>
<!-- Prev/Next buttons: full width on small, 4 columns on md+ -->
<div class="col-12 col-md-4 text-left">
<div class="d-flex justify-content-center justify-content-md-start align-items-center">
<button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">
Prev
</button>
<span style="margin: 0 8px; white-space: nowrap;">Page ${currentPage} of ${totalPages || 1}</span>
<button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">
Next
</button>
</div>
<input
type="text"
id="searchInput"
class="form-control"
placeholder="Search files..."
value="${searchTerm}"
aria-describedby="searchIcon"
>
</div>
</div>
<!-- Prev/Next buttons: occupies 4 columns on medium+ screens, left-aligned -->
<div class="col-12 col-md-4 text-left mt-2 mt-md-0">
<button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">
Prev
</button>
<span style="margin: 0 8px;">Page ${currentPage} of ${totalPages || 1}</span>
<button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">
Next
</button>
</div>
</div>
`;
`;
// 2. Build the File Table with Bootstrap styling.
let tableHTML = `
@@ -185,30 +187,32 @@ export function renderFileTable(folder) {
const safeUploader = escapeHTML(file.uploader || "Unknown");
tableBody += `
<tr onclick="toggleRowSelection(event, '${safeFileName}')" style="cursor:pointer;">
<td>
<input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
</td>
<td>${safeFileName}</td>
<td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
<td class="hide-small" style="white-space: nowrap;">${safeUploaded}</td>
<td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
<td class="hide-small" style="white-space: nowrap;">${safeUploader}</td>
<td>
<div style="display: inline-flex; align-items: center; gap: 5px;">
<a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
${isEditable ? `
<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
Edit
</button>
` : ""}
<button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
Rename
<tr onclick="toggleRowSelection(event, '${safeFileName}')" style="cursor:pointer;">
<td>
<input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
</td>
<td>${safeFileName}</td>
<td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
<td class="hide-small" style="white-space: nowrap;">${safeUploaded}</td>
<td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
<td class="hide-small" style="white-space: nowrap;">${safeUploader}</td>
<td>
<div class="button-wrap">
<a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>
Download
</a>
${isEditable ? `
<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
Edit
</button>
</div>
</td>
</tr>
`;
` : ""}
<button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
Rename
</button>
</div>
</td>
</tr>
`;
});
} else {
tableBody += `<tr><td colspan="7">No files found.</td></tr>`;
@@ -299,34 +303,34 @@ export function sortFiles(column, folder) {
sortOrder.column = column;
sortOrder.ascending = true;
}
// Sort fileData based on the column.
fileData.sort((a, b) => {
let valA = a[column] || "";
let valB = b[column] || "";
if (column === "modified" || column === "uploaded") {
// Log the raw date strings.
//console.log(`Sorting ${column}: raw values ->`, valA, valB);
const parsedA = parseCustomDate(valA);
const parsedB = parseCustomDate(valB);
// Log the parsed numeric timestamps.
//console.log(`Sorting ${column}: parsed values ->`, parsedA, parsedB);
valA = parsedA;
valB = parsedB;
} else if (typeof valA === "string") {
valA = valA.toLowerCase();
valB = valB.toLowerCase();
}
if (valA < valB) return sortOrder.ascending ? -1 : 1;
if (valA > valB) return sortOrder.ascending ? 1 : -1;
return 0;
});
// Re-render the file table after sorting.
renderFileTable(folder);
}
@@ -408,15 +412,15 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
const response = await fetch('getFolderList.php');
const folders = await response.json();
console.log('Folders fetched for modal:', folders);
const folderSelect = document.getElementById(dropdownId);
folderSelect.innerHTML = '';
const rootOption = document.createElement('option');
rootOption.value = 'root';
rootOption.textContent = '(Root)';
folderSelect.appendChild(rootOption);
if (Array.isArray(folders) && folders.length > 0) {
folders.forEach(folder => {
const option = document.createElement('option');
@@ -462,7 +466,7 @@ document.addEventListener("DOMContentLoaded", function () {
showToast("Selected files copied successfully!", 5000);
loadFileList(window.currentFolder);
} else {
showToast("Error: " + (data.error || "Could not copy files"), 5000);
showToast("Error: " + (data.error || "Could not copy files"), 5000);
}
})
.catch(error => console.error("Error copying files:", error))
@@ -656,10 +660,10 @@ export function renameFile(oldName, folder) {
// Store the file name and folder globally for use in the modal.
window.fileToRename = oldName;
window.fileFolder = folder || window.currentFolder || "root";
// Pre-fill the input with the current file name.
document.getElementById("newFileName").value = oldName;
// Show the rename file modal.
document.getElementById("renameFileModal").style.display = "block";
}
@@ -669,16 +673,16 @@ document.addEventListener("DOMContentLoaded", () => {
// Cancel button: hide modal and clear input.
const cancelBtn = document.getElementById("cancelRenameFile");
if (cancelBtn) {
cancelBtn.addEventListener("click", function() {
cancelBtn.addEventListener("click", function () {
document.getElementById("renameFileModal").style.display = "none";
document.getElementById("newFileName").value = "";
});
}
// Submit button: send rename request.
const submitBtn = document.getElementById("submitRenameFile");
if (submitBtn) {
submitBtn.addEventListener("click", function() {
submitBtn.addEventListener("click", function () {
const newName = document.getElementById("newFileName").value.trim();
if (!newName || newName === window.fileToRename) {
// No change; just hide the modal.

48
index.html
View File

@@ -26,9 +26,15 @@
<h1>Multi File Upload Editor</h1>
</div>
<div class="header-buttons">
<button id="logoutBtn" title="Logout"><i class="material-icons">exit_to_app</i></button>
<button id="addUserBtn" title="Add User"><i class="material-icons">person_add</i></button>
<button id="removeUserBtn" title="Remove User"><i class="material-icons">person_remove</i></button>
<button id="logoutBtn" title="Logout">
<i class="material-icons">exit_to_app</i>
</button>
<button id="addUserBtn" title="Add User">
<i class="material-icons">person_add</i>
</button>
<button id="removeUserBtn" title="Remove User">
<i class="material-icons">person_remove</i>
</button>
</div>
</header>
<!-- Custom Toast Container -->
@@ -163,39 +169,53 @@
<div id="fileListContainer">
<h2 id="fileListTitle">Files in (Root)</h2>
<div id="fileListActions" class="file-list-actions">
<button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Selected</button>
<button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">
Delete Selected
</button>
<!-- Delete Files Modal -->
<div id="deleteFilesModal" class="modal">
<div class="modal-content">
<h4>Delete Selected Files</h4>
<p id="deleteFilesMessage">Are you sure you want to delete the selected files?</p>
<div style="margin-top:15px; text-align:right;">
<p id="deleteFilesMessage">
Are you sure you want to delete the selected files?
</p>
<div class="modal-footer">
<button id="cancelDeleteFiles" class="btn btn-secondary">Cancel</button>
<button id="confirmDeleteFiles" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Selected</button>
<button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>
Copy Selected
</button>
<!-- Copy Files Modal -->
<div id="copyFilesModal" class="modal">
<div class="modal-content">
<h4>Copy Selected Files</h4>
<p id="copyFilesMessage">Select a target folder for copying the selected files:</p>
<select id="copyTargetFolder" class="form-control" style="margin-top:10px;"></select>
<div style="margin-top:15px; text-align:right;">
<p id="copyFilesMessage">
Select a target folder for copying the selected files:
</p>
<select id="copyTargetFolder" class="form-control modal-input"></select>
<div class="modal-footer">
<button id="cancelCopyFiles" class="btn btn-secondary">Cancel</button>
<button id="confirmCopyFiles" class="btn btn-primary">Copy</button>
</div>
</div>
</div>
<button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Selected</button>
<button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>
Move Selected
</button>
<!-- Move Files Modal -->
<div id="moveFilesModal" class="modal">
<div class="modal-content">
<h4>Move Selected Files</h4>
<p id="moveFilesMessage">Select a target folder for moving the selected files:</p>
<select id="moveTargetFolder" class="form-control" style="margin-top:10px;"></select>
<div style="margin-top:15px; text-align:right;">
<p id="moveFilesMessage">
Select a target folder for moving the selected files:
</p>
<select id="moveTargetFolder" class="form-control modal-input"></select>
<div class="modal-footer">
<button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
<button id="confirmMoveFiles" class="btn btn-primary">Move</button>
</div>

237
styles.css
View File

@@ -1,3 +1,7 @@
/* ===========================================================
GENERAL STYLES & BASE LAYOUT
=========================================================== */
/* GENERAL STYLES */
body {
font-family: 'Roboto', sans-serif;
@@ -10,7 +14,11 @@ body {
margin-top: 20px;
}
/* HEADER */
/* ===========================================================
HEADER & NAVIGATION
=========================================================== */
/* HEADER (Large Screens) */
header {
display: flex !important;
flex-direction: row !important;
@@ -34,11 +42,9 @@ header {
.header-title {
position: absolute;
/* Absolutely position the title */
/* Center the title using absolute positioning */
left: 50%;
/* Position it 50% from the left edge */
transform: translateX(-50%);
/* Center it by moving it left by 50% of its own width */
text-align: center;
margin: 0;
color: white;
@@ -70,12 +76,56 @@ header {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Responsive Header (Small Screens) */
@media (max-width: 600px) {
header {
flex-direction: column !important;
height: auto !important;
padding: 10px 20px !important;
position: relative !important;
}
/* Remove absolute positioning to let items stack */
.header-title {
position: static !important;
left: auto !important;
transform: none !important;
margin: 10px 0 !important;
font-size: 1.2em !important;
}
/* Ensure logo and buttons are centered and full width */
.header-left,
.header-buttons {
position: static !important;
transform: none !important;
margin: 5px 0 !important;
width: 100% !important;
text-align: center !important;
}
.header-left img {
height: 50px !important;
}
.header-buttons {
justify-content: center !important;
}
}
/* ===========================================================
MATERIAL ICONS
=========================================================== */
.material-icons {
font-size: 24px;
vertical-align: middle;
color: white;
}
/* ===========================================================
FORMS & LOGIN
=========================================================== */
/* LOGIN FORM */
#loginForm {
margin: 0 auto;
@@ -86,7 +136,11 @@ header {
border-radius: 4px;
}
/* MODALS & EDITOR MODALS */
/* ===========================================================
MODALS & EDITOR MODALS
=========================================================== */
/* General Modal Styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
@@ -114,6 +168,7 @@ header {
overflow-y: auto;
}
/* Editor Modal */
.editor-modal {
position: fixed;
top: 50%;
@@ -123,7 +178,6 @@ header {
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
/* centers the editor modal */
width: 50vw;
max-width: 90vw;
min-width: 400px;
@@ -132,10 +186,12 @@ header {
overflow: auto;
resize: both;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1100; /* make sure it’s on top of any overlay */
z-index: 1100; /* Ensure it's on top of any overlay */
}
/* LOGOUT & USER BUTTON CONTAINER */
/* ===========================================================
LOGOUT & USER CONTROLS
=========================================================== */
.logout-container {
position: absolute;
top: 10px;
@@ -152,7 +208,9 @@ header {
align-items: center;
}
/* UPLOAD PROGRESS */
/* ===========================================================
UPLOAD PROGRESS STYLES
=========================================================== */
#uploadProgressContainer ul {
list-style: none;
padding: 0;
@@ -169,7 +227,7 @@ header {
#uploadProgressContainer .file-preview {
width: 32px !important;
height: 32px !important;
margin-right: 0px;
margin-right: 0;
flex-shrink: 0;
}
@@ -180,8 +238,7 @@ header {
}
#uploadProgressContainer .file-name {
margin-right: 20px;
margin-left: 2px;
margin: 0 20px 0 2px;
flex-grow: 1;
word-break: break-word;
}
@@ -190,8 +247,7 @@ header {
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
margin-top: 5px;
margin-bottom: 10px;
margin: 5px 0 10px;
height: 24px;
width: 250px;
}
@@ -210,7 +266,9 @@ header {
margin-top: 20px;
}
/* RESPONSIVE (small screens) */
/* ===========================================================
RESPONSIVE ADJUSTMENTS (General Small Screens)
=========================================================== */
@media (max-width: 768px) {
.logout-container {
position: static;
@@ -227,10 +285,11 @@ header {
.hide-small {
display: none;
}
}
/* BUTTON STYLES (MATERIAL THEME) */
/* ===========================================================
BUTTON STYLES (MATERIAL THEME)
=========================================================== */
.btn {
font-size: 0.9rem;
border: none;
@@ -246,9 +305,9 @@ header {
opacity: 0.9;
}
/* Specific Action Buttons */
#deleteSelectedBtn {
background-color: #f44336;
/* Material red */
background-color: #f44336; /* Material red */
color: white;
border: none;
border-radius: 4px;
@@ -260,8 +319,7 @@ header {
}
#copySelectedBtn {
background-color: #9E9E9E;
/* Material grey */
background-color: #9E9E9E; /* Material grey */
color: white;
border: none;
border-radius: 4px;
@@ -273,8 +331,7 @@ header {
}
#moveSelectedBtn {
background-color: #ff9800;
/* Material orange */
background-color: #ff9800; /* Material orange */
color: white;
border: none;
border-radius: 4px;
@@ -285,7 +342,7 @@ header {
background-color: #fb8c00;
}
/* Material green style for Edit button in file list */
/* File List Edit Button (Material Green) */
#fileList button.edit-btn {
background-color: #4CAF50;
color: white;
@@ -300,43 +357,20 @@ header {
background-color: #43A047;
}
/* FILE LIST ACTIONS CONTAINER */
.file-list-actions {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: center;
max-width: 800px;
}
.folder-dropdown {
width: 100px;
}
/* FILE LIST TABLE */
#fileList table {
width: 100%;
border-collapse: collapse;
}
#fileList table th,
#fileList table td {
padding: 10px;
text-align: left;
border: none;
/* Remove table borders */
}
/* ===========================================================
FILE LIST & TABLE STYLES
=========================================================== */
#fileList table tr:nth-child(even) {
background-color: transparent;
/* Remove alternating grey rows */
background-color: transparent; /* Remove alternating grey rows */
}
#fileList table tr:hover {
background-color: #e0e0e0;
}
/* HEADINGS & FORM LABELS */
/* ===========================================================
HEADINGS & FORM LABELS
=========================================================== */
h2 {
font-size: 2em;
}
@@ -349,7 +383,9 @@ label {
font-size: 0.9rem;
}
/* UTILITY CLASSES */
/* ===========================================================
UTILITY CLASSES
=========================================================== */
.align-items-center {
display: flex;
align-items: center;
@@ -369,24 +405,22 @@ label {
display: none;
}
/* Remove bottom margin from the form group */
/* Remove bottom margin from the form group in cards */
.card-body .form-group {
margin-bottom: 5px !important;
}
/* Force a small top margin for the Create Folder button */
/* Create Folder Button */
#createFolderBtn {
margin-top: 0px !important;
}
#fileListContainer {
margin-top: 40px !important;
}
/* Row Selected Highlight */
.row-selected {
background-color: #f2f2f2 !important;
}
/* Custom Prev/Next Buttons */
.custom-prev-next-btn {
background-color: #e0e0e0;
color: #000;
@@ -397,22 +431,28 @@ label {
margin: 0 4px;
cursor: pointer;
}
.custom-prev-next-btn:hover:not(:disabled) {
background-color: #d5d5d5;
}
/* Folder Options */
.folder-option:hover {
background-color: #f0f0f0;
}
.folder-option.selected {
background-color: #d0d0d0;
}
/* Custom Folder Card Body */
.custom-folder-card-body {
padding-top: 5px !important;
/* You can leave the other padding values as default or specify them if needed */
}
/* ===========================================================
TOAST NOTIFICATIONS
=========================================================== */
#customToast {
position: fixed;
top: 20px;
@@ -424,11 +464,82 @@ label {
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 9999; /* Increased z-index */
z-index: 9999;
min-width: 250px;
display: none;
}
#customToast.show {
opacity: 1;
}
/* ===========================================================
BUTTON WRAP (For File List Actions)
=========================================================== */
.button-wrap {
display: inline-flex;
flex-wrap: wrap;
align-items: left;
gap: 2px;
}
/* Media Query for Button Wrap on Smaller Devices */
@media (max-width: 500px) {
.button-wrap {
display: flex; /* Use block-level flex */
width: 100%; /* Take full available width */
justify-content: center;
}
}
/* ===========================================================
FILE LIST SECTION
=========================================================== */
#fileListContainer {
padding: 10px;
}
#fileListTitle {
font-size: 1.8em;
margin-bottom: 15px;
}
.file-list-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.file-list-actions .action-btn {
flex: 0 1 auto;
}
.modal-footer {
margin-top: 15px;
text-align: right;
}
.modal-input {
width: 100%;
margin-top: 10px;
}
/* Responsive File List Section (Small Devices) */
@media (max-width: 600px) {
#fileListTitle {
font-size: 1.4em;
}
.file-list-actions {
flex-direction: column;
align-items: stretch;
}
.file-list-actions .action-btn {
width: 100%;
}
.modal-content {
width: 95%;
margin: 20% auto;
}
}