From 047a9556594c0ce28f20ec73dfadbaf08b97e4a0 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 16 Aug 2025 04:13:13 +0000
Subject: [PATCH] Update web/templates/base.html

---
 web/templates/base.html | 192 ++++++++++------------------------------
 1 file changed, 49 insertions(+), 143 deletions(-)
diff --git a/web/templates/base.html b/web/templates/base.html
index 316bc94..99d3117 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -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 %}">
   <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>
 
-      <!-- Desktop nav (hidden on small screens) -->
-      <div class="nav-right desktop-nav">
+      <div class="nav-right">
         <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 'export_csv' %}">Backup</a>
+         <!--  <a class="nav-btn" href="{% url 'import_wizard' %}">Import</a> -->
+          
         {% endif %}
 
         {% if user.is_authenticated %}
@@ -25,39 +65,6 @@
           <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>
 
@@ -76,106 +83,5 @@
   </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>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file
