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')
<!-- Stats Cards -->
<div class="row mb-4">
<div class="col-md-3">
<div class="row mb-4 stats-grid">
<div class="col-6 col-lg-3">
<div class="stats-card">
<div class="stats-card-icon">
<i class="bi bi-people"></i>
@ -15,7 +15,7 @@
<div class="stats-card-label">Total Users</div>
</div>
</div>
<div class="col-md-3">
<div class="col-6 col-lg-3">
<div class="stats-card">
<div class="stats-card-icon">
<i class="bi bi-play-circle"></i>
@ -24,7 +24,7 @@
<div class="stats-card-label">Total Videos</div>
</div>
</div>
<div class="col-md-3">
<div class="col-6 col-lg-3">
<div class="stats-card">
<div class="stats-card-icon">
<i class="bi bi-eye"></i>
@ -33,7 +33,7 @@
<div class="stats-card-label">Total Views</div>
</div>
</div>
<div class="col-md-3">
<div class="col-6 col-lg-3">
<div class="stats-card">
<div class="stats-card-icon">
<i class="bi bi-hand-thumbs-up"></i>
@ -47,111 +47,115 @@
<!-- Recent Users & Videos -->
<div class="row">
<!-- Recent Users -->
<div class="col-lg-6">
<div class="col-lg-6 mb-4">
<div class="admin-card">
<div class="admin-card-header">
<h5 class="admin-card-title">Recent Users</h5>
<a href="{{ route('admin.users') }}" class="btn btn-outline-light btn-sm">View All</a>
</div>
<table class="admin-table">
<thead>
<tr>
<th>User</th>
<th>Role</th>
<th>Joined</th>
</tr>
</thead>
<tbody>
@forelse($recentUsers as $user)
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar">
<div>
<div>{{ $user->name }}</div>
<small class="text-secondary">{{ $user->email }}</small>
<div class="table-responsive">
<table class="admin-table">
<thead>
<tr>
<th>User</th>
<th>Role</th>
<th>Joined</th>
</tr>
</thead>
<tbody>
@forelse($recentUsers as $user)
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar">
<div>
<div>{{ $user->name }}</div>
<small class="text-secondary">{{ Str::limit($user->email, 20) }}</small>
</div>
</div>
</div>
</td>
<td>
@if($user->role === 'super_admin')
<span class="badge-role badge-super-admin">Super Admin</span>
@elseif($user->role === 'admin')
<span class="badge-role badge-admin">Admin</span>
@else
<span class="badge-role badge-user">User</span>
@endif
</td>
<td>{{ $user->created_at->diffForHumans() }}</td>
</tr>
@empty
<tr>
<td colspan="3" class="text-center text-secondary">No users found</td>
</tr>
@endforelse
</tbody>
</table>
</td>
<td>
@if($user->role === 'super_admin')
<span class="badge-role badge-super-admin">Super Admin</span>
@elseif($user->role === 'admin')
<span class="badge-role badge-admin">Admin</span>
@else
<span class="badge-role badge-user">User</span>
@endif
</td>
<td>{{ $user->created_at->diffForHumans() }}</td>
</tr>
@empty
<tr>
<td colspan="3" class="text-center text-secondary">No users found</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<!-- Recent Videos -->
<div class="col-lg-6">
<div class="col-lg-6 mb-4">
<div class="admin-card">
<div class="admin-card-header">
<h5 class="admin-card-title">Recent Videos</h5>
<a href="{{ route('admin.videos') }}" class="btn btn-outline-light btn-sm">View All</a>
</div>
<table class="admin-table">
<thead>
<tr>
<th>Video</th>
<th>Status</th>
<th>Uploaded</th>
</tr>
</thead>
<tbody>
@forelse($recentVideos as $video)
<tr>
<td>
<div class="d-flex align-items-center gap-2">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;">
@else
<div style="width: 60px; height: 40px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
<i class="bi bi-play-circle text-secondary"></i>
<div class="table-responsive">
<table class="admin-table">
<thead>
<tr>
<th>Video</th>
<th>Status</th>
<th>Uploaded</th>
</tr>
</thead>
<tbody>
@forelse($recentVideos as $video)
<tr>
<td>
<div class="d-flex align-items-center gap-2">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0;">
@else
<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>
@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>
</td>
<td>
@switch($video->status)
@case('ready')
<span class="badge-status badge-ready">Ready</span>
@break
@case('processing')
<span class="badge-status badge-processing">Processing</span>
@break
@case('pending')
<span class="badge-status badge-pending">Pending</span>
@break
@case('failed')
<span class="badge-status badge-failed">Failed</span>
@break
@endswitch
</td>
<td>{{ $video->created_at->diffForHumans() }}</td>
</tr>
@empty
<tr>
<td colspan="3" class="text-center text-secondary">No videos found</td>
</tr>
@endforelse
</tbody>
</table>
</td>
<td>
@switch($video->status)
@case('ready')
<span class="badge-status badge-ready">Ready</span>
@break
@case('processing')
<span class="badge-status badge-processing">Processing</span>
@break
@case('pending')
<span class="badge-status badge-pending">Pending</span>
@break
@case('failed')
<span class="badge-status badge-failed">Failed</span>
@break
@endswitch
</td>
<td>{{ $video->created_at->diffForHumans() }}</td>
</tr>
@empty
<tr>
<td colspan="3" class="text-center text-secondary">No videos found</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
@ -159,7 +163,7 @@
<!-- Videos by Status & Visibility -->
<div class="row">
<!-- Videos by Status -->
<div class="col-lg-6">
<div class="col-lg-6 mb-4">
<div class="admin-card">
<div class="admin-card-header">
<h5 class="admin-card-title">Videos by Status</h5>
@ -186,7 +190,7 @@
</div>
<!-- Videos by Visibility -->
<div class="col-lg-6">
<div class="col-lg-6 mb-4">
<div class="admin-card">
<div class="admin-card-header">
<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;
--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;
}
}
</style>
@ -563,13 +621,13 @@
@yield('extra_styles')
</head>
<body>
<!-- Header -->
@include('layouts.partials.header')
<!-- Sidebar -->
<aside class="admin-sidebar">
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<aside class="admin-sidebar" id="adminSidebar">
<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>
<nav>
@ -593,19 +651,60 @@
</nav>
</aside>
<!-- Main Content -->
<main class="admin-main">
<!-- Page Title -->
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 style="margin: 0; font-size: 1.8rem; font-weight: 600;">@yield('page_title', 'Dashboard')</h1>
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
<h1 class="page-title" style="margin: 0; font-size: 1.8rem; font-weight: 600;">@yield('page_title', 'Dashboard')</h1>
</div>
<!-- Content -->
@yield('content')
</main>
<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')
</body>
</html>