From 59870862dbde2f0ae2676949d7da3eb7bf177acd Mon Sep 17 00:00:00 2001 From: ghassan Date: Tue, 3 Mar 2026 21:24:27 +0300 Subject: [PATCH] Add mobile responsive admin dashboard - Hamburger menu toggle for mobile sidebar - Slide-in sidebar overlay on mobile - Responsive stats cards (2 per row tablet, 1 per row mobile) - Touch-friendly targets (44px minimum) - Table scroll wrapper for horizontal scroll - Responsive typography and spacing - Close sidebar on nav click and resize --- resources/views/admin/dashboard.blade.php | 194 +++++++-------- resources/views/admin/layout.blade.php | 283 +++++++++++++++------- 2 files changed, 290 insertions(+), 187 deletions(-) diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php index 0749768..3d1eb86 100644 --- a/resources/views/admin/dashboard.blade.php +++ b/resources/views/admin/dashboard.blade.php @@ -5,8 +5,8 @@ @section('content') -
-
+
+
@@ -15,7 +15,7 @@
Total Users
-
+
@@ -24,7 +24,7 @@
Total Videos
-
+
@@ -33,7 +33,7 @@
Total Views
-
+
@@ -47,111 +47,115 @@
-
+
Recent Users
View All
- - - - - - - - - - @forelse($recentUsers as $user) - - + + + + @empty + + + + @endforelse + +
UserRoleJoined
-
- {{ $user->name }} -
-
{{ $user->name }}
- {{ $user->email }} +
+ + + + + + + + + + @forelse($recentUsers as $user) + + - - - - @empty - - - - @endforelse - -
UserRoleJoined
+
+ {{ $user->name }} +
+
{{ $user->name }}
+ {{ Str::limit($user->email, 20) }} +
- - 		- @if($user->role === 'super_admin') - Super Admin - @elseif($user->role === 'admin') - Admin - @else - User - @endif - {{ $user->created_at->diffForHumans() }}
No users found
+
+ @if($user->role === 'super_admin') + Super Admin + @elseif($user->role === 'admin') + Admin + @else + User + @endif + {{ $user->created_at->diffForHumans() }}
No users found
+
-
+
Recent Videos
View All
- - - - - - - - - - @forelse($recentVideos as $video) - - + + + + @empty + + + + @endforelse + +
VideoStatusUploaded
-
- @if($video->thumbnail) - {{ $video->title }} - @else -
- +
+ + + + + + + + + + @forelse($recentVideos as $video) + + - - - - @empty - - - - @endforelse - -
VideoStatusUploaded
+
+ @if($video->thumbnail) + {{ $video->title }} + @else +
+ +
+ @endif +
+
{{ $video->title }}
+ by {{ $video->user->name }}
- @endif -
-
{{ $video->title }}
- by {{ $video->user->name }}
-
- 		- @switch($video->status) - @case('ready') - Ready - @break - @case('processing') - Processing - @break - @case('pending') - Pending - @break - @case('failed') - Failed - @break - @endswitch - {{ $video->created_at->diffForHumans() }}
No videos found
+
+ @switch($video->status) + @case('ready') + Ready + @break + @case('processing') + Processing + @break + @case('pending') + Pending + @break + @case('failed') + Failed + @break + @endswitch + {{ $video->created_at->diffForHumans() }}
No videos found
+
@@ -159,7 +163,7 @@
-
+
Videos by Status
@@ -186,7 +190,7 @@
-
+
Videos by Visibility
diff --git a/resources/views/admin/layout.blade.php b/resources/views/admin/layout.blade.php index 373bcb0..a9a1211 100644 --- a/resources/views/admin/layout.blade.php +++ b/resources/views/admin/layout.blade.php @@ -18,6 +18,8 @@ --border-color: #303030; --text-primary: #f1f1f1; --text-secondary: #aaaaaa; + --sidebar-width: 240px; + --header-height: 56px; } * { box-sizing: border-box; } @@ -31,13 +33,12 @@ overflow-x: hidden; } - /* Header */ .yt-header { position: fixed; top: 0; left: 0; right: 0; - height: 56px; + height: var(--header-height); background: var(--bg-dark); display: flex; align-items: center; @@ -83,12 +84,15 @@ letter-spacing: -1px; } - /* Search */ .yt-header-center { flex: 1; max-width: 640px; margin: 0 40px; - display: flex; + display: none; + } + + @media (min-width: 992px) { + .yt-header-center { display: flex; } } .yt-search { @@ -124,7 +128,6 @@ .yt-search-btn:hover { background: #303030; } - /* Header Right */ .yt-header-right { display: flex; align-items: center; @@ -155,59 +158,17 @@ cursor: pointer; } - /* Sidebar */ - .yt-sidebar { - position: fixed; - top: 56px; - left: 0; - bottom: 0; - width: 240px; - background: var(--bg-dark); - overflow-y: auto; - padding: 12px; - transition: transform 0.3s; - z-index: 999; - } - - .yt-sidebar-section { - padding-bottom: 12px; - border-bottom: 1px solid var(--border-color); - margin-bottom: 12px; - } - - .yt-sidebar-link { - display: flex; - align-items: center; - gap: 20px; - padding: 0 12px; - height: 40px; - border-radius: 10px; - color: var(--text-primary); - text-decoration: none; - cursor: pointer; - transition: background 0.2s; - } - - .yt-sidebar-link:hover { background: var(--border-color); } - - .yt-sidebar-link.active { - background: var(--border-color); - font-weight: 500; - } - - .yt-sidebar-link i { font-size: 1.2rem; } - - /* Admin Sidebar */ .admin-sidebar { position: fixed; - top: 56px; + top: var(--header-height); left: 0; bottom: 0; - width: 240px; + width: var(--sidebar-width); background: var(--bg-secondary); padding: 20px 0; - z-index: 1000; + z-index: 999; border-right: 1px solid var(--border-color); + transition: transform 0.3s ease; } .admin-sidebar-brand { @@ -245,17 +206,35 @@ .admin-sidebar-link i { font-size: 1.2rem; + flex-shrink: 0; + } + + .sidebar-overlay { + display: none; + position: fixed; + top: var(--header-height); + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 998; + opacity: 0; + transition: opacity 0.3s; + } + + .sidebar-overlay.active { + display: block; + opacity: 1; } - /* Main Content */ .admin-main { - margin-top: 56px; - margin-left: 240px; + margin-top: var(--header-height); + margin-left: var(--sidebar-width); padding: 24px; - min-height: calc(100vh - 56px); + min-height: calc(100vh - var(--header-height)); + transition: margin-left 0.3s ease; } - /* Upload Button */ .yt-upload-btn { background: var(--brand-red); color: white; @@ -272,7 +251,6 @@ .yt-upload-btn:hover { background: #cc1a1a; } - /* Dropdown */ .dropdown-menu-dark { background: var(--bg-secondary); border: 1px solid var(--border-color); @@ -287,7 +265,6 @@ color: var(--text-primary); } - /* Cards */ .admin-card { background: var(--bg-secondary); border: 1px solid var(--border-color); @@ -301,6 +278,8 @@ justify-content: space-between; align-items: center; margin-bottom: 15px; + flex-wrap: wrap; + gap: 10px; } .admin-card-title { @@ -309,13 +288,13 @@ margin: 0; } - /* Stats Cards */ .stats-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; text-align: center; + height: 100%; } .stats-card-icon { @@ -335,10 +314,15 @@ font-size: 0.9rem; } - /* Tables */ + .table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .admin-table { width: 100%; border-collapse: collapse; + min-width: 500px; } .admin-table th, @@ -360,7 +344,6 @@ background: rgba(255,255,255,0.02); } - /* Forms */ .form-control, .form-select { background: #282828; border: 1px solid var(--border-color); @@ -382,7 +365,6 @@ margin-bottom: 8px; } - /* Buttons */ .btn-primary { background: var(--brand-red); border-color: var(--brand-red); @@ -404,7 +386,6 @@ color: var(--text-primary); } - /* Badges */ .badge-role { padding: 5px 10px; border-radius: 20px; @@ -428,12 +409,12 @@ color: white; } - /* Status badges */ .badge-status { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; + white-space: nowrap; } .badge-ready { background: #198754; color: white; } @@ -441,31 +422,31 @@ .badge-pending { background: #ffc107; color: black; } .badge-failed { background: #dc3545; color: white; } - /* Visibility badges */ .badge-public { background: #198754; color: white; } .badge-unlisted { background: #fd7e14; color: white; } .badge-private { background: #6c757d; color: white; } - /* User avatar */ .user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; + flex-shrink: 0; } - /* Search */ .search-form { display: flex; gap: 10px; margin-bottom: 20px; + flex-wrap: wrap; } .search-form .form-control { + flex: 1; + min-width: 200px; max-width: 300px; } - /* Filters */ .filter-form { display: flex; gap: 15px; @@ -489,15 +470,16 @@ min-width: 150px; } - /* Pagination */ .pagination { margin-top: 20px; + flex-wrap: wrap; } .page-link { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); + padding: 8px 12px; } .page-link:hover { @@ -511,7 +493,6 @@ border-color: var(--brand-red); } - /* Modal */ .modal-content { background: var(--bg-secondary); border: 1px solid var(--border-color); @@ -525,7 +506,6 @@ border-top-color: var(--border-color); } - /* Alerts */ .alert-success { background: #198754; border: none; @@ -538,24 +518,102 @@ color: white; } - /* Responsive */ - @media (max-width: 768px) { + .page-title { + font-size: 1.5rem; + } + + /* MOBILE STYLES */ + @media (max-width: 991px) { .admin-sidebar { - width: 60px; + transform: translateX(-100%); + width: 280px; } - .admin-sidebar-brand h4, - .admin-sidebar-link span { - display: none; - } - - .admin-sidebar-link { - justify-content: center; - padding: 15px; + .admin-sidebar.open { + transform: translateX(0); } .admin-main { - margin-left: 60px; + margin-left: 0; + padding: 16px; + } + + .admin-sidebar-link { + padding: 14px 20px; + } + + .stats-card { + margin-bottom: 12px; + } + + .page-title { + font-size: 1.3rem; + } + + .admin-card { + padding: 16px; + } + + .admin-card-header { + flex-direction: column; + align-items: flex-start; + } + } + + @media (max-width: 575px) { + .stats-grid > div { + margin-bottom: 12px; + } + + .stats-card-value { + font-size: 1.5rem; + } + + .stats-card-icon { + font-size: 1.5rem; + } + + .admin-table td .d-flex { + flex-direction: column; + align-items: flex-start !important; + } + + .admin-table td .text-secondary { + font-size: 0.75rem; + } + + .admin-table td div[style*="max-width"] { + max-width: 150px !important; + } + + .page-title { + font-size: 1.2rem; + } + + .search-form .form-control, + .filter-form .form-select { + width: 100%; + max-width: none; + } + + .badge-status { + font-size: 0.65rem; + padding: 3px 6px; + } + } + + @media (pointer: coarse) { + .admin-sidebar-link, + .btn, + .page-link, + .yt-menu-btn, + .yt-icon-btn { + min-height: 44px; + min-width: 44px; + } + + input, select, textarea { + font-size: 16px; } } @@ -563,13 +621,13 @@ @yield('extra_styles') - @include('layouts.partials.header') - -