joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/base.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-16 04:16:44 +00:00
parent 047a955659
commit d4fecafe5a
1 changed files with 95 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
web/templates/base.html
View File

@ -32,28 +32,66 @@
.msg.warning{border-color:#fde68a; background:#fffbeb} .msg.warning{border-color:#fde68a; background:#fffbeb}
.msg.error{border-color:#fecaca; background:#fef2f2} .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} } @media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
/* --- additions for mobile hamburger --- */
.hamburger { display:none; }
.mobile-menu[hidden]{ display:none; }
@media (max-width:700px){
.desktop-nav { display:none; } /* hide the right-side buttons on phones */
.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-menu{
position:absolute; top:56px; right:16px; left:16px; z-index:50;
}
.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{ background:var(--nav-brand); color:#fff; }
.mobile-link.danger{ color:#b91c1c; }
.mobile-user{ padding:10px 14px; color:var(--nav-ink-muted); font-size:14px; }
}
</style> </style>
</head> </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>
<div class="nav-right"> <!-- existing nav, unchanged; we just add "desktop-nav" -->
<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 %}
@ -65,6 +103,33 @@
<a class="nav-btn primary" href="{% url 'login' %}">Login</a> <a class="nav-btn primary" href="{% url 'login' %}">Login</a>
{% endif %} {% endif %}
</div> </div>
<!-- new: hamburger button (only shows on small screens via CSS) -->
<button id="hamburger" class="hamburger" aria-label="Open menu" aria-controls="mobileMenu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
<!-- new: mobile dropdown (hidden by default) -->
<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>
@ -83,5 +148,25 @@
</main> </main>
{% block extra_body %}{% endblock %} {% block extra_body %}{% endblock %}
<!-- tiny toggle script -->
<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', () => (menu.hidden ? open() : close()));
document.addEventListener('click', (e) => {
if (menu.hidden) return;
if (!menu.contains(e.target) && !btn.contains(e.target)) close();
});
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
window.matchMedia('(min-width: 701px)').addEventListener('change', () => close());
})();
</script>
</body> </body>
</html> </html>