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

small medium screen adjustments

Browse Source
This commit is contained in:
Ryan
2025-03-09 23:07:40 -04:00
committed by GitHub
parent bdb12d66d7
commit f59ad8077f
2 changed files with 167 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
index.html
View File

@@ -59,10 +59,9 @@
<!-- Main Operations: Upload and Folder Management --> <!-- Main Operations: Upload and Folder Management -->
<div id="mainOperations" style="display: none;"> <div id="mainOperations" style="display: none;">
<div class="row align-items-stretch" id="uploadFolderRow"> <div class="row align-items-stretch" id="uploadFolderRow">
<!-- Upload Card: 60% width --> <!-- Upload Card: 50% width on medium, 58% on large -->
<div class="col-md-7 d-flex"> <div class="col-md-6 col-lg-7 d-flex">
<div class="card flex-fill"> <div class="card flex-fill">
<div class="card-header">Upload Files</div> <div class="card-header">Upload Files</div>
<!-- Make card-body a flex container in column direction --> <!-- Make card-body a flex container in column direction -->
@@ -72,8 +71,8 @@
<!-- Make the form-group container flex-grow so it fills available space --> <!-- Make the form-group container flex-grow so it fills available space -->
<div class="form-group flex-grow-1" style="margin-bottom: 1rem;"> <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
<!-- Set drop area to grow to fill its parent --> <!-- Set drop area to grow to fill its parent -->
<div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; <div id="uploadDropArea"
display: flex; flex-direction: column; justify-content: center; align-items: center;"> style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<span>Drop files here or click 'Choose files'</span> <span>Drop files here or click 'Choose files'</span>
<br> <br>
<input type="file" id="file" name="file[]" class="form-control-file" multiple required <input type="file" id="file" name="file[]" class="form-control-file" multiple required
@@ -86,68 +85,70 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Folder Management Card: 40% width --> <!-- Folder Management Card: 50% width on medium, 42% on large -->
<div class="col-md-5 d-flex"> <div class="col-md-6 col-lg-5 d-flex">
<div class="card flex-fill"> <div class="card flex-fill">
<div class="card-header">Folder Navigation & Management</div> <div class="card-header">Folder Navigation & Management</div>
<div class="card-body custom-folder-card-body"> <div class="card-body custom-folder-card-body">
<div class="form-group d-flex align-items-top" style="padding-top:0px; margin-bottom:0;"> <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
<div id="folderTreeContainer"></div> <div id="folderTreeContainer"></div>
</div> </div>
<button id="createFolderBtn" class="btn btn-primary mt-3">Create Folder</button> <!-- Wrap folder buttons in a container to prevent wrapping -->
<div class="folder-actions mt-3">
<!-- Create Folder Modal --> <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
<div id="createFolderModal" class="modal"> <!-- Create Folder Modal -->
<div class="modal-content"> <div id="createFolderModal" class="modal">
<h4>Create Folder</h4> <div class="modal-content">
<input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name" <h4>Create Folder</h4>
style="margin-top:10px;"> <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
<div style="margin-top:15px; text-align:right;"> style="margin-top:10px;">
<button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button> <div style="margin-top:15px; text-align:right;">
<button id="submitCreateFolder" class="btn btn-primary">Create</button> <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
<button id="submitCreateFolder" class="btn btn-primary">Create</button>
</div>
</div> </div>
</div> </div>
</div> <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
<button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder"> <i class="material-icons">edit</i>
<i class="material-icons">edit</i> </button>
</button> <!-- Rename Folder Modal -->
<!-- Rename Folder Modal --> <div id="renameFolderModal" class="modal">
<div id="renameFolderModal" class="modal"> <div class="modal-content">
<div class="modal-content"> <h4>Rename Folder</h4>
<h4>Rename Folder</h4> <input type="text" id="newRenameFolderName" class="form-control" placeholder="Enter new folder name"
<input type="text" id="newRenameFolderName" class="form-control" placeholder="Enter new folder name" style="margin-top:10px;">
style="margin-top:10px;"> <div style="margin-top:15px; text-align:right;">
<div style="margin-top:15px; text-align:right;"> <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
<button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button> <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
<button id="submitRenameFolder" class="btn btn-primary">Rename</button> </div>
</div> </div>
</div> </div>
</div> <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
<button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder"> <i class="material-icons">delete</i>
<i class="material-icons">delete</i> </button>
</button> <!-- Delete Folder Modal -->
<!-- Delete Folder Modal --> <div id="deleteFolderModal" class="modal">
<div id="deleteFolderModal" class="modal"> <div class="modal-content">
<div class="modal-content"> <h4>Delete Folder</h4>
<h4>Delete Folder</h4> <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
<p id="deleteFolderMessage">Are you sure you want to delete this folder?</p> <div style="margin-top:15px; text-align:right;">
<div style="margin-top:15px; text-align:right;"> <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
<button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button> <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
<button id="confirmDeleteFolder" class="btn btn-danger">Delete</button> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="folderExplanation" style=" <div id="folderExplanation" style="
margin-top:15px; margin-top:15px;
font-size:12px; font-size:12px;
color:#555; color:#555;
background-color:#f9f9f9; background-color:#f9f9f9;
border:1px solid #ddd; border:1px solid #ddd;
border-radius:4px; border-radius:4px;
padding:10px; padding:10px;
"> ">
<details style="margin-top:5px; font-size:12px; color:#555;"> <details style="margin-top:2px; font-size:12px; color:#555;">
<summary style="cursor:pointer; list-style: none; color: #000; background: #f9f9f9; padding: 5px;"> <summary style="cursor:pointer; list-style: none; color: #000; background: #f9f9f9; padding: 2px;">
<i class="material-icons" style="vertical-align: middle; color: #d96601;">info</i> <i class="material-icons" style="vertical-align: middle; color: #d96601;">info</i>
Folder Navigation &amp; Management Help Info Folder Navigation &amp; Management Help Info
</summary> </summary>
@@ -164,112 +165,114 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- File List Section --> <!-- File List Section -->
<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;"> <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">
Delete Selected Delete Selected
</button> </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"> <p id="deleteFilesMessage">
Are you sure you want to delete the selected files? Are you sure you want to delete the selected files?
</p> </p>
<div class="modal-footer"> <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>
<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 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>
<!-- 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 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>
</div> </div>
</div> </div>
</div> </div>
<div id="fileList"></div>
</div>
</div>
<!-- Add User Modal --> <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>
<div id="addUserModal" class="modal"> Copy Selected
<div class="modal-content"> </button>
<h3>Create New User</h3> <!-- Copy Files Modal -->
<label for="newUsername">Username:</label> <div id="copyFilesModal" class="modal">
<input type="text" id="newUsername" class="form-control"> <div class="modal-content">
<label for="newPassword">Password:</label> <h4>Copy Selected Files</h4>
<input type="password" id="newPassword" class="form-control"> <p id="copyFilesMessage">
<div id="adminCheckboxContainer"> Select a target folder for copying the selected files:
<input type="checkbox" id="isAdmin"> </p>
<label for="isAdmin">Grant Admin Access</label> <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> </div>
<button id="saveUserBtn" class="btn btn-primary">Save User</button>
<button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
</div>
</div>
<!-- Remove User Modal --> <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>
<div id="removeUserModal" class="modal"> Move Selected
<div class="modal-content"> </button>
<h3>Remove User</h3> <!-- Move Files Modal -->
<label for="removeUsernameSelect">Select a user to remove:</label> <div id="moveFilesModal" class="modal">
<select id="removeUsernameSelect" class="form-control"></select> <div class="modal-content">
<button id="deleteUserBtn" class="btn btn-danger">Delete User</button> <h4>Move Selected Files</h4>
<button id="cancelRemoveUserBtn" class="btn btn-secondary">Cancel</button> <p id="moveFilesMessage">
</div> Select a target folder for moving the selected files:
</div> </p>
<select id="moveTargetFolder" class="form-control modal-input"></select>
<!-- Rename File Modal --> <div class="modal-footer">
<div id="renameFileModal" class="modal"> <button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
<div class="modal-content"> <button id="confirmMoveFiles" class="btn btn-primary">Move</button>
<h4>Rename File</h4> </div>
<input type="text" id="newFileName" class="form-control" placeholder="Enter new file name" </div>
style="margin-top:10px;">
<div style="margin-top:15px; text-align:right;">
<button id="cancelRenameFile" class="btn btn-secondary">Cancel</button>
<button id="submitRenameFile" class="btn btn-primary">Rename</button>
</div> </div>
</div> </div>
<div id="fileList"></div>
</div> </div>
</div>
<!-- JavaScript Files --> <!-- Add User Modal -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <div id="addUserModal" class="modal">
<script type="module" src="main.js"></script> <div class="modal-content">
<h3>Create New User</h3>
<label for="newUsername">Username:</label>
<input type="text" id="newUsername" class="form-control">
<label for="newPassword">Password:</label>
<input type="password" id="newPassword" class="form-control">
<div id="adminCheckboxContainer">
<input type="checkbox" id="isAdmin">
<label for="isAdmin">Grant Admin Access</label>
</div>
<button id="saveUserBtn" class="btn btn-primary">Save User</button>
<button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
</div>
</div>
<!-- Remove User Modal -->
<div id="removeUserModal" class="modal">
<div class="modal-content">
<h3>Remove User</h3>
<label for="removeUsernameSelect">Select a user to remove:</label>
<select id="removeUsernameSelect" class="form-control"></select>
<button id="deleteUserBtn" class="btn btn-danger">Delete User</button>
<button id="cancelRemoveUserBtn" class="btn btn-secondary">Cancel</button>
</div>
</div>
<!-- Rename File Modal -->
<div id="renameFileModal" class="modal">
<div class="modal-content">
<h4>Rename File</h4>
<input type="text" id="newFileName" class="form-control" placeholder="Enter new file name"
style="margin-top:10px;">
<div style="margin-top:15px; text-align:right;">
<button id="cancelRenameFile" class="btn btn-secondary">Cancel</button>
<button id="submitRenameFile" class="btn btn-primary">Rename</button>
</div>
</div>
</div>
<!-- JavaScript Files -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="module" src="main.js"></script>
</body> </body>
</html> </html>

14
styles.css
View File

@@ -415,6 +415,20 @@ label {
margin-top: 0px !important; margin-top: 0px !important;
} }
.folder-actions {
display: flex;
flex-wrap: nowrap; /* Prevent wrapping */
align-items: center;
white-space: nowrap; /* Extra safeguard */
}
/* Optional: On medium screens, if needed, ensure the container doesn't force wrapping */
@media (min-width: 600px) and (max-width: 992px) {
.folder-actions {
white-space: nowrap;
}
}
/* Row Selected Highlight */ /* Row Selected Highlight */
.row-selected { .row-selected {
background-color: #f2f2f2 !important; background-color: #f2f2f2 !important;