Auth: convert auth views and verification email to Nova layout

This commit is contained in:
2026-02-21 07:37:08 +01:00
parent 93b009d42a
commit 795c7a835f
117 changed files with 5385 additions and 1291 deletions

View File

@@ -10,18 +10,25 @@
<div class="pt-0">
<div class="mx-auto w-full">
<div class="flex min-h-[calc(100vh-64px)]">
<div class="relative flex min-h-[calc(100vh-64px)]">
<button
id="sidebar-toggle"
type="button"
class="hidden md:inline-flex items-center justify-center h-10 w-10 rounded-lg border border-white/10 bg-white/5 text-white/90 hover:bg-white/10 absolute top-3 z-20"
aria-controls="sidebar"
aria-expanded="true"
aria-label="Toggle sidebar"
style="left:16px;"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</span>
<span class="text-sm text-white/90">Menu</span>
</button>
<div class="mt-6 text-sm text-neutral-400">
<div class="mt-2 text-sm text-neutral-400">
<div class="font-semibold text-white/80 mb-2">Main Categories:</div>
<ul class="space-y-2">
@foreach($mainCategories as $main)
@@ -32,7 +39,7 @@
</ul>
<div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
<ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
<ul class="space-y-2 pr-2">
@forelse($subcategories as $sub)
@php
$subName = $sub->category_name ?? $sub->name ?? null;
@@ -128,9 +135,13 @@
@media (min-width: 1024px) {
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2600px) {
/* Larger desktop screens: 5 columns */
@media (min-width: 1600px) {
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2600px) {
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
/* Keep pagination visible when JS enhances the gallery so users
have a clear navigation control (numeric links for length-aware
@@ -184,4 +195,64 @@
@push('scripts')
<script src="/js/legacy-gallery-init.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var toggle = document.getElementById('sidebar-toggle');
var sidebar = document.getElementById('sidebar');
if (!toggle || !sidebar) return;
var collapsed = false;
try {
collapsed = window.localStorage.getItem('gallery.sidebar.collapsed') === '1';
} catch (e) {
collapsed = false;
}
function applySidebarState() {
if (collapsed) {
sidebar.classList.add('md:hidden');
toggle.setAttribute('aria-expanded', 'false');
} else {
sidebar.classList.remove('md:hidden');
toggle.setAttribute('aria-expanded', 'true');
}
positionToggle();
}
toggle.addEventListener('click', function () {
collapsed = !collapsed;
applySidebarState();
try {
window.localStorage.setItem('gallery.sidebar.collapsed', collapsed ? '1' : '0');
} catch (e) {
// no-op
}
});
function positionToggle() {
if (!toggle || !sidebar) return;
// when sidebar is visible, position toggle just outside its right edge
if (!collapsed) {
var rect = sidebar.getBoundingClientRect();
if (rect && rect.right) {
toggle.style.left = (rect.right + 8) + 'px';
toggle.style.transform = '';
} else {
// fallback to sidebar width (18rem)
toggle.style.left = 'calc(18rem + 8px)';
}
} else {
// when collapsed, position toggle near page left edge
toggle.style.left = '16px';
toggle.style.transform = '';
}
}
window.addEventListener('resize', function () { positionToggle(); });
applySidebarState();
// ensure initial position set
positionToggle();
});
</script>
@endpush