Auth: convert auth views and verification email to Nova layout
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user