mobile: off-canvas sidebar, responsive grids/charts/top-bar
CI / Lint (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Build (push) Has been cancelled

- 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:
newkirk
2026-07-27 23:47:23 -04:00
parent ba25f5e6c8
commit c96e1d0350
4 changed files with 234 additions and 9 deletions
+9 -3
View File
@@ -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">