fajri/cpone_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile UI and add infinite scroll

Browse Source
This commit is contained in:
sas.fajri
2026-05-04 10:44:38 +07:00
parent b07f04217e
commit 7c378f78bf
17 changed files with 729 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
cpone-dashboard/templates/layout/base.html
View File

@@ -53,16 +53,27 @@
<body class="min-h-screen bg-slate-100 text-slate-800">
<!-- Header -->
<header class="bg-brand-500 text-white">
<div class="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
<header class="w-full bg-brand-500 text-white">
<div class="mx-auto flex w-full items-center justify-between px-4 py-3 sm:px-6 lg:max-w-7xl lg:px-8">
<div class="flex items-center gap-4">
<a href="{{b "/dashboard"}}" class="shrink-0 rounded-lg bg-white px-3 py-1.5">
<img src="{{b "/static/img/logo.png"}}" alt="Logo" class="h-8 w-auto">
</a>
<div>
<div class="min-w-0">
<p class="text-sm font-semibold leading-tight">{{block "header-title" .}}Dashboard{{end}}</p>
</div>
</div>
<button
id="mobile-menu-toggle"
type="button"
class="inline-flex items-center justify-center rounded-lg p-2 text-white transition hover:bg-white/15 sm:hidden"
aria-label="Buka menu navigasi"
aria-controls="mobile-menu"
aria-expanded="false">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<div class="hidden items-center gap-1 text-sm sm:flex">
<nav class="flex items-center gap-1">
<a href="{{b "/dashboard"}}" class="rounded-lg px-3 py-1.5 font-medium transition hover:bg-white/15">Dashboard</a>
@@ -79,12 +90,39 @@
{{end}}
</div>
</div>
<div id="mobile-menu" class="hidden border-t border-white/20 px-4 py-3 sm:hidden">
<nav class="flex flex-col gap-1 text-sm">
<a href="{{b "/dashboard"}}" class="rounded-lg px-3 py-2 font-medium transition hover:bg-white/15">Dashboard</a>
<a href="{{b "/arrival"}}" class="rounded-lg px-3 py-2 font-medium transition hover:bg-white/15">Arrival</a>
<a href="{{b "/progress"}}" class="rounded-lg px-3 py-2 font-medium transition hover:bg-white/15">Progress</a>
<a href="{{b "/abnormal"}}" class="rounded-lg px-3 py-2 font-medium transition hover:bg-white/15">Abnormal</a>
<a href="{{b "/result"}}" class="rounded-lg px-3 py-2 font-medium transition hover:bg-white/15">Result</a>
</nav>
{{if .Username}}
<div class="mt-3 flex items-center justify-between gap-2 border-t border-white/20 pt-3">
<a href="{{b "/password"}}" class="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold tracking-wide transition hover:bg-white/25">{{.Username}}</a>
<a href="{{b "/logout"}}" class="rounded-lg px-3 py-1.5 text-sm font-medium opacity-85 transition hover:bg-white/15 hover:opacity-100">Logout</a>
</div>
{{end}}
</div>
</header>
<main class="mx-auto w-full max-w-7xl space-y-5 px-4 py-5 sm:px-6 lg:px-8">
{{block "content" .}}{{end}}
</main>
<script>
(() => {
const btn = document.getElementById('mobile-menu-toggle');
const menu = document.getElementById('mobile-menu');
if (!btn || !menu) return;
btn.addEventListener('click', () => {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
menu.classList.toggle('hidden');
});
})();
</script>
</body>
</html>
{{end}}