Update web/templates/base.html
This commit is contained in:
parent
da305563a8
commit
2c74d07701
@ -1,59 +1,19 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{% block title %}Illustrations{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="{% static 'app.css' %}">
|
||||
{% block extra_head %}{% endblock %}
|
||||
<style>
|
||||
:root{
|
||||
--nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
|
||||
--nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
|
||||
}
|
||||
.topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
|
||||
.topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
|
||||
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
|
||||
.brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
|
||||
.nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
|
||||
.nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
|
||||
.nav-btn:hover{background:var(--btn-hover)}
|
||||
.nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
|
||||
.nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
|
||||
.nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
|
||||
.nav-btn.danger:hover{filter:brightness(.95)}
|
||||
.user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}
|
||||
.page{max-width:1100px; margin:18px auto; padding:0 16px}
|
||||
.messages{margin:12px 0; display:grid; gap:8px}
|
||||
.msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
|
||||
.msg.info{border-color:#dbeafe; background:#eff6ff}
|
||||
.msg.success{border-color:#bbf7d0; background:#ecfdf5}
|
||||
.msg.warning{border-color:#fde68a; background:#fffbeb}
|
||||
.msg.error{border-color:#fecaca; background:#fef2f2}
|
||||
@media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- ✅ single body tag with block for page-specific classes -->
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="nav-right">
|
||||
<!-- 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>
|
||||
<!-- <a class="nav-btn" href="{% url 'import_wizard' %}">Import</a> -->
|
||||
|
||||
<a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
@ -65,6 +25,39 @@
|
||||
<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>
|
||||
|
||||
@ -83,5 +76,106 @@
|
||||
</main>
|
||||
|
||||
{% block extra_body %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- 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>
|
||||
Loading…
Reference in New Issue
Block a user