181 lines
5.7 KiB
HTML
181 lines
5.7 KiB
HTML
<body class="{% block body_class %}{% endblock %}">
|
|
<div class="topbar-wrap">
|
|
<div class="topbar">
|
|
<div class="brand">
|
|
<a class="brand-title" href="{% url 'search' %}">Illustrations Database</a>
|
|
<a class="version-link" href="https://git.lan/joshlaymon/Illustrations/wiki" title="Release notes">{{ APP_VERSION }}</a>
|
|
</div>
|
|
|
|
<!-- Desktop nav (hidden on small screens) -->
|
|
<div class="nav-right desktop-nav">
|
|
<a class="nav-btn" href="{% url 'search' %}">Search</a>
|
|
<a class="btn btn-success" href="{% url 'entry_add' %}">+ New Entry</a>
|
|
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
|
|
|
|
{% if user.is_authenticated and user.is_staff %}
|
|
<a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
|
|
{% endif %}
|
|
|
|
{% if user.is_authenticated %}
|
|
<span class="user-chip">Signed in: {{ user.username }}</span>
|
|
<form method="post" action="{% url 'logout' %}" style="display:inline;">{% csrf_token %}
|
|
<button class="nav-btn">Logout</button>
|
|
</form>
|
|
{% else %}
|
|
<a class="nav-btn primary" href="{% url 'login' %}">Login</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Mobile hamburger (hidden on desktop) -->
|
|
<button
|
|
id="hamburger"
|
|
class="hamburger"
|
|
aria-label="Open menu"
|
|
aria-controls="mobileMenu"
|
|
aria-expanded="false">
|
|
<!-- iOS-style share-ish three-bar icon -->
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile dropdown menu -->
|
|
<div id="mobileMenu" class="mobile-menu" hidden>
|
|
<nav class="mobile-menu-inner" role="menu">
|
|
<a class="mobile-link" href="{% url 'search' %}" role="menuitem">Search</a>
|
|
<a class="mobile-link" href="{% url 'entry_add' %}" role="menuitem">+ New Entry</a>
|
|
<a class="mobile-link" href="{% url 'stats' %}" role="menuitem">Statistics</a>
|
|
|
|
{% if user.is_authenticated and user.is_staff %}
|
|
<a class="mobile-link" href="{% url 'export_csv' %}" role="menuitem">Backup</a>
|
|
{% endif %}
|
|
|
|
{% if user.is_authenticated %}
|
|
<div class="mobile-user">Signed in: {{ user.username }}</div>
|
|
<form method="post" action="{% url 'logout' %}" role="menuitem">{% csrf_token %}
|
|
<button class="mobile-link danger" style="width:100%; text-align:left;">Logout</button>
|
|
</form>
|
|
{% else %}
|
|
<a class="mobile-link primary" href="{% url 'login' %}" role="menuitem">Login</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
{% if messages %}
|
|
<div class="messages">
|
|
{% for message in messages %}
|
|
<div class="msg {{ message.tags|default:'info' }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<main class="page">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
{% block extra_body %}{% endblock %}
|
|
|
|
<!-- Minimal CSS to enable the mobile menu without shrinking text -->
|
|
<style>
|
|
/* Show hamburger only on small screens */
|
|
.hamburger { display: none; }
|
|
|
|
@media (max-width: 700px) {
|
|
.desktop-nav { display: none; }
|
|
.hamburger {
|
|
display: inline-flex;
|
|
width: 38px; height: 34px;
|
|
align-items: center; justify-content: center;
|
|
border: 1px solid var(--nav-border);
|
|
border-radius: 10px;
|
|
background: var(--btn-bg);
|
|
cursor: pointer;
|
|
}
|
|
.hamburger span {
|
|
display: block;
|
|
width: 20px; height: 2px; margin: 2px 0;
|
|
background: var(--nav-ink);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Mobile dropdown panel */
|
|
.mobile-menu {
|
|
position: absolute;
|
|
top: 56px; /* sits under the topbar */
|
|
right: 16px;
|
|
left: 16px;
|
|
z-index: 50;
|
|
}
|
|
.mobile-menu[hidden] { display: none; }
|
|
|
|
.mobile-menu-inner {
|
|
background: #fff;
|
|
border: 1px solid var(--nav-border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.08);
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
.mobile-link {
|
|
display: block;
|
|
padding: 12px 14px;
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
color: var(--nav-ink);
|
|
}
|
|
.mobile-link:hover { background: var(--btn-hover); }
|
|
.mobile-link.primary {
|
|
color: #fff;
|
|
background: var(--nav-brand);
|
|
}
|
|
.mobile-link.danger { color: #b91c1c; }
|
|
.mobile-user {
|
|
padding: 10px 14px;
|
|
color: var(--nav-ink-muted);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Tiny JS to toggle the dropdown, close on outside click / Esc, and reset on resize -->
|
|
<script>
|
|
(function () {
|
|
const btn = document.getElementById('hamburger');
|
|
const menu = document.getElementById('mobileMenu');
|
|
|
|
if (!btn || !menu) return;
|
|
|
|
const open = () => {
|
|
menu.hidden = false;
|
|
btn.setAttribute('aria-expanded', 'true');
|
|
};
|
|
const close = () => {
|
|
menu.hidden = true;
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
};
|
|
|
|
btn.addEventListener('click', () => {
|
|
if (menu.hidden) open(); else close();
|
|
});
|
|
|
|
// Click outside closes
|
|
document.addEventListener('click', (e) => {
|
|
if (menu.hidden) return;
|
|
const within = menu.contains(e.target) || btn.contains(e.target);
|
|
if (!within) close();
|
|
});
|
|
|
|
// Esc closes
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') close();
|
|
});
|
|
|
|
// On resize to desktop, ensure the menu is closed
|
|
const mq = window.matchMedia('(min-width: 701px)');
|
|
mq.addEventListener('change', () => close());
|
|
})();
|
|
</script>
|
|
</body> |