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

27
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,16 +85,17 @@
</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">
<button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
<!-- Create Folder Modal --> <!-- Create Folder Modal -->
<div id="createFolderModal" class="modal"> <div id="createFolderModal" class="modal">
<div class="modal-content"> <div class="modal-content">
@@ -137,6 +137,7 @@
</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;
@@ -146,8 +147,8 @@
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,6 +165,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- File List Section --> <!-- File List Section -->
<div id="fileListContainer"> <div id="fileListContainer">
@@ -272,4 +274,5 @@
<script type="module" src="main.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;