Kumi
7d78c5d4a0
This commit overhauls the user area with the addition of comprehensive file upload capabilities for images and videos. Notably, it integrates front-end enhancements for drag-and-drop uploads in the user area and introduces a secure back-end handling process. The back-end adjustments include a new media upload view and adjustments to image and video models to support large file handling through settings for maximum image pixel limits. Additionally, the refactor standardizes CSRF token retrieval across JavaScript modules, improving security and code maintainability. - Front-end additions include detailed user feedback during the file upload process, such as progress bars and success/error indicators. - Back-end improvements ensure large image files are processed efficiently, mitigating potential memory issues by configuring a maximum image pixel threshold. - Consolidating the CSRF token retrieval into the `api.js` module centralizes security mechanisms, reducing redundancy and enhancing the codebase's clarity. Overall, these changes enrich the platform's media management capabilities, bolster security practices, and improve user experience through intuitive interface updates and robust back-end processing.
229 lines
4 KiB
CSS
229 lines
4 KiB
CSS
/* Base "admin" layout */
|
|
|
|
body {
|
|
background-color: #2d2d30;
|
|
color: #ccc;
|
|
font-family: "Courier New", monospace;
|
|
}
|
|
|
|
.admin-header {
|
|
background-color: #333333;
|
|
padding: 10px 20px;
|
|
color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
color: #9cdcfe;
|
|
text-align: right;
|
|
}
|
|
|
|
.admin-sidebar {
|
|
background-color: #1e1e1e;
|
|
color: #9cdcfe;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.admin-main {
|
|
background-color: #252526;
|
|
color: #ccc;
|
|
padding: 20px;
|
|
min-height: calc(100vh - 50px);
|
|
}
|
|
|
|
.admin-sidebar a {
|
|
color: #9cdcfe;
|
|
text-decoration: none;
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.admin-sidebar a:hover {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.form-control,
|
|
.btn-primary,
|
|
.btn-secondary {
|
|
background-color: #333333;
|
|
color: #9cdcfe;
|
|
border: 1px solid #3c3c3c;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007acc;
|
|
border-color: #007acc;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #3c3c3c;
|
|
border-color: #3c3c3c;
|
|
}
|
|
|
|
/* Tabs */
|
|
|
|
.nav-tabs {
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
.nav-tabs .nav-link {
|
|
border: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
background-color: #333;
|
|
color: #9cdcfe;
|
|
margin-right: 2px;
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
color: #fff;
|
|
background-color: #007acc;
|
|
border-color: #444 #444 #fff;
|
|
}
|
|
.nav-tabs .nav-link:hover {
|
|
border-color: #555 #555 #444;
|
|
}
|
|
.tab-content {
|
|
background-color: #252526;
|
|
color: #ccc;
|
|
border: 1px solid #444;
|
|
padding: 20px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* Tables */
|
|
|
|
.dataTables_wrapper {
|
|
font-family: 'Courier New', monospace;
|
|
color: #9CDCFE;
|
|
font-size: 0.9rem;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_filter input,
|
|
.dataTables_wrapper .dataTables_length select {
|
|
color: #000;
|
|
padding: 0.5rem;
|
|
border: 1px solid #3C3C3C;
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
|
padding: 0.5rem 1rem;
|
|
background-color: #333;
|
|
border: 1px solid #3C3C3C;
|
|
border-radius: 0.25rem;
|
|
margin-left: 5px;
|
|
color: #9CDCFE;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
|
background-color: #007ACC;
|
|
color: #fff;
|
|
}
|
|
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
|
|
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
|
background-color: #007ACC;
|
|
color: #fff;
|
|
}
|
|
|
|
table.dataTable thead th,
|
|
table.dataTable thead td {
|
|
padding: 15px 10px;
|
|
border-bottom: 1px solid #444;
|
|
color: #DCDCAA;
|
|
}
|
|
|
|
table.dataTable tbody tr {
|
|
background-color: #252526;
|
|
}
|
|
|
|
table.dataTable tbody tr:hover {
|
|
background-color: #333333;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
padding: 15px 10px;
|
|
border-color: #444;
|
|
}
|
|
|
|
table.dataTable thead .sorting:before,
|
|
table.dataTable thead .sorting_asc:before,
|
|
table.dataTable thead .sorting_desc:before,
|
|
table.dataTable thead .sorting_asc_disabled:before,
|
|
table.dataTable thead .sorting_desc_disabled:before,
|
|
table.dataTable thead .sorting:after,
|
|
table.dataTable thead .sorting_asc:after,
|
|
table.dataTable thead .sorting_desc:after,
|
|
table.dataTable thead .sorting_asc_disabled:after,
|
|
table.dataTable thead .sorting_desc_disabled:after {
|
|
margin-top: 0.5em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
table.dataTable {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Uploads */
|
|
|
|
.drop-zone {
|
|
max-width: 480px;
|
|
height: 150px;
|
|
padding: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border: 2px dashed #009578;
|
|
border-radius: 10px;
|
|
font-family: sans-serif;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone--over {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.drop-zone__input {
|
|
display: none;
|
|
}
|
|
|
|
.drop-zone__prompt {
|
|
color: #cccccc;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.file-upload-wrapper {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.file-details {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.file-name {
|
|
flex-grow: 1;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.thumbnail {
|
|
width: 128px;
|
|
height: 64px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.progress {
|
|
width: 100%;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
}
|