mobile: off-canvas sidebar, responsive grids/charts/top-bar
- Sidebar becomes slide-in overlay under 768px with backdrop - Hamburger button in top-bar for mobile nav toggle - Grids stack single-column, charts shrink to 280px - Tables scroll horizontally with touch momentum - Status text hidden on mobile (dot stays visible) - Card headers/actions stack vertically - Period selectors scroll horizontally also: image size validation clamp in handleImageGenerations
This commit is contained in:
+9
-3
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GopherGate - Admin Dashboard</title>
|
||||
<link rel="stylesheet" href="/css/dashboard.css?v=11">
|
||||
<link rel="stylesheet" href="/css/dashboard.css?v=12">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -51,7 +51,7 @@
|
||||
<span>GopherGate</span>
|
||||
</div>
|
||||
<button class="sidebar-toggle" id="sidebar-toggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -135,11 +135,17 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile sidebar backdrop -->
|
||||
<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<header class="top-bar">
|
||||
<button class="mobile-menu-btn" id="mobile-menu-btn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="page-title">
|
||||
<h2 id="current-page-title">Overview</h2>
|
||||
<h2 id="page-title">Overview</h2>
|
||||
</div>
|
||||
<div class="top-bar-actions">
|
||||
<div id="connection-status" class="status-indicator">
|
||||
|
||||
Reference in New Issue
Block a user