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

24
fileManager.js
View File

@@ -107,13 +107,13 @@ 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>
@@ -124,22 +124,24 @@ export function renderFileTable(folder) {
id="searchInput" id="searchInput"
class="form-control" class="form-control"
placeholder="Search files..." placeholder="Search files..."
value="${searchTerm}" value="${safeSearchTerm}"
aria-describedby="searchIcon" aria-describedby="searchIcon"
> >
</div> </div>
</div> </div>
<!-- Prev/Next buttons: occupies 4 columns on medium+ screens, left-aligned --> <!-- Prev/Next buttons: full width on small, 4 columns on md+ -->
<div class="col-12 col-md-4 text-left mt-2 mt-md-0"> <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})"> <button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">
Prev Prev
</button> </button>
<span style="margin: 0 8px;">Page ${currentPage} of ${totalPages || 1}</span> <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})"> <button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">
Next Next
</button> </button>
</div> </div>
</div> </div>
</div>
`; `;
// 2. Build the File Table with Bootstrap styling. // 2. Build the File Table with Bootstrap styling.
@@ -195,8 +197,10 @@ export function renderFileTable(folder) {
<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>
Download
</a>
${isEditable ? ` ${isEditable ? `
<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'> <button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
Edit Edit

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,7 +464,7 @@ 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;
} }
@@ -432,3 +472,74 @@ label {
#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;
}
}