82 lines
3.9 KiB
HTML
82 lines
3.9 KiB
HTML
{{-- Back-to-dashboard bar for admin/mod subpages: /mod… pages (and non-admins) go to /mod, /admin… pages to /admin. Include right after #main opens (AJAX nav only swaps #main). --}}
|
|
<nav class="adm-back" aria-label="Breadcrumb">
|
|
@if(session && session.admin && !is_mod_area)
|
|
<a href="/admin" class="adm-back-link">
|
|
<span class="adm-back-arrow"><i class="fa-solid fa-arrow-left"></i></span>
|
|
<span class="adm-back-text"><small>Back to</small>Admin dashboard</span>
|
|
</a>
|
|
@else
|
|
<a href="/mod" class="adm-back-link">
|
|
<span class="adm-back-arrow"><i class="fa-solid fa-arrow-left"></i></span>
|
|
<span class="adm-back-text"><small>Back to</small>Moderator dashboard</span>
|
|
</a>
|
|
@endif
|
|
<span class="adm-back-crumb" aria-current="page"></span>
|
|
</nav>
|
|
|
|
@include(snippets/admin-skin)
|
|
|
|
<style>
|
|
.adm-back {
|
|
--ab-accent: var(--accent, #0096ff);
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
max-width: 1200px; margin: 0 auto; padding: 18px 16px 0; box-sizing: border-box;
|
|
text-align: left;
|
|
}
|
|
.adm-back, .adm-back * { border-radius: 0 !important; }
|
|
.adm-back-link {
|
|
position: relative; display: inline-flex; align-items: stretch; overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text-color, var(--white, #fff)); text-decoration: none;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
.adm-back-link::after {
|
|
content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
|
|
background: var(--ab-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
|
|
}
|
|
.adm-back-link:hover, .adm-back-link:focus-visible {
|
|
border-color: var(--ab-accent); background: color-mix(in srgb, var(--ab-accent) 8%, transparent);
|
|
color: var(--text-color, var(--white, #fff)); text-decoration: none; outline: none;
|
|
}
|
|
.adm-back-link:hover::after, .adm-back-link:focus-visible::after { transform: scaleX(1); }
|
|
.adm-back-arrow {
|
|
display: flex; align-items: center; justify-content: center; width: 38px;
|
|
background: var(--ab-accent); color: #000; font-size: 0.9em;
|
|
}
|
|
.adm-back-arrow i { transition: transform 0.2s ease; }
|
|
.adm-back-link:hover .adm-back-arrow i { transform: translateX(-3px); }
|
|
.adm-back-text {
|
|
display: flex; flex-direction: column; justify-content: center; padding: 6px 14px 7px 12px;
|
|
font-size: 0.86em; font-weight: 700; line-height: 1.2; white-space: nowrap;
|
|
}
|
|
.adm-back-text small {
|
|
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
|
|
color: var(--text-muted, #8a8f98);
|
|
}
|
|
.adm-back-crumb {
|
|
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
|
|
color: var(--text-muted, #8a8f98);
|
|
}
|
|
.adm-back-crumb:not(:empty)::before { content: '/ '; color: var(--ab-accent); }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.adm-back-link::after, .adm-back-arrow i { transition: none; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(() => {
|
|
// Breadcrumb = the page's own heading (first h1/h2 in #main). The rest of the page isn't in the
|
|
// DOM yet when this runs (parser / AJAX insert), so wait until it is.
|
|
const fill = () => {
|
|
const crumb = document.querySelector('#main .adm-back-crumb');
|
|
const main = document.getElementById('main');
|
|
if (!crumb || !main) return;
|
|
const heading = Array.from(main.querySelectorAll('h1, h2')).find(h => !h.closest('.adm-back') && h.textContent.trim());
|
|
if (heading) crumb.textContent = heading.innerText.trim().slice(0, 60); // innerText already collapses whitespace (no regex: the template engine strips backslashes)
|
|
};
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fill, { once: true });
|
|
else setTimeout(fill, 0);
|
|
})();
|
|
</script>
|