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 -->
<div id="mainOperations" style="display: none;">
<div class="row align-items-stretch" id="uploadFolderRow">
<!-- Upload Card: 60% width -->
<div class="col-md-7 d-flex">
<!-- Upload Card: 50% width on medium, 58% on large -->
<div class="col-md-6 col-lg-7 d-flex">
<div class="card flex-fill">
<div class="card-header">Upload Files</div>
<!-- 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 -->
<div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
<!-- Set drop area to grow to fill its parent -->
<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;">
<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;">
<span>Drop files here or click 'Choose files'</span>
<br>
<input type="file" id="file" name="file[]" class="form-control-file" multiple required
@@ -86,16 +85,17 @@
</div>
</div>
</div>
<!-- Folder Management Card: 40% width -->
<div class="col-md-5 d-flex">
<!-- Folder Management Card: 50% width on medium, 42% on large -->
<div class="col-md-6 col-lg-5 d-flex">
<div class="card flex-fill">
<div class="card-header">Folder Navigation & Management</div>
<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>
<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 -->
<div id="createFolderModal" class="modal">
<div class="modal-content">
@@ -137,6 +137,7 @@
</div>
</div>
</div>
</div>
<div id="folderExplanation" style="
margin-top:15px;
font-size:12px;
@@ -146,8 +147,8 @@
border-radius:4px;
padding:10px;
">
<details style="margin-top:5px; font-size:12px; color:#555;">
<summary style="cursor:pointer; list-style: none; color: #000; background: #f9f9f9; padding: 5px;">
<details style="margin-top:2px; font-size:12px; color:#555;">
<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>
Folder Navigation &amp; Management Help Info
</summary>
@@ -164,6 +165,7 @@
</div>
</div>
</div>
</div>
<!-- File List Section -->
<div id="fileListContainer">
@@ -272,4 +274,5 @@
<script type="module" src="main.js"></script>
</body>
</html>

14
styles.css
View File

@@ -415,6 +415,20 @@ label {
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 {
background-color: #f2f2f2 !important;