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

48
index.html
View File

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

237
styles.css
View File

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