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

Add mobile responsive admin dashboard

Browse Source 
- 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
This commit is contained in:
ghassan 2026-03-03 21:24:27 +03:00
parent 3f40316d53
commit 59870862db
2 changed files with 290 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
resources/views/admin/dashboard.blade.php
View File

@ -5,8 +5,8 @@
@section('content') @section('content')
<!-- Stats Cards --> <!-- Stats Cards -->
<div class="row mb-4"> <div class="row mb-4 stats-grid">
<div class="col-md-3"> <div class="col-6 col-lg-3">
<div class="stats-card"> <div class="stats-card">
<div class="stats-card-icon"> <div class="stats-card-icon">
<i class="bi bi-people"></i> <i class="bi bi-people"></i>
@ -15,7 +15,7 @@
<div class="stats-card-label">Total Users</div> <div class="stats-card-label">Total Users</div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-6 col-lg-3">
<div class="stats-card"> <div class="stats-card">
<div class="stats-card-icon"> <div class="stats-card-icon">
<i class="bi bi-play-circle"></i> <i class="bi bi-play-circle"></i>
@ -24,7 +24,7 @@
<div class="stats-card-label">Total Videos</div> <div class="stats-card-label">Total Videos</div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-6 col-lg-3">
<div class="stats-card"> <div class="stats-card">
<div class="stats-card-icon"> <div class="stats-card-icon">
<i class="bi bi-eye"></i> <i class="bi bi-eye"></i>
@ -33,7 +33,7 @@
<div class="stats-card-label">Total Views</div> <div class="stats-card-label">Total Views</div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-6 col-lg-3">
<div class="stats-card"> <div class="stats-card">
<div class="stats-card-icon"> <div class="stats-card-icon">
<i class="bi bi-hand-thumbs-up"></i> <i class="bi bi-hand-thumbs-up"></i>
@ -47,111 +47,115 @@
<!-- Recent Users & Videos --> <!-- Recent Users & Videos -->
<div class="row"> <div class="row">
<!-- Recent Users --> <!-- Recent Users -->
<div class="col-lg-6"> <div class="col-lg-6 mb-4">
<div class="admin-card"> <div class="admin-card">
<div class="admin-card-header"> <div class="admin-card-header">
<h5 class="admin-card-title">Recent Users</h5> <h5 class="admin-card-title">Recent Users</h5>
<a href="{{ route('admin.users') }}" class="btn btn-outline-light btn-sm">View All</a> <a href="{{ route('admin.users') }}" class="btn btn-outline-light btn-sm">View All</a>
</div> </div>
<table class="admin-table"> <div class="table-responsive">
<thead> <table class="admin-table">
<tr> <thead>
<th>User</th> <tr>
<th>Role</th> <th>User</th>
<th>Joined</th> <th>Role</th>
</tr> <th>Joined</th>
</thead> </tr>
<tbody> </thead>
@forelse($recentUsers as $user) <tbody>
<tr> @forelse($recentUsers as $user)
<td> <tr>
<div class="d-flex align-items-center gap-2"> <td>
<img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar"> <div class="d-flex align-items-center gap-2">
<div> <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar">
<div>{{ $user->name }}</div> <div>
<small class="text-secondary">{{ $user->email }}</small> <div>{{ $user->name }}</div>
<small class="text-secondary">{{ Str::limit($user->email, 20) }}</small>
</div>
</div> </div>
</div> </td>
</td> <td>
<td> @if($user->role === 'super_admin')
@if($user->role === 'super_admin') <span class="badge-role badge-super-admin">Super Admin</span>
<span class="badge-role badge-super-admin">Super Admin</span> @elseif($user->role === 'admin')
@elseif($user->role === 'admin') <span class="badge-role badge-admin">Admin</span>
<span class="badge-role badge-admin">Admin</span> @else
@else <span class="badge-role badge-user">User</span>
<span class="badge-role badge-user">User</span> @endif
@endif </td>
</td> <td>{{ $user->created_at->diffForHumans() }}</td>
<td>{{ $user->created_at->diffForHumans() }}</td> </tr>
</tr> @empty
@empty <tr>
<tr> <td colspan="3" class="text-center text-secondary">No users found</td>
<td colspan="3" class="text-center text-secondary">No users found</td> </tr>
</tr> @endforelse
@endforelse </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</div> </div>
<!-- Recent Videos --> <!-- Recent Videos -->
<div class="col-lg-6"> <div class="col-lg-6 mb-4">
<div class="admin-card"> <div class="admin-card">
<div class="admin-card-header"> <div class="admin-card-header">
<h5 class="admin-card-title">Recent Videos</h5> <h5 class="admin-card-title">Recent Videos</h5>
<a href="{{ route('admin.videos') }}" class="btn btn-outline-light btn-sm">View All</a> <a href="{{ route('admin.videos') }}" class="btn btn-outline-light btn-sm">View All</a>
</div> </div>
<table class="admin-table"> <div class="table-responsive">
<thead> <table class="admin-table">
<tr> <thead>
<th>Video</th> <tr>
<th>Status</th> <th>Video</th>
<th>Uploaded</th> <th>Status</th>
</tr> <th>Uploaded</th>
</thead> </tr>
<tbody> </thead>
@forelse($recentVideos as $video) <tbody>
<tr> @forelse($recentVideos as $video)
<td> <tr>
<div class="d-flex align-items-center gap-2"> <td>
@if($video->thumbnail) <div class="d-flex align-items-center gap-2">
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;"> @if($video->thumbnail)
@else <img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0;">
<div style="width: 60px; height: 40px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center;"> @else
<i class="bi bi-play-circle text-secondary"></i> <div style="width: 60px; height: 40px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<i class="bi bi-play-circle text-secondary"></i>
</div>
@endif
<div>
<div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $video->title }}</div>
<small class="text-secondary">by {{ $video->user->name }}</small>
</div> </div>
@endif
<div>
<div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $video->title }}</div>
<small class="text-secondary">by {{ $video->user->name }}</small>
</div> </div>
</div> </td>
</td> <td>
<td> @switch($video->status)
@switch($video->status) @case('ready')
@case('ready') <span class="badge-status badge-ready">Ready</span>
<span class="badge-status badge-ready">Ready</span> @break
@break @case('processing')
@case('processing') <span class="badge-status badge-processing">Processing</span>
<span class="badge-status badge-processing">Processing</span> @break
@break @case('pending')
@case('pending') <span class="badge-status badge-pending">Pending</span>
<span class="badge-status badge-pending">Pending</span> @break
@break @case('failed')
@case('failed') <span class="badge-status badge-failed">Failed</span>
<span class="badge-status badge-failed">Failed</span> @break
@break @endswitch
@endswitch </td>
</td> <td>{{ $video->created_at->diffForHumans() }}</td>
<td>{{ $video->created_at->diffForHumans() }}</td> </tr>
</tr> @empty
@empty <tr>
<tr> <td colspan="3" class="text-center text-secondary">No videos found</td>
<td colspan="3" class="text-center text-secondary">No videos found</td> </tr>
</tr> @endforelse
@endforelse </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</div> </div>
</div> </div>
@ -159,7 +163,7 @@
<!-- Videos by Status & Visibility --> <!-- Videos by Status & Visibility -->
<div class="row"> <div class="row">
<!-- Videos by Status --> <!-- Videos by Status -->
<div class="col-lg-6"> <div class="col-lg-6 mb-4">
<div class="admin-card"> <div class="admin-card">
<div class="admin-card-header"> <div class="admin-card-header">
<h5 class="admin-card-title">Videos by Status</h5> <h5 class="admin-card-title">Videos by Status</h5>
@ -186,7 +190,7 @@
</div> </div>
<!-- Videos by Visibility --> <!-- Videos by Visibility -->
<div class="col-lg-6"> <div class="col-lg-6 mb-4">
<div class="admin-card"> <div class="admin-card">
<div class="admin-card-header"> <div class="admin-card-header">
<h5 class="admin-card-title">Videos by Visibility</h5> <h5 class="admin-card-title">Videos by Visibility</h5>

283
resources/views/admin/layout.blade.php
View File

@ -18,6 +18,8 @@
--border-color: #303030; --border-color: #303030;
--text-primary: #f1f1f1; --text-primary: #f1f1f1;
--text-secondary: #aaaaaa; --text-secondary: #aaaaaa;
--sidebar-width: 240px;
--header-height: 56px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@ -31,13 +33,12 @@
overflow-x: hidden; overflow-x: hidden;
} }
/* Header */
.yt-header { .yt-header {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 56px; height: var(--header-height);
background: var(--bg-dark); background: var(--bg-dark);
display: flex; display: flex;
align-items: center; align-items: center;
@ -83,12 +84,15 @@
letter-spacing: -1px; letter-spacing: -1px;
} }
/* Search */
.yt-header-center { .yt-header-center {
flex: 1; flex: 1;
max-width: 640px; max-width: 640px;
margin: 0 40px; margin: 0 40px;
display: flex; display: none;
}
@media (min-width: 992px) {
.yt-header-center { display: flex; }
} }
.yt-search { .yt-search {
@ -124,7 +128,6 @@
.yt-search-btn:hover { background: #303030; } .yt-search-btn:hover { background: #303030; }
/* Header Right */
.yt-header-right { .yt-header-right {
display: flex; display: flex;
align-items: center; align-items: center;
@ -155,59 +158,17 @@
cursor: pointer; 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 { .admin-sidebar {
position: fixed; position: fixed;
top: 56px; top: var(--header-height);
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 240px; width: var(--sidebar-width);
background: var(--bg-secondary); background: var(--bg-secondary);
padding: 20px 0; padding: 20px 0;
z-index: 1000; z-index: 999;
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
transition: transform 0.3s ease;
} }
.admin-sidebar-brand { .admin-sidebar-brand {
@ -245,17 +206,35 @@
.admin-sidebar-link i { .admin-sidebar-link i {
font-size: 1.2rem; 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 { .admin-main {
margin-top: 56px; margin-top: var(--header-height);
margin-left: 240px; margin-left: var(--sidebar-width);
padding: 24px; 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 { .yt-upload-btn {
background: var(--brand-red); background: var(--brand-red);
color: white; color: white;
@ -272,7 +251,6 @@
.yt-upload-btn:hover { background: #cc1a1a; } .yt-upload-btn:hover { background: #cc1a1a; }
/* Dropdown */
.dropdown-menu-dark { .dropdown-menu-dark {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -287,7 +265,6 @@
color: var(--text-primary); color: var(--text-primary);
} }
/* Cards */
.admin-card { .admin-card {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -301,6 +278,8 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
} }
.admin-card-title { .admin-card-title {
@ -309,13 +288,13 @@
margin: 0; margin: 0;
} }
/* Stats Cards */
.stats-card { .stats-card {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
height: 100%;
} }
.stats-card-icon { .stats-card-icon {
@ -335,10 +314,15 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
/* Tables */ .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-table { .admin-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
min-width: 500px;
} }
.admin-table th, .admin-table th,
@ -360,7 +344,6 @@
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
} }
/* Forms */
.form-control, .form-select { .form-control, .form-select {
background: #282828; background: #282828;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -382,7 +365,6 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
/* Buttons */
.btn-primary { .btn-primary {
background: var(--brand-red); background: var(--brand-red);
border-color: var(--brand-red); border-color: var(--brand-red);
@ -404,7 +386,6 @@
color: var(--text-primary); color: var(--text-primary);
} }
/* Badges */
.badge-role { .badge-role {
padding: 5px 10px; padding: 5px 10px;
border-radius: 20px; border-radius: 20px;
@ -428,12 +409,12 @@
color: white; color: white;
} }
/* Status badges */
.badge-status { .badge-status {
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
white-space: nowrap;
} }
.badge-ready { background: #198754; color: white; } .badge-ready { background: #198754; color: white; }
@ -441,31 +422,31 @@
.badge-pending { background: #ffc107; color: black; } .badge-pending { background: #ffc107; color: black; }
.badge-failed { background: #dc3545; color: white; } .badge-failed { background: #dc3545; color: white; }
/* Visibility badges */
.badge-public { background: #198754; color: white; } .badge-public { background: #198754; color: white; }
.badge-unlisted { background: #fd7e14; color: white; } .badge-unlisted { background: #fd7e14; color: white; }
.badge-private { background: #6c757d; color: white; } .badge-private { background: #6c757d; color: white; }
/* User avatar */
.user-avatar { .user-avatar {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
flex-shrink: 0;
} }
/* Search */
.search-form { .search-form {
display: flex; display: flex;
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
flex-wrap: wrap;
} }
.search-form .form-control { .search-form .form-control {
flex: 1;
min-width: 200px;
max-width: 300px; max-width: 300px;
} }
/* Filters */
.filter-form { .filter-form {
display: flex; display: flex;
gap: 15px; gap: 15px;
@ -489,15 +470,16 @@
min-width: 150px; min-width: 150px;
} }
/* Pagination */
.pagination { .pagination {
margin-top: 20px; margin-top: 20px;
flex-wrap: wrap;
} }
.page-link { .page-link {
background: var(--bg-secondary); background: var(--bg-secondary);
border-color: var(--border-color); border-color: var(--border-color);
color: var(--text-primary); color: var(--text-primary);
padding: 8px 12px;
} }
.page-link:hover { .page-link:hover {
@ -511,7 +493,6 @@
border-color: var(--brand-red); border-color: var(--brand-red);
} }
/* Modal */
.modal-content { .modal-content {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -525,7 +506,6 @@
border-top-color: var(--border-color); border-top-color: var(--border-color);
} }
/* Alerts */
.alert-success { .alert-success {
background: #198754; background: #198754;
border: none; border: none;
@ -538,24 +518,102 @@
color: white; color: white;
} }
/* Responsive */ .page-title {
@media (max-width: 768px) { font-size: 1.5rem;
}
/* MOBILE STYLES */
@media (max-width: 991px) {
.admin-sidebar { .admin-sidebar {
width: 60px; transform: translateX(-100%);
width: 280px;
} }
.admin-sidebar-brand h4, .admin-sidebar.open {
.admin-sidebar-link span { transform: translateX(0);
display: none;
}
.admin-sidebar-link {
justify-content: center;
padding: 15px;
} }
.admin-main { .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;
} }
} }
</style> </style>
@ -563,13 +621,13 @@
@yield('extra_styles') @yield('extra_styles')
</head> </head>
<body> <body>
<!-- Header -->
@include('layouts.partials.header') @include('layouts.partials.header')
<!-- Sidebar --> <div class="sidebar-overlay" id="sidebarOverlay"></div>
<aside class="admin-sidebar">
<aside class="admin-sidebar" id="adminSidebar">
<div class="admin-sidebar-brand"> <div class="admin-sidebar-brand">
<h4><i class="bi bi-speedometer2"></i> Admin</h4> <h4><i class="bi bi-speedometer2"></i> <span class="d-none d-md-inline">Admin</span></h4>
</div> </div>
<nav> <nav>
@ -593,19 +651,60 @@
</nav> </nav>
</aside> </aside>
<!-- Main Content -->
<main class="admin-main"> <main class="admin-main">
<!-- Page Title --> <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
<div class="d-flex justify-content-between align-items-center mb-4"> <h1 class="page-title" style="margin: 0; font-size: 1.8rem; font-weight: 600;">@yield('page_title', 'Dashboard')</h1>
<h1 style="margin: 0; font-size: 1.8rem; font-weight: 600;">@yield('page_title', 'Dashboard')</h1>
</div> </div>
<!-- Content -->
@yield('content') @yield('content')
</main> </main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var menuBtn = document.querySelector('.yt-menu-btn');
var sidebar = document.getElementById('adminSidebar');
var overlay = document.getElementById('sidebarOverlay');
function checkMobile() {
return window.innerWidth <= 991;
}
function toggleSidebar() {
if (checkMobile()) {
sidebar.classList.toggle('open');
overlay.classList.toggle('active');
}
}
if (menuBtn) {
menuBtn.addEventListener('click', toggleSidebar);
}
if (overlay) {
overlay.addEventListener('click', toggleSidebar);
}
window.addEventListener('resize', function() {
if (!checkMobile()) {
sidebar.classList.remove('open');
overlay.classList.remove('active');
}
});
var navLinks = document.querySelectorAll('.admin-sidebar-link');
navLinks.forEach(function(link) {
link.addEventListener('click', function() {
if (checkMobile()) {
sidebar.classList.remove('open');
overlay.classList.remove('active');
}
});
});
});
</script>
@yield('scripts') @yield('scripts')
</body> </body>
</html> </html>