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

update cards max width

Browse Source
This commit is contained in:
Ryan
2025-03-13 20:23:09 -04:00
committed by GitHub
parent f4c0c8b3c8
commit 8b1dc6907c
2 changed files with 96 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
index.html
View File

@@ -73,96 +73,104 @@
<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: 50% width on medium, 58% on large --> <!-- Upload Card: 50% width on medium, 58% on large -->
<div class="col-md-6 col-lg-7 d-flex"> <div class="container" style="max-width: 1400px; margin: 0 auto;">
<div class="card flex-fill"> <div class="row">
<div class="card-header">Upload Files</div> <div class="col-md-6 col-lg-7 d-flex">
<!-- Card body is a flex container in column direction --> <div class="card flex-fill" style="max-width: 900px; width: 100%;">
<div class="card-body d-flex flex-column"> <div class="card-header">Upload Files</div>
<form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column" style="height: 100%;"> <!-- Card body is a flex container in column direction -->
<div class="form-group flex-grow-1" style="margin-bottom: 1rem;"> <div class="card-body d-flex flex-column">
<div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;"> <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column"
<span>Drop files here or click 'Choose files'</span> style="height: 100%;">
<br /> <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
<input type="file" id="file" name="file[]" class="form-control-file" multiple required style="display:none;" /> <div id="uploadDropArea"
</div> 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>
<br />
<input type="file" id="file" name="file[]" class="form-control-file" multiple required
style="display:none;" />
</div>
</div>
<button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
<div id="uploadProgressContainer"></div>
</form>
</div> </div>
<button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button> </div>
<div id="uploadProgressContainer"></div>
</form>
</div> </div>
</div> <!-- Folder Management Card: 50% width on medium, 42% on large -->
</div> <div class="col-md-6 col-lg-5 d-flex">
<!-- Folder Management Card: 50% width on medium, 42% on large --> <div class="card flex-fill" style="max-width: 900px; width: 100%;">
<div class="col-md-6 col-lg-5 d-flex"> <div class="card-header">Folder Navigation & Management</div>
<div class="card flex-fill"> <div class="card-body custom-folder-card-body">
<div class="card-header">Folder Navigation & Management</div> <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
<div class="card-body custom-folder-card-body"> <div id="folderTreeContainer"></div>
<div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;"> </div>
<div id="folderTreeContainer"></div> <!-- Folder actions -->
</div> <div class="folder-actions mt-3">
<!-- Folder actions --> <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
<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" style="margin-top:10px;" /> <div style="margin-top:15px; text-align:right;">
<div style="margin-top:15px; text-align:right;"> <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
<button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button> <button id="submitCreateFolder" class="btn btn-primary">Create</button>
<button id="submitCreateFolder" class="btn btn-primary">Create</button> </div>
</div>
</div>
<button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
<i class="material-icons">edit</i>
</button>
<!-- Rename Folder Modal -->
<div id="renameFolderModal" class="modal">
<div class="modal-content">
<h4>Rename Folder</h4>
<input type="text" id="newRenameFolderName" class="form-control"
placeholder="Enter new folder name" style="margin-top:10px;" />
<div style="margin-top:15px; text-align:right;">
<button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
<button id="submitRenameFolder" class="btn btn-primary">Rename</button>
</div>
</div>
</div>
<button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
<i class="material-icons">delete</i>
</button>
<!-- Delete Folder Modal -->
<div id="deleteFolderModal" class="modal">
<div class="modal-content">
<h4>Delete Folder</h4>
<p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
<div style="margin-top:15px; text-align:right;">
<button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
<button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
</div>
</div>
</div> </div>
</div> </div>
</div> <div id="folderExplanation" class="folder-explanation">
<button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder"> <details class="folder-help-details">
<i class="material-icons">edit</i> <summary class="folder-help-summary">
</button> <i class="material-icons folder-help-icon">info</i>
<!-- Rename Folder Modal --> Folder Navigation &amp; Management Help Info
<div id="renameFolderModal" class="modal"> </summary>
<div class="modal-content"> <ul class="folder-help-list">
<h4>Rename Folder</h4> <li>Click on a folder in the tree to view its files.</li>
<input type="text" id="newRenameFolderName" class="form-control" placeholder="Enter new folder name" style="margin-top:10px;" /> <li>Use [-] to collapse and [+] to expand folders.</li>
<div style="margin-top:15px; text-align:right;"> <li>Select a folder and click "Create Folder" to add a subfolder.</li>
<button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button> <li>To rename or delete a folder, select it and then click the appropriate button.</li>
<button id="submitRenameFolder" class="btn btn-primary">Rename</button> </ul>
</div> </details>
</div> </div>
</div> </div>
<button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
<i class="material-icons">delete</i>
</button>
<!-- Delete Folder Modal -->
<div id="deleteFolderModal" class="modal">
<div class="modal-content">
<h4>Delete Folder</h4>
<p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
<div style="margin-top:15px; text-align:right;">
<button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
<button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div id="folderExplanation" class="folder-explanation">
<details class="folder-help-details">
<summary class="folder-help-summary">
<i class="material-icons folder-help-icon">info</i>
Folder Navigation &amp; Management Help Info
</summary>
<ul class="folder-help-list">
<li>Click on a folder in the tree to view its files.</li>
<li>Use [-] to collapse and [+] to expand folders.</li>
<li>Select a folder and click "Create Folder" to add a subfolder.</li>
<li>To rename or delete a folder, select it and then click the appropriate button.</li>
</ul>
</details>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- File List Section --> <!-- File List Section -->
<div id="fileListContainer" style="display: none;"> <div id="fileListContainer" style="display: none;">
<h2 id="fileListTitle">Files in (Root)</h2> <h2 id="fileListTitle">Files in (Root)</h2>
@@ -258,7 +266,8 @@
<div id="renameFileModal" class="modal"> <div id="renameFileModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<h4>Rename File</h4> <h4>Rename File</h4>
<input type="text" id="newFileName" class="form-control" placeholder="Enter new file name" style="margin-top:10px;" /> <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;"> <div style="margin-top:15px; text-align:right;">
<button id="cancelRenameFile" class="btn btn-secondary">Cancel</button> <button id="cancelRenameFile" class="btn btn-secondary">Cancel</button>
<button id="submitRenameFile" class="btn btn-primary">Rename</button> <button id="submitRenameFile" class="btn btn-primary">Rename</button>
@@ -278,4 +287,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>

4
styles.css
View File

@@ -330,7 +330,11 @@ body.dark-mode #loginForm button:hover {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
border: 1px solid #ddd; border: 1px solid #ddd;
max-width: 900px;
width: 100%;
margin: 0 auto;
} }
body.dark-mode .card { body.dark-mode .card {
background-color: #2c2c2c; background-color: #2c2c2c;
color: #e0e0e0; color: #e0e0e0;