Update web/templates/base.html
This commit is contained in:
+113
-28
@@ -1,47 +1,132 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>{% block title %}Illustrations{% endblock %}</title>
|
<title>{% block title %}Illustrations{% endblock %}</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<!-- Main CSS -->
|
<!-- Your global stylesheet (keep if you already have one) -->
|
||||||
<link rel="stylesheet" href="{% static 'app.css' %}">
|
<link rel="stylesheet" href="{% static 'app.css' %}">
|
||||||
|
{% block extra_head %}{% endblock %}
|
||||||
|
<style>
|
||||||
|
/* Scoped navbar polish only — leaves your existing look intact */
|
||||||
|
:root{
|
||||||
|
--nav-bg: #f8fafc;
|
||||||
|
--nav-border: #e5e7eb;
|
||||||
|
--nav-ink: #1f2937;
|
||||||
|
--nav-ink-muted: #6b7280;
|
||||||
|
--nav-brand: #2f6cab; /* soft blue */
|
||||||
|
--nav-brand-hover: #1f4c7a;
|
||||||
|
--btn-bg: #ffffff;
|
||||||
|
--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; /* thicker bar */
|
||||||
|
display:flex; align-items:center; gap:14px; justify-content:space-between;
|
||||||
|
font-size:17px; /* slightly larger */
|
||||||
|
}
|
||||||
|
.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}
|
||||||
|
|
||||||
<!-- Optional: Add Google Fonts -->
|
/* Rectangular buttons with subtle separation + hover */
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
.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 ease, border-color .12s ease, box-shadow .12s ease;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
.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 frame */
|
||||||
|
.page{
|
||||||
|
max-width:1100px; margin:18px auto; padding:0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Messages (Django messages framework) */
|
||||||
|
.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Top navigation -->
|
||||||
<nav class="navbar">
|
<div class="topbar-wrap">
|
||||||
<div class="navbar-left">
|
<div class="topbar">
|
||||||
<a href="{% url 'search' %}" class="navbar-brand">Illustrations</a>
|
<a href="{% url 'search' %}" class="brand">
|
||||||
</div>
|
<span>Illustrations</span>
|
||||||
<div class="navbar-right">
|
<span class="tagline">Reference Database</span>
|
||||||
<a href="{% url 'search' %}" class="nav-button">Search</a>
|
</a>
|
||||||
<a href="{% url 'stats' %}" class="nav-button">Statistics</a>
|
|
||||||
|
<div class="nav-right">
|
||||||
|
<!-- Left group: main pages -->
|
||||||
|
<a class="nav-btn" href="{% url 'search' %}">Search</a>
|
||||||
|
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
|
||||||
|
|
||||||
|
{% if user.is_authenticated and user.is_staff %}
|
||||||
|
<a class="nav-btn" href="{% url 'import_wizard' %}">Import</a>
|
||||||
|
<a class="nav-btn" href="{% url 'export_csv' %}">Backup (CSV)</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Right group: user -->
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<a href="{% url 'admin:index' %}" class="nav-button">Admin</a>
|
<span class="user-chip">Signed in: {{ user.username }}</span>
|
||||||
<a href="{% url 'logout' %}" class="nav-button">Logout</a>
|
<form method="post" action="{% url 'logout' %}" style="display:inline;">
|
||||||
|
{% csrf_token %}
|
||||||
|
<button class="nav-btn">Logout</button>
|
||||||
|
</form>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{% url 'login' %}" class="nav-button">Login</a>
|
<a class="nav-btn primary" href="{% url 'login' %}">Login</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Main container -->
|
<!-- Messages -->
|
||||||
<main class="content">
|
<div class="page">
|
||||||
{% block content %}
|
{% if messages %}
|
||||||
{% endblock %}
|
<div class="messages">
|
||||||
|
{% for message in messages %}
|
||||||
|
<div class="msg {{ message.tags|default:'info' }}">{{ message }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<main class="page">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
{% block extra_body %}{% endblock %}
|
||||||
<footer class="footer">
|
|
||||||
<p>© {{ current_year }} Illustrations Database</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user