Fix: Convert upload modal to full page layout
This commit is contained in:
ghassan
parent
c2180e556d
commit
f78e1f6d4a
@ -24,7 +24,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-standalone {
|
||||
.upload-page-only.upload-page-responsive .upload-page-standalone {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@ -32,13 +32,13 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-header {
|
||||
.upload-page-only.upload-page-responsive .upload-page-header {
|
||||
border-radius: 0;
|
||||
margin: -16px -16px 16px -16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-body {
|
||||
.upload-page-only.upload-page-responsive .upload-page-body {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
@ -70,32 +70,27 @@
|
||||
|
||||
/* Desktop: Modal view */
|
||||
@media (min-width: 992px) {
|
||||
.upload-page-only .yt-header,
|
||||
.upload-page-only .yt-sidebar,
|
||||
.upload-page-only .yt-main {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.upload-page-only {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: auto;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: #121212;
|
||||
}
|
||||
}
|
||||
|
||||
/* Common Modal Styles */
|
||||
.upload-modal-standalone {
|
||||
background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
|
||||
/* Full Page Styles */
|
||||
.upload-page-standalone {
|
||||
background: #1a1a1a;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
animation: modalPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalPopIn {
|
||||
@ -112,15 +107,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.upload-modal-header {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
|
||||
.upload-page-header {
|
||||
background: #1a1a1a;
|
||||
border-bottom: none;
|
||||
padding: 20px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-modal-header::before {
|
||||
.upload-page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
@ -144,7 +139,7 @@
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.upload-modal-header .modal-title {
|
||||
.upload-page-header .modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
@ -156,7 +151,7 @@
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.upload-modal-body {
|
||||
.upload-page-body {
|
||||
padding: 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
@ -405,11 +400,11 @@
|
||||
|
||||
/* Desktop Modal Form Styles */
|
||||
@media (min-width: 992px) {
|
||||
.upload-modal-body .form-group {
|
||||
.upload-page-body .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-label {
|
||||
.upload-page-body .form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -419,13 +414,13 @@
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-label i {
|
||||
.upload-page-body .form-label i {
|
||||
color: #e63030;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-input,
|
||||
.upload-modal-body .form-textarea {
|
||||
.upload-page-body .form-input,
|
||||
.upload-page-body .form-textarea {
|
||||
width: 100%;
|
||||
background: #121212;
|
||||
border: 1px solid #333;
|
||||
@ -436,14 +431,14 @@
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-input:focus,
|
||||
.upload-modal-body .form-textarea:focus {
|
||||
.upload-page-body .form-input:focus,
|
||||
.upload-page-body .form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #e63030;
|
||||
box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal {
|
||||
.upload-page-body .dropzone-modal {
|
||||
border: 2px dashed #404040;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
@ -454,17 +449,17 @@
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal:hover {
|
||||
.upload-page-body .dropzone-modal:hover {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.05);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal.dragover {
|
||||
.upload-page-body .dropzone-modal.dragover {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.1);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal input[type="file"] {
|
||||
.upload-page-body .dropzone-modal input[type="file"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -474,40 +469,40 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-icon {
|
||||
.upload-page-body .dropzone-icon {
|
||||
font-size: 36px;
|
||||
color: #e63030;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-title {
|
||||
.upload-page-body .dropzone-title {
|
||||
color: #e5e5e5;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-hint {
|
||||
.upload-page-body .dropzone-hint {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-options-modal {
|
||||
.upload-page-body .visibility-options-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal {
|
||||
.upload-page-body .visibility-option-modal {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal input {
|
||||
.upload-page-body .visibility-option-modal input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-content-modal {
|
||||
.upload-page-body .visibility-content-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
@ -518,45 +513,45 @@
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal:hover .visibility-content-modal {
|
||||
.upload-page-body .visibility-option-modal:hover .visibility-content-modal {
|
||||
border-color: #555;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal.active .visibility-content-modal {
|
||||
.upload-page-body .visibility-option-modal.active .visibility-content-modal {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.1);
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-content-modal i {
|
||||
.upload-page-body .visibility-content-modal i {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal.active .visibility-content-modal i {
|
||||
.upload-page-body .visibility-option-modal.active .visibility-content-modal i {
|
||||
color: #e63030;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-text {
|
||||
.upload-page-body .visibility-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-title {
|
||||
.upload-page-body .visibility-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-desc {
|
||||
.upload-page-body .visibility-desc {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.upload-modal-actions {
|
||||
.upload-page-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
@ -565,8 +560,8 @@
|
||||
border-top: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel,
|
||||
.upload-modal-actions .btn-submit {
|
||||
.upload-page-actions .btn-cancel,
|
||||
.upload-page-actions .btn-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -579,30 +574,30 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel {
|
||||
.upload-page-actions .btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid #404040;
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel:hover {
|
||||
.upload-page-actions .btn-cancel:hover {
|
||||
border-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
|
||||
.upload-page-actions .btn-submit {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(230, 30, 30, 0.3);
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit:hover {
|
||||
.upload-page-actions .btn-submit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(230, 30, 30, 0.4);
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit:disabled {
|
||||
.upload-page-actions .btn-submit:disabled {
|
||||
background: #555;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
@ -613,9 +608,9 @@
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="upload-modal-standalone">
|
||||
<div class="upload-page-standalone">
|
||||
<!-- Header -->
|
||||
<div class="upload-modal-header">
|
||||
<div class="upload-page-header">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="upload-icon-wrapper">
|
||||
<i class="bi bi-cloud-arrow-up-fill"></i>
|
||||
@ -629,7 +624,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="upload-modal-body">
|
||||
<div class="upload-page-body">
|
||||
<form id="upload-form" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
@ -794,7 +789,7 @@
|
||||
<!-- Status Message -->
|
||||
<div id="status-message"></div>
|
||||
|
||||
<div class="upload-modal-actions">
|
||||
<div class="upload-page-actions">
|
||||
<a href="{{ route('videos.index') }}" class="btn-cancel">
|
||||
Cancel
|
||||
</a>
|
||||
@ -812,7 +807,7 @@
|
||||
.file-preview {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
|
||||
background: #1a1a1a;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user