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-09-06 03:32:35 +00:00
parent 09fb08ab36
commit 8ce66202d1
1 changed files with 24 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
web/templates/base.html
View File

@ -28,18 +28,13 @@
<!-- === PWA additions (BEGIN) === -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#f3f6f7">
<!--<meta name="theme-color" content="#2f6cab"> -->
<!-- iOS standalone when added to Home Screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- iOS app icons -->
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'pwa/apple-touch-icon-180x180.png' %}">
<link rel="apple-touch-icon" sizes="167x167" href="{% static 'pwa/apple-touch-icon-167x167.png' %}">
<link rel="apple-touch-icon" sizes="152x152" href="{% static 'pwa/apple-touch-icon-152x152.png' %}">
<link rel="apple-touch-icon" sizes="120x120" href="{% static 'pwa/apple-touch-icon-120x120.png' %}">
<!-- Optional fallback some iOS versions fetch if sizes are missing -->
<link rel="apple-touch-icon" href="{% static 'pwa/apple-touch-icon-180x180.png' %}">
<!-- Optional: control the name under the icon -->
<meta name="apple-mobile-web-app-title" content="Illustrations">
<!-- === PWA additions (END) === -->
@ -56,11 +51,7 @@
top: 0;
z-index: 1000;
}
.topbar-wrap.is-scrolled {
box-shadow: 0 4px 16px rgba(0,0,0,.08);
border-bottom-color: transparent;
}
.topbar-wrap.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-bottom-color: transparent; }
.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}
@ -88,38 +79,15 @@
@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;
flex-direction: column;
gap: 4px;
}
.hamburger span{
display:block;
width:20px; height:2px;
margin: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);
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;
flex-direction: column; gap: 4px;
}
.hamburger span{ display:block; width:20px; height:2px; margin: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; }
@ -129,7 +97,6 @@
/* --- user menu (desktop dropdown) --- */
.user-chip{ cursor:pointer; text-decoration:none; }
.user-chip:hover{ background:var(--btn-hover); }
.user-dropdown{ position:relative; }
.user-menu{
position:absolute; right:0; top:calc(100% + 8px);
@ -138,21 +105,20 @@
min-width: 160px; padding:6px; display:grid; gap:4px; z-index:60;
}
.user-menu[hidden]{ display:none !important; }
.user-menu .menu-item{
display:block; width:100%; text-align:left;
padding:10px 12px; border-radius:10px;
text-decoration:none; color:var(--nav-ink);
background:transparent; border:none; cursor:pointer;
font-size:16px; /* ensure uniform size */
font-family:inherit;
display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px;
text-decoration:none; color:var(--nav-ink); background:transparent; border:none; cursor:pointer;
font-size:16px; font-family:inherit;
}
.user-menu .menu-item:hover{ background:var(--btn-hover); }
.user-menu .danger-btn{ color:#b91c1c; }
</style>
</head>
<body class="{% block body_class %}{% endblock %}">
{# Auto-apply 'themed-bg' for Classic so your original gradient shows everywhere (passthrough) #}
{% with current_theme=request.session.theme|default:'classic' %}
<body class="{% block body_class %}{% endblock %}{% if current_theme == 'classic' %} themed-bg{% endif %}">
{% endwith %}
<div class="topbar-wrap">
<div class="topbar">
<div class="brand">
@ -172,15 +138,10 @@
{{ user.username }}
</button>
<div id="userMenu" class="user-menu" hidden>
{% if user.is_superuser %}
<a class="menu-item" href="/admin/">Admin</a>
{% endif %}
{% if user.is_staff %}
<a class="menu-item" href="{% url 'export_csv' %}">Backup</a>
{% endif %}
{% if user.is_superuser %}<a class="menu-item" href="/admin/">Admin</a>{% endif %}
{% if user.is_staff %}<a class="menu-item" href="{% url 'export_csv' %}">Backup</a>{% endif %}
<a class="menu-item" href="{% url 'settings_home' %}">Settings</a>
<form method="post" action="{% url 'logout' %}">
{% csrf_token %}
<form method="post" action="{% url 'logout' %}">{% csrf_token %}
<button class="menu-item danger-btn" type="submit">Logout</button>
</form>
</div>
@ -245,7 +206,6 @@
if (btn && menu) {
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;
@ -283,12 +243,10 @@
(function () {
const bar = document.querySelector('.topbar-wrap');
if (!bar) return;
const onScroll = () => {
const y = window.scrollY || document.documentElement.scrollTop || 0;
bar.classList.toggle('is-scrolled', y > 2);
};
document.addEventListener('scroll', onScroll, { passive: true });
onScroll(); // initialize
})();