Update web/templates/base.html
This commit is contained in:
parent
2c74d07701
commit
047a955659
@ -1,19 +1,59 @@
|
|||||||
|
{% 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 %}">
|
<body class="{% block body_class %}{% endblock %}">
|
||||||
<div class="topbar-wrap">
|
<div class="topbar-wrap">
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a class="brand-title" href="{% url 'search' %}">Illustrations Database</a>
|
<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>
|
<a class="version-link" href="https://git.lan/joshlaymon/Illustrations/wiki" title="Release notes">{{APP_VERSION}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desktop nav (hidden on small screens) -->
|
<div class="nav-right">
|
||||||
<div class="nav-right desktop-nav">
|
|
||||||
<a class="nav-btn" href="{% url 'search' %}">Search</a>
|
<a class="nav-btn" href="{% url 'search' %}">Search</a>
|
||||||
<a class="btn btn-success" href="{% url 'entry_add' %}">+ New Entry</a>
|
<a class="btn btn-success" href="{% url 'entry_add' %}">+ New Entry</a>
|
||||||
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
|
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
|
||||||
|
|
||||||
|
|
||||||
{% if user.is_authenticated and user.is_staff %}
|
{% if user.is_authenticated and user.is_staff %}
|
||||||
<a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
|
<a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
|
||||||
|
<!-- <a class="nav-btn" href="{% url 'import_wizard' %}">Import</a> -->
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
@ -25,39 +65,6 @@
|
|||||||
<a class="nav-btn primary" href="{% url 'login' %}">Login</a>
|
<a class="nav-btn primary" href="{% url 'login' %}">Login</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
@ -76,106 +83,5 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% block extra_body %}{% endblock %}
|
{% block extra_body %}{% endblock %}
|
||||||
|
</body>
|
||||||
<!-- Minimal CSS to enable the mobile menu without shrinking text -->
|
</html>
|
||||||
<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