ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Convert upload modal to full page layout

Browse Source
This commit is contained in:
ghassan 2026-03-03 20:51:50 +03:00
parent c2180e556d
commit f78e1f6d4a
1 changed files with 60 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
resources/views/videos/create.blade.php
View File

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