mirrors/versitygw
1
0
Fork 0
mirror of https://github.com/versity/versitygw.git synced 2026-08-17 04:36:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1890 from versity/ben/maxlerebourg-fix-ui

Browse Source 
fix: make webui sidebar responsive on mobile
This commit is contained in:
Ben McClelland
2026-02-23 13:16:59 -08:00
committed by GitHub
parent 5298f09373 3d5663655f
commit 757c4146aa
4 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/web/buckets.html
+17 -6
View File
@@ -87,10 +87,21 @@ under the License.
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<div class="flex h-screen overflow-hidden">
<div class="relative flex h-screen overflow-hidden">
<input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
<label for="sidebar-toggle" aria-label="Toggle navigation" class="
sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
flex justify-center items-center p-2 rounded-lg transition-all
text-charcoal-300 hover:text-charcoal hover:bg-gray-100
peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
<path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
</svg>
</label>
<!-- Sidebar -->
<aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
<div class="h-16 flex items-center px-6 border-b border-white/10">
<aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
<div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
<a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
<img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
</a>
@@ -166,8 +177,8 @@ under the License.
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
<h1 class="text-xl font-semibold text-charcoal">VersityGW Buckets</h1>
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
<h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Buckets</h1>
<button onclick="loadBuckets()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
@@ -175,7 +186,7 @@ under the License.
</button>
</header>
<main class="flex-1 overflow-auto p-8">
<main class="flex-1 overflow-auto p-6">
<div class="max-w-7xl mx-auto">
<!-- Page Header -->
<div class="flex items-center justify-between mb-6">
webui/web/dashboard.html
+17 -6
View File
@@ -49,10 +49,21 @@ under the License.
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<div class="flex h-screen overflow-hidden">
<div class="relative flex h-screen overflow-hidden">
<input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
<label for="sidebar-toggle" aria-label="Toggle navigation" class="
sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
flex justify-center items-center p-2 rounded-lg transition-all
text-charcoal-300 hover:text-charcoal hover:bg-gray-100
peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
<path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
</svg>
</label>
<!-- Sidebar -->
<aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
<div class="h-16 flex items-center px-6 border-b border-white/10">
<aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
<div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
<a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
<img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
</a>
@@ -130,8 +141,8 @@ under the License.
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
<h1 class="text-xl font-semibold text-charcoal">VersityGW Dashboard</h1>
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
<h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Dashboard</h1>
<div class="flex items-center gap-4">
<button onclick="loadDashboard()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -141,7 +152,7 @@ under the License.
</div>
</header>
<main class="flex-1 overflow-auto p-8">
<main class="flex-1 overflow-auto p-6">
<div class="max-w-7xl mx-auto">
<!-- Metric Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
webui/web/explorer.html
+17 -8
View File
@@ -52,10 +52,21 @@ under the License.
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<div class="flex h-screen overflow-hidden">
<div class="relative flex h-screen overflow-hidden">
<input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
<label for="sidebar-toggle" aria-label="Toggle navigation" class="
sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
flex justify-center items-center p-2 rounded-lg transition-all
text-charcoal-300 hover:text-charcoal hover:bg-gray-100
peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
<path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
</svg>
</label>
<!-- Sidebar -->
<aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
<div class="h-16 flex items-center px-6 border-b border-white/10">
<aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
<div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
<a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
<img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
</a>
@@ -133,10 +144,8 @@ under the License.
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
<div class="flex items-center gap-4">
<h1 class="text-xl font-semibold text-charcoal">VersityGW Explorer</h1>
</div>
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
<h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Explorer</h1>
<div id="header-actions" class="flex items-center gap-2 hidden">
<button onclick="refresh()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -190,7 +199,7 @@ under the License.
</div>
</div>
<main class="flex-1 overflow-auto p-8" id="drop-zone">
<main class="flex-1 overflow-auto p-6" id="drop-zone">
<div class="max-w-7xl mx-auto">
<!-- Drop Zone Overlay (hidden by default) -->
<div id="drop-overlay" class="hidden fixed inset-0 z-40 bg-accent/10 border-4 border-dashed border-accent flex items-center justify-center">
webui/web/users.html
+17 -6
View File
@@ -80,10 +80,21 @@ under the License.
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<div class="flex h-screen overflow-hidden">
<div class="relative flex h-screen overflow-hidden">
<input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
<label for="sidebar-toggle" aria-label="Toggle navigation" class="
sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
flex justify-center items-center p-2 rounded-lg transition-all
text-charcoal-300 hover:text-charcoal hover:bg-gray-100
peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
<path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
</svg>
</label>
<!-- Sidebar -->
<aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
<div class="h-16 flex items-center px-6 border-b border-white/10">
<aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
<div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
<a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
<img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
</a>
@@ -159,8 +170,8 @@ under the License.
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
<h1 class="text-xl font-semibold text-charcoal">VersityGW Users</h1>
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
<h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Users</h1>
<button onclick="loadUsers()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
@@ -168,7 +179,7 @@ under the License.
</button>
</header>
<main class="flex-1 overflow-auto p-8">
<main class="flex-1 overflow-auto p-6">
<div class="max-w-7xl mx-auto">
<!-- Page Header -->
<div class="flex items-center justify-between mb-6">