Copy/Move functionality
This commit is contained in:
Ryan
400
styles.css
400
styles.css
@@ -1,20 +1,130 @@
|
||||
/* Container */
|
||||
/* GENERAL STYLES */
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CONTAINER */
|
||||
.container {
|
||||
margin-top: 20px; /* Increased for better spacing */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Logout & Add User button container */
|
||||
/* HEADER */
|
||||
header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
height: 100px !important;
|
||||
padding: 0 20px !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background-color: #2196F3 !important;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header-left img {
|
||||
display: block;
|
||||
height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.header-title h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-buttons button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.header-buttons button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* LOGIN FORM */
|
||||
#loginForm {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* MODALS & EDITOR MODALS */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(75%, 75%); /* centers the modal */
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
width: 40vw;
|
||||
max-width: 40vw;
|
||||
height: 600px;
|
||||
max-height: 35vh;
|
||||
}
|
||||
.editor-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(5%, 10%); /* centers the editor modal */
|
||||
width: 50vw;
|
||||
max-width: 90vw;
|
||||
min-width: 400px;
|
||||
height: 600px;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
/* LOGOUT & USER BUTTON CONTAINER */
|
||||
.logout-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end; /* keep buttons right-aligned */
|
||||
gap: 5px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Progress bar container style */
|
||||
/* UPLOAD PROGRESS */
|
||||
#uploadProgressContainer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -24,35 +134,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
/* Allow wrapping for long file names */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Force file preview container to be 32x32 pixels and adjust vertical position */
|
||||
#uploadProgressContainer .file-preview {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
/* Use transform to nudge down the preview */
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
/* Ensure that the image inside the preview fills the container */
|
||||
#uploadProgressContainer .file-preview img {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* File name styling */
|
||||
#uploadProgressContainer .file-name {
|
||||
margin-right: 20px;
|
||||
flex-grow: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Progress bar container style */
|
||||
#uploadProgressContainer .progress {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
@@ -60,172 +159,187 @@
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
width: 250px; /* Increased width */
|
||||
/* No extra left margin so it sits right next to file name */
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* Progress bar element style */
|
||||
#uploadProgressContainer .progress-bar {
|
||||
background-color: #007bff;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
color: #000; /* black text for legibility */
|
||||
color: #000;
|
||||
text-align: center;
|
||||
transition: width 0.4s ease;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Ensure the upload progress container has some top margin */
|
||||
#uploadProgressContainer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* On small screens, move buttons below title */
|
||||
/* RESPONSIVE (small screens) */
|
||||
@media (max-width: 768px) {
|
||||
.logout-container {
|
||||
position: static;
|
||||
align-items: flex-end; /* Right-align buttons */
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.logout-container button {
|
||||
width: auto;
|
||||
min-width: 120px; /* Ensures buttons don't become huge */
|
||||
}
|
||||
.logout-container {
|
||||
position: static;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.logout-container button {
|
||||
width: auto;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal styling */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc; /* Lighter border for a modern look */
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
width: 280px; /* slightly narrower */
|
||||
height: auto; /* Let height adjust to content */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* BUTTON STYLES (MATERIAL THEME) */
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Editor modal: for edit popup with rounded corners */
|
||||
.editor-modal {
|
||||
width: 80vw;
|
||||
max-width: 90vw;
|
||||
min-width: 400px;
|
||||
height: 400px;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
resize: both;
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
header {
|
||||
/* File list action buttons (for Delete, Copy, Move) */
|
||||
.file-list-actions button {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
min-height: 80px;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-list-actions button:hover {
|
||||
background-color: #1976D2;
|
||||
}
|
||||
|
||||
/* Material icons */
|
||||
.material-icons {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
#deleteSelectedBtn {
|
||||
background-color: #f44336; /* Material red */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/* Header buttons container */
|
||||
.header-buttons {
|
||||
#deleteSelectedBtn:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
|
||||
#copySelectedBtn {
|
||||
background-color: #9E9E9E; /* Material grey */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#copySelectedBtn:hover {
|
||||
background-color: #757575;
|
||||
}
|
||||
|
||||
#moveSelectedBtn {
|
||||
background-color: #ff9800; /* Material orange */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#moveSelectedBtn:hover {
|
||||
background-color: #fb8c00;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Material green style for Edit button in file list */
|
||||
#fileList button.edit-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#fileList button.edit-btn:hover {
|
||||
background-color: #43A047;
|
||||
}
|
||||
|
||||
/* FILE LIST ACTIONS CONTAINER */
|
||||
.file-list-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
}
|
||||
.folder-dropdown {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
/* Upload and Choose File button styles */
|
||||
.btn-upload {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
/* FILE LIST TABLE */
|
||||
#fileList table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.btn-upload:disabled {
|
||||
background-color: gray;
|
||||
#fileList table th,
|
||||
#fileList table td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border: none; /* Remove table borders */
|
||||
}
|
||||
.btn-choose-file {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
#fileList table tr:nth-child(even) {
|
||||
background-color: transparent; /* Remove alternating grey rows */
|
||||
}
|
||||
#fileList table tr:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* File list and progress bar */
|
||||
.file-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.progress {
|
||||
margin-top: 10px;
|
||||
height: 20px; /* Narrow progress bar */
|
||||
width: 100%;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 100%; /* Fill the entire height */
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table, th, td {
|
||||
border: 1px solid #ccc; /* Lighter border color */
|
||||
}
|
||||
th, td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Headings and form labels */
|
||||
/* HEADINGS & FORM LABELS */
|
||||
h2 {
|
||||
font-size: 2em; /* Larger heading for better emphasis */
|
||||
font-size: 2em;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 10px; /* Increased spacing */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem; /* Rem unit for scalability */
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Button font size */
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Utility class for aligning items */
|
||||
/* UTILITY CLASSES */
|
||||
.align-items-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Table header button style (if using buttons inside headers) */
|
||||
.table th button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Initially hide login and upload forms */
|
||||
/* INITIAL HIDE FORMS */
|
||||
#loginForm, #uploadForm {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Remove bottom margin from the form group */
|
||||
.card-body .form-group {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Force a small top margin for the Create Folder button */
|
||||
#createFolderBtn {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
#fileListContainer {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user